.find() Versus Selectors Verus .children()

JavaScript performance comparison

Revision 9 of this test case created by Vaughn

Info

Will the battle never end?

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div class="null">
</div>
<div class="null">
  <div class="null">
  </div>
  <div class="null">
  </div>
</div>
<div class="null">
</div>
<div class="null">
</div>
<div class="null">
</div>
<div id="a">
  <div class="null">
  </div>
  <div class="null">
  </div>
  <div class="null">
  </div>
  <div class="a">
    <div class="c">
      <div class="null">
      </div>
      <div class="null">
      </div>
      <div id="null">
      </div>
      <div class="b">
      </div>
      <div class="null">
      </div>
    </div>
    <div class="null">
    </div>
    <div class="null">
    </div>
  </div>
  <div class="null">
  </div>
  <div class="null">
  </div>
  <div class="null">
  </div>
</div>
<script>
Benchmark.prototype.setup = function() {
    var $a = $('#a');
};
</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
Selector
$('#a .b');
pending…
Context
$('.b', $('#a'));
pending…
.find()
$('#a').find('.b');
pending…
Cached .find()
$a.find('.b');
pending…
Cached Context
$('.b', $a);
pending…
Speed .find() Without Container
$($.find('.b'));
pending…
Speed .find() With Container
$($.find('#a .b'));
pending…
Selector Without Container
$('.b');
pending…
.children()
$('#a').children('.b');
pending…
Cached .children()
$a.children('.b');
pending…
CSS Selector
$('#a > .b');
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