使用find()比使用>用于jQuery中的子选择器

Is it more efficient to use find() rather than > for child selector in jQuery?

本文关键字：jQuery 用于 选择器 find 使用      更新时间：2023-09-26

在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更有效吗?

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>

我猜:

$('#XXX whatever')在引擎盖下做了一个本地document.queryselectorAll()，它将检查文档中的所有元素，看看它们是否匹配' #xxx whatever '

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

但是这个猜测完全被真实数据否定了——看看@guest271314的答案

相关文章：