querySelector vs querySelectorAll vs getElementsByClassName vs getElementsByTagName vs getElementsByName

JavaScript performance comparison

Revision 50 of this test case created

Info

Edited v49 put getElementById back to see how it fairs. Added more HTML to make the test slightly more realistic. Shortened test names. Changed position of id tag.

Preparation code

<section>
  <p class="foo" name="fooname" id="foo"><span class="bar" name="barname">Thanks <a href='http://mathiasbynens.be/'>Mathias</a> for jsperf!</span></p>
  <p class="baz" name="bazname" id="baz"><span class="bazbar" name="barname">:)</span></p>
  <p class="foo" name="fooname" id="foo"><span class="bar" name="barname">,,,</span></p>
</section>
<span class"clearfix"></span>
<section>
  <p class="foo" name="fooname" id="foo"><span class="bar" name="barname"><a href='https://www.youtube.com/watch?v=65-RbBwZQdU'>micro-benchmark talk by Vyacheslav Egorov</a> at LXJS 2013</span></p>
  <p class="baz" name="bazname" id="baz"><span class="bazbar" name="barname">;)</span></p>
  <p class="foo" name="fooname" id="foo"><span class="bar" name="barname">,,,</span></p>
</section>
<span class"clearfix"></span>
<section>
  <p class="foo" name="fooname" id="foo"><span class="bar" name="barname">Test edits by <a href='http://jsperf.com/browse/tombyrer'>tomByrer</a></span></p>
  <p class="baz" name="bazname" id="baz"><span class="bazbar" name="barname">X^)</span></p>
  <p class="foo" name="fooname" id="foo"><span class="bar" name="barname">,,,</span></p>
</section>

Preparation code output

Thanks Mathias for jsperf!

:)

,,,

micro-benchmark talk by Vyacheslav Egorov at LXJS 2013

;)

,,,

Test edits by tomByrer

X^)

,,,

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
qS by ID
document.querySelector("#foo");
pending…
qSAll by ID
document.querySelectorAll("#foo")[0];
pending…
gEByClassName
document.getElementsByClassName("foo")[0];
pending…
gEByTagName
document.getElementsByTagName("p")[0];
pending…
gEByName
document.getElementsByName("fooname")[0];
pending…
qS by ClassName
document.querySelector(".foo");
pending…
qSAll by ClassName
document.querySelectorAll(".foo")[0];
pending…
qS by TagName
document.querySelector("p");
pending…
qSAll by TagName
document.querySelectorAll("p")[0];
pending…
qS by Name
document.querySelector("[name=fooname]");
pending…
qSAll by Name
document.querySelectorAll("[name=fooname]")[0];
pending…
gEById
document.getElementById("foo");
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