Javascript 使用find（）比使用>；更有效吗；对于jQuery中的子选择器？

在jQuery中，我认为使用实现1查找具有特定选择器的子DOM会更有效，如下所示：

var $dataTable = $('#' + tabId + ' > div.container > div.dataTableContainer > table.dataTable');

var dataTable = $('#' + tabId).find('table.dataTable');

但是我的一个朋友告诉我，当使用 实施2如下：

var $dataTable = $('#' + tabId + ' > div.container > div.dataTableContainer > table.dataTable');

var dataTable = $('#' + tabId).find('table.dataTable');

参考，我发现实施2的效率可能低于：

var $dataTable = $('#' + tabId + ' div.container div.dataTableContainer  table.dataTable');

但是实施2会比实施1更有效吗？

我猜：

在引擎盖下，

$（“#XXX whatever”）

执行本机

文档。queryselectoral（）

，它将检查文档中的所有元素，查看它们是否匹配“

#XXX whatever

”

$（“#XXX”）.find（'whatever'）

首先执行一个

文档。getElementById（'XXX'）

，找到具有

id=“XXX”

的元素，然后在该元素中执行

queryselectoral（）

，因此要测试的子元素更少，看看它们是否匹配“

whatever

”

---

但真实数据完全否定了这一猜测-请参见@guest271314的答案

文档。带有直接后代选择器的querySelector（）

最快，

，

最慢

var tabId=“abc”；
console.time（“.find（）”）；
var$dataTable=$（'#'+tabId）.find（'table.dataTable'）；
console.timeEnd（“.find（）”）；
time（“jQuery（），>”；
var$dataTable=$（'#'+tabId+'>div.container>div.dataTableContainer>table.dataTable'）；
timeEnd（“jQuery（），>”；
console.time（“document.querySelector（）”）；
var$dataTable=document.querySelector（“#”+tabId+“div.container div.dataTableContainer table.dataTable”）；
console.timeEnd（“document.querySelector（）”）；
console.time（“document.querySelector（），>”；
var$dataTable=document.querySelector（'#'+tabId+'>div.container>div.dataTableContainer>table.dataTable'）；
console.timeEnd（“document.querySelector（），>”

第一个代码由本机javascript搜索运行，第二个代码是jquery搜索。查找，在jquery的所有性能测试中，结果都是最好的，比上下文$（'table.dataTable'、$（'#'+tabId'）或选择器更快。否。1sd给出了
#tabId>.cont>.data>.table
，第二个给出了
#tabId.table
仅表示直接后代，而
.find（）
相当于
”
（空格）-它将搜索所有后代。
的等价物是
.children（）
。如果顶级节点下有大量的DOM元素层次结构，
将更快。这应该显示选择器之间的差异：但作为旁注，
document.querySelector（）
只匹配一个节点。注意，OP没有包含
html
。或者指定是否需要匹配多个元素。@kaido
比不匹配要快
.querySelector（）
或
.querySelectorAll（）
比jQuery方法快。与使用
文档相比，您的测试仍然存在偏差。querySelector（）
返回的是DOM节点，而不是jq集。因此，您仍然应该将结果包装在一个jq对象中，以进行更相关的比较。但这仍然是轻微的肥胖，但没有什么比使用它更合理，伊姆霍。最好是得到可读的代码，而不是一些能让你因误解和我糟糕的英语而赢得微附议的代码。它的意思应该是“高效”。QSA在我所知道的任何浏览器中都不会这样做：它会查找所有
任何
元素（从缓存中），然后每次遍历祖先链，查看它们是否是匹配
#XXX
的元素的后代。浏览器的选择器匹配得到了很好的优化！