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');

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');

But will Implementation 2 be more efficient than Implementation 1?

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');

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');

But will Implementation 2 be more efficient than Implementation 1?

• javascript
• jquery

• First code runned by native javascript search but second is jquery search. – Mohammad Commented Oct 12, 2016 at 8:26
• Go for find, in all perf tests of jquery the results are best, faster than context like $('table.dataTable', $('#' + tabId)) or an selector. – axel.michel Commented Oct 12, 2016 at 8:26
• 2 no. 1sd gives #tabId > .cont > .data > .table ,2nd gives #tabId .table – Dimava Commented Oct 12, 2016 at 8:27
• 1 > means direct descendents only, while .find() is the equivalent of " " (space) - which will search all descendents. The equivalent of > is .children(). If you have a large hierarchy of DOM elements under your top level node, > will be faster. – fdomn-m Commented Oct 12, 2016 at 8:30
• 1 this should show the diffence between selectors: sitepoint./jsperf1 – Pete Commented Oct 12, 2016 at 8:45

2 Answers 2

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

My guess:

Under the hood $('#XXX whatever') does a native document.queryselectorAll(), which will check all of the elements within the document to see if they match '#xxx whatever'

$('#XXX').find('whatever') first does a document.getElementById('XXX'), finding the element with id="XXX" and then does a queryselectorAll() within that element, so has fewer child elements to test and see if they match 'whatever'

But this guess is pletely negated by real data - see the answer by @guest271314