使用find（）而不是>是否更有效率？在jQuery中的子选择器？ [英] Is it more efficient to use find() rather than > for child selector in jQuery?

问题描述

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

In jQuery, I thought it will be more efficient to find a child DOM with a specific selector with Implementation 1 as below:

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

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

But one friend of mine told me that it will be more efficient when using Implementation 2 as below:

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

参考

Referenced to other question, I found the Implementation 2 may be less efficient than:

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

但实施2 会比实施1 <更有效/ strong>？

But will Implementation 2 be more efficient than Implementation 1?

推荐答案

document.querySelector（）有直系后代选择器> 最快， .find（）最慢。

document.querySelector() with direct descendant selector > is fastest, .find() is slowest.

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>

这篇关于使用find（）而不是&gt;是否更有效率？在jQuery中的子选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！