Является ли более эффективным использование функции find(), а не> для дочернего селектора в jQuery?

В jQuery я подумал, что будет более эффективным найти дочерний DOM с определенным селектором с Реализация 1, как показано ниже:

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?

Ответ 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>

Ответ 2

Мое предположение:

Под капотом $('#XXX whatever') есть родной document.queryselectorAll(), который будет проверять все элементы документа, чтобы увидеть, соответствуют ли они < #xxx whatever '

$('#XXX').find('whatever') сначала выполняет document.getElementById('XXX'), находя элемент с id="XXX", а затем делает queryselectorAll() внутри этого элемента, поэтому имеет меньшее количество дочерних элементов для проверки и видит, соответствуют ли они "whatever"

Но это предположение полностью отрицается реальными данными - см. ответ by @guest271314