Descendent Selector vs Find From Parent

JavaScript performance comparison

Revision 2 of this test case created

Info

A comparison between using a descendant selector $('.level-one .some-child') vs using find $('.level-one').find('.some-child').

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div></div>
<table class="level-one">
  <tr>
    <td class="some-child"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td class="some-child"></td>
  </tr>
</table>
<div></div>
<script>
Benchmark.prototype.setup = function() {
    var parent = $('.level-one');
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Descendant Selector
var elems = $('.level-one .some-child');
pending…
Descendant Selector Strong Left
var elems = $('table.level-one .some-child');
pending…
Descendant Selector Strong Right
var elems = $('.level-one td.some-child');
pending…
Descendant Selector Strong Both
var elems = $('table.level-one td.some-child');
pending…
Find
var elems = $('.level-one').find('.some-child');
pending…
Find Strong Parent
var elems = $('table.level-one').find('.some-child');
pending…
Find Strong Child
var elems = $('.level-one').find('td.some-child');
pending…
Context with Cached Parent
var elems = $('td', parent);
pending…
Find from Cached Parent
var elems = parent.find('td');
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment