Browser Diet - jQuery Selectors

JavaScript performance comparison

Revision 35 of this test case created by

Preparation code

<div>
  <ul id="list">
    <li class="test"></li>
    <li></li>
    <li class="test"></li>
    <li>
      <span class="txt">text</span>
    </li>
    <li class="test"></li>
    <li></li>
    <li class="test"></li>
    <li></li>
    <li class="test"></li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
  var list = document.getElementById('list');
  var $list = $('#list');
</script>
    

Preparation code output

<div> <ul id="list"> <li class="test"></li> <li></li> <li class="test"></li> <li> <span class="txt">text</span> </li> <li class="test"></li> <li></li> <li class="test"></li> <li></li> <li class="test"></li> </ul> </div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
context
var $test = $('.txt', $list);
pending…
selector
var $test = $('#list .txt');
pending…
context and find()
var $test = $list.find('.txt');
pending…
selector with context
var $test = $('.txt', '#list');
pending…
direct selector
var $test = $('.txt');
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.

0 Comments