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

Question

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

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