在jQuery中爲child選擇器使用find（）而不是>效率更高嗎？

在jQuery中，我認爲這將是更有效地找到一個特定的選擇一個孩子DOM有如下實現1：在jQuery中爲child選擇器使用find（）而不是>效率更高嗎？

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

但是我的一個朋友告訴我，這將是更有效的當使用如下面 實現2：

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

參考other question，我發現實施2可以是低效率比：

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

但會實現2比實現1更有效率？

來源

2016-10-12 Javakid

首先通過代碼本地JavaScript搜索，但第二拼命地跑是jQuery的搜索。 – Mohammad

尋找，在jQuery的所有性能測試中，結果都是最好的，比$（'table.dataTable'，$（'＃'+ tabId））或選擇器更快。 –

@Mohammad不，他們都使用jizz選擇器引擎Sizzle。 – BenM

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(), >");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="abc"> 
 
    <div class="container"> 
 
    <div class="dataTableContainer"> 
 
     <table class="dataTable"> 
 
     <tbody> 
 
      <tr> 
 
      <td></td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 

 
</div>

來源

2016-10-12 08:45:55 guest271314

但是作爲一個方面說明，'document.querySelector（）'只匹配一個節點。 –

注意，OP沒有在問題中包含'html'。或者指定是否預期多個元素匹配。 – guest271314

@Kaiido'>'比沒有更快。 '.querySelector（）'或'.querySelectorAll（）'比jQuery方法更快。 – guest271314

我猜測：

引擎蓋下$('#XXX whatever')沒有本地document.queryselectorAll()，這將檢查所有文件內的元素，看看它們是否匹配「#xxx whatever」

$('#XXX').find('whatever')第一做一個document.getElementById('XXX')，找到元素id="XXX"，然後在該元素中做一個queryselectorAll()，所以有更少的子元素來測試，看看他們是否匹配' whatever'

但這種猜測完全是由真實數據否定 - 看到@ guest271314

來源

2016-10-12 08:39:48 kevmc

QSA在我意識到的任何瀏覽器中都沒有這樣做：它會查找所有的「任何」元素（來自緩存），然後對每個瀏覽祖先鏈來查看它們是否是元素的後代匹配'＃XXX'。瀏覽器的選擇器匹配已經很好的優化了！ – gsnedders

在jQuery中爲child選擇器使用find（）而不是>效率更高嗎？

回答

相關問題