jquery selector speed

JavaScript performance comparison

Revision 2 of this test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<ul id="some-menu">
  <li class="menu-item">
    Item 1
  </li>
  <li class="menu-item">
    Item 2
  </li>
  <li class="menu-item">
    Item 3
  </li>
  <li class="menu-item">
    Item 4
  </li>
  <li class="menu-item">
    Item 5
  </li>
</ul>

<ul>
  <li>
    Item 1
  </li>
  <li>
    Item 2
  </li>
  <li>
    Item 3
  </li>
  <li>
    Item 4
  </li>
  <li>
    Item 5
  </li>
</ul>
<ul>
  <li>
    Item 1
  </li>
  <li>
    Item 2
  </li>
  <li>
    Item 3
  </li>
  <li>
    Item 4
  </li>
  <li>
    Item 5
  </li>
</ul>
<ul>
  <li>
    Item 1
  </li>
  <li>
    Item 2
  </li>
  <li>
    Item 3
  </li>
  <li>
    Item 4
  </li>
  <li>
    Item 5
  </li>
</ul>
<ul>
  <li>
    Item 1
  </li>
  <li>
    Item 2
  </li>
  <li>
    Item 3
  </li>
  <li>
    Item 4
  </li>
  <li>
    Item 5
  </li>
</ul>
<ul>
  <li>
    Item 1
  </li>
  <li>
    Item 2
  </li>
  <li>
    Item 3
  </li>
  <li>
    Item 4
  </li>
  <li>
    Item 5
  </li>
</ul>
<ul>
  <li>
    Item 1
  </li>
  <li>
    Item 2
  </li>
  <li>
    Item 3
  </li>
  <li>
    Item 4
  </li>
  <li>
    Item 5
  </li>
</ul>
<ul>
  <li>
    Item 1
  </li>
  <li>
    Item 2
  </li>
  <li>
    Item 3
  </li>
  <li>
    Item 4
  </li>
  <li>
    Item 5
  </li>
</ul>
<script>
  (function($) {
    $.fn.doSomething = function() {
      return this.each(function() {});
    };
  })(jQuery);
</script>

Preparation code output

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
class selector
$(".menu-item").doSomething();
pending…
element + class selector
$("li.menu-item").doSomething();
pending…
Id + class selector
$("#some-menu .menu-item").doSomething();
pending…
Id + class + element selector
$("#some-menu li.menu-item").doSomething();
pending…
element + class within context.
$("li.menu-item", "#some-menu").doSomething();
pending…
class within context
$(".menu-item", "#some-menu").doSomething();
pending…
class within context using 'find'
$("#some-menu").find(".menu-item").doSomething();
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