querySelectorAll vs getElementsByTagName
JavaScript performance comparison
Preparation code
<div>
<ul id="list" class="foo">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
</div>
Preparation code output
Test runner
Warning! For accurate results, please disable Firebug before running the tests. (Why?)
Java applet disabled.
| Test | Ops/sec | |
|---|---|---|
querySelectorAll |
|
pending… |
getElementsByTagName |
|
pending… |
getElementsByClassName |
|
pending… |
getElementById |
|
pending… |
querySelectorAll class name |
|
pending… |
querySelectorAll ID |
|
pending… |
querySelectorAll - real usage |
|
pending… |
getElementsByTagName - real usage |
|
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:
- Revision 1: published by Andrew Hedges
- Revision 17: published
- Revision 20: published by Jeff Larson
- Revision 21: published by Sebastian Poreba
- Revision 22: published by MONTILLET
- Revision 25: published
- Revision 26: published
- Revision 27: published by Philip Tellis
- Revision 28: published by Carl Letourneau
- Revision 29: published
- Revision 30: published by Philip Tellis
- Revision 32: published
- Revision 33: published
- Revision 34: published
- Revision 35: published
- Revision 36: published
- Revision 37: published by Derp
- Revision 38: published
- Revision 39: published
- Revision 40: published by Zebulon84
- Revision 41: published by Jim Montgomery
- Revision 42: published by Jim Montgomery
- Revision 43: published
- Revision 44: published by Jim Montgomery
- Revision 45: published
- Revision 46: published
- Revision 47: published
- Revision 48: published by Adam
1 comment
getElementsByTagName does nothing if result is not used later. It creates live collection with elements gathered on demand, while querySelectorAll actually does crawling on call. It's not suprising it's slower.