querySelectorAll jquery

JavaScript performance comparison

Revision 2 of this test case created by tomByrer

Info

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<ul id=container>
  <li class=foo>
    Foo
  </li>
  <li class=foo>
    Foo
  </li>
  <li class=foo>
    Foo
  </li>
  <li class=foo>
    Foo
  </li>
  <li class=foo>
    Foo
  </li>
  <li class=foo>
    Foo
  </li>
  <li class=foo>
    Foo
  </li>
</ul>

Preparation code output

  • Foo
  • Foo
  • Foo
  • Foo
  • Foo
  • Foo
  • Foo

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery
$(".foo").addClass("bar");
pending…
qSA loop
var xs = document.querySelectorAll(".foo")
for (var i = 0; i < xs.length; i++) {
  xs[i].classList.add("bar");
}
pending…
qSA forEach
var xs = document.querySelectorAll(".foo")
var xsArr = [ ].slice.call(xs);
xsArr.forEach(function (el) {
  el.classList.add("bar");
});
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:

1 comment

tomByrer (revision owner) commented :

On my laptop (1st gen i7, Win7sp1), seems only IE10 is slightly faster with forEach than for loop.

Add a comment