Question

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

this.mygrid.setOptions({source:{}}); or new DataAdapter

但我的一位朋友告诉我，使用它会更有效率 实施2 如下：

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

引用other question，我发现实施2可能效率低于：

var dataTable = $('#' + tabId).find('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(), >");

<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>

Answer 2

我的猜测：

幕后$('#XXX whatever')执行原生document.queryselectorAll()，会检查文档中的所有元素，看看它们是否匹配“#xxx whatever”< / p>

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

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

使用find（）而不是＆gt;是否更有效率？在jQuery中的子选择器？

2 个答案: