在jQuery中使用find（）而不是>对于子选择器更有效吗？

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

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

但我的一位朋友告诉我，使用实施2时效率会更高：

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

参考其他问题 ，我发现实施2可能效率低于：

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

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

Answer 1

具有直接后代选择器的document.querySelector()是最快的， .find()是最慢的。

 var tabId = "abc"; console.time(".find()"); var $dataTable = $('#' + tabId).find('table.dataTable'); console.timeEnd(".find()"); console.time("jQuery(), >"); var $dataTable = $('#' + tabId + ' > div.container > div.dataTableContainer > table.dataTable'); console.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(), >"); 

Answer 2

我的猜测 ：

在引擎盖下$('#XXX whatever')执行原生document.queryselectorAll() ，它将检查文档中的所有元素 ，看它们是否匹配’ #xxx whatever ‘

$('#XXX').find('whatever')首先执行document.getElementById('XXX') ，找到id="XXX"的元素，然后在该元素中执行queryselectorAll() ，因此子项较少要测试的元素，看它们是否匹配“ whatever ”

但这种猜测完全被实际数据否定 – 请参阅@ guest271314的答案