jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

getElementById vs getElementsByClassName (v24)

Revision 24 of this benchmark created by D4Tocchini on April 17, 2014

Preparation HTML

<div class="class1" id="id1"></div>
<div class="class1" id="id2"></div>
<div class="class1" id="id3"></div>
<div class="class1" id="id4"></div>
<div class="class1" id="id5"></div>
<div class="class1" id="id6"></div>
<div class="class1" id="id7"></div>
<div class="class1" id="id8"></div>
<div class="class1" id="id9"></div>
<div class="class1" id="id10"></div>
<div class="class1" id="id11"></div>
<div class="class1" id="id12"></div>
<div class="class1" id="id13"></div>
<div class="class1" id="id14"></div>
<div class="class1" id="id15"></div>
<div class="class1" id="id16"></div>
<div class="class1" id="id17"></div>
<div class="class1" id="id18"></div>
<div class="class1" id="id19"></div>
<div class="class1" id="id20"></div>
<div class="class1" id="id21"></div>
<div class="class1" id="id22"></div>
<div class="class1" id="id23"></div>
<div class="class1" id="id24"></div>
<div class="class1" id="id25"></div>
<div class="class1" id="id26"></div>
<div class="class1" id="id27"></div>
<div class="class1" id="id28"></div>
<div class="class1" id="id29"></div>
<div class="class1" id="id30"></div>
<div class="class1" id="id31"></div>
<div class="class1" id="id32"></div>
<div class="class1" id="id33"></div>
<div class="class1" id="id34"></div>
<div class="class1" id="id35"></div>
<div class="class1" id="id36"></div>
<div class="class1" id="id37"></div>
<div class="class1" id="id38"></div>
<div class="class1" id="id39"></div>
<div class="class1" id="id40"></div>
<div class="class2" id="id41"></div>
<div class="class2" id="id42"></div>
<div class="class2" id="id43"></div>
<div class="class2" id="id44"></div>
<div class="class2" id="id45"></div>
<div class="class2" id="id46"></div>
<div class="class2" id="id47"></div>
<div class="class2" id="id48"></div>
<div class="class2" id="id49"></div>
<div class="class2" id="id50"></div>
<div class="class2" id="id51"></div>
<div class="class2" id="id52"></div>
<div class="class2" id="id53"></div>
<div class="class2" id="id54"></div>
<div class="class2" id="id55"></div>
<div class="class2" id="id56"></div>
<div class="class2" id="id57"></div>
<div class="class2" id="id58"></div>
<div class="class2" id="id59"></div>
<div class="class2" id="id60"></div>
<div class="class2" id="id61"></div>
<div class="class2" id="id62"></div>
<div class="class2" id="id63"></div>
<div class="class2" id="id64"></div>
<div class="class2" id="id65"></div>
<div class="class2" id="id66"></div>
<div class="class2" id="id67"></div>
<div class="class2" id="id68"></div>
<div class="class2" id="id69"></div>
<div class="class2" id="id70"></div>
<div class="class2" id="id71"></div>
<div class="class2" id="id72"></div>
<div class="class2" id="id73"></div>
<div class="class2" id="id74"></div>
<div class="class2" id="id75"></div>
<div class="class2" id="id76"></div>
<div class="class2" id="id77"></div>
<div class="class2" id="id78"></div>
<div class="class2" id="id79"></div>
<div class="class2" id="id80"></div>
<div class="class3" id="id81"></div>
<div class="class3" id="id82"></div>
<div class="class3" id="id83"></div>
<div class="class3" id="id84"></div>
<div class="class3" id="id85"></div>
<div class="class3" id="id86"></div>
<div class="class3" id="id87"></div>
<div class="class3" id="id88"></div>
<div class="class3" id="id89"></div>
<div class="class3" id="id90"></div>
<div class="class3" id="id91"></div>
<div class="class3" id="id92"></div>
<div class="class3" id="id93"></div>
<div class="class3" id="id94"></div>
<div class="class3" id="id95"></div>
<div class="class3" id="id96"></div>
<div class="class3" id="id97"></div>
<div class="class3" id="id98"></div>
<div class="class3" id="id99"></div>
<div class="class3" id="id100"></div>
<div class="class3" id="id101"></div>
<div class="class3" id="id102"></div>
<div class="class3" id="id103"></div>
<div class="class3" id="id104"></div>
<div class="class3" id="id105"></div>
<div class="class3" id="id106"></div>
<div class="class3" id="id107"></div>
<div class="class3" id="id108"></div>
<div class="class3" id="id109"></div>
<div class="class3" id="id110"></div>
<div class="class3" id="id111"></div>
<div class="class3" id="id112"></div>
<div class="class3" id="id113"></div>
<div class="class3" id="id114"></div>
<div class="class3" id="id115"></div>
<div class="class3" id="id116"></div>
<div class="class3" id="id117"></div>
<div class="class3" id="id118"></div>
<div class="class3" id="id119"></div>
<div class="class3" id="id120"></div>
<div class="class4" id="id121"></div>
<div class="class4" id="id122"></div>
<div class="class4" id="id123"></div>
<div class="class4" id="id124"></div>
<div class="class4" id="id125"></div>
<div class="class4" id="id126"></div>
<div class="class4" id="id127"></div>
<div class="class4" id="id128"></div>
<div class="class4" id="id129"></div>
<div class="class4" id="id130"></div>
<div class="class4" id="id131"></div>
<div class="class4" id="id132"></div>
<div class="class4" id="id133"></div>
<div class="class4" id="id134"></div>
<div class="class4" id="id135"></div>
<div class="class4" id="id136"></div>
<div class="class4" id="id137"></div>
<div class="class4" id="id138"></div>
<div class="class4" id="id139"></div>
<div class="class4" id="id140"></div>
<div class="class4" id="id141"></div>
<div class="class4" id="id142"></div>
<div class="class4" id="id143"></div>
<div class="class4" id="id144"></div>
<div class="class4" id="id145"></div>
<div class="class4" id="id146"></div>
<div class="class4" id="id147"></div>
<div class="class4" id="id148"></div>
<div class="class4" id="id149"></div>
<div class="class4" id="id150"></div>
<div class="class4" id="id151"></div>
<div class="class4" id="id152"></div>
<div class="class4" id="id153"></div>
<div class="class4" id="id154"></div>
<div class="class4" id="id155"></div>
<div class="class4" id="id156"></div>
<div class="class4" id="id157"></div>
<div class="class4" id="id158"></div>
<div class="class4" id="id159"></div>
<div class="class4" id="id160"></div>
<div id="hugeContainer"></div>

Test runner

Ready to run.

Test Ops/sec

getElementById

Testing in
Test	Ops/sec
getElementById	`for (var i = 1; i <= 160; i++) { var x = document.getElementById("id" + i); };`	ready
getElementsByClassName	`var x; x = document.getElementsByClassName("class1"); for (var i = 0; i < 40; i++) { var y = x[i]; }; x = document.getElementsByClassName("class2"); for (var i = 0; i < 40; i++) { var y = x[i]; }; x = document.getElementsByClassName("class3"); for (var i = 0; i < 40; i++) { var y = x[i]; }; x = document.getElementsByClassName("class4"); for (var i = 0; i < 40; i++) { var y = x[i]; };`	ready
querySelectorAll	`var x; x = document.querySelectorAll(".class1"); for (var i = 0; i < 40; i++) { var y = x[i]; }; x = document.querySelectorAll(".class2"); for (var i = 0; i < 40; i++) { var y = x[i]; }; x = document.querySelectorAll(".class3"); for (var i = 0; i < 40; i++) { var y = x[i]; }; x = document.querySelectorAll(".class4"); for (var i = 0; i < 40; i++) { var y = x[i]; };`	ready

for (var i = 1; i <= 160; i++) {
  var x = document.getElementById("id" + i);
};

ready

getElementsByClassName

var x;
x = document.getElementsByClassName("class1");
for (var i = 0; i < 40; i++) {
  var y = x[i];
};
x = document.getElementsByClassName("class2");
for (var i = 0; i < 40; i++) {
  var y = x[i];
};
x = document.getElementsByClassName("class3");
for (var i = 0; i < 40; i++) {
  var y = x[i];
};
x = document.getElementsByClassName("class4");
for (var i = 0; i < 40; i++) {
  var y = x[i];
};

ready

querySelectorAll

var x;
x = document.querySelectorAll(".class1");
for (var i = 0; i < 40; i++) {
  var y = x[i];
};
x = document.querySelectorAll(".class2");
for (var i = 0; i < 40; i++) {
  var y = x[i];
};
x = document.querySelectorAll(".class3");
for (var i = 0; i < 40; i++) {
  var y = x[i];
};
x = document.querySelectorAll(".class4");
for (var i = 0; i < 40; i++) {
  var y = x[i];
};

ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

Revision 1: published by ThinkingStiff on October 21, 2011
Revision 2: published on December 26, 2011
Revision 3: published on December 26, 2011
Revision 4: published on March 8, 2012
Revision 5: published on June 8, 2012
Revision 6: published by PAEz on June 9, 2012
Revision 8: published on July 27, 2012
Revision 14: published on March 5, 2013
Revision 15: published on March 5, 2013
Revision 16: published on March 5, 2013
Revision 17: published on March 5, 2013
Revision 18: published on August 2, 2013
Revision 19: published on August 15, 2013
Revision 21: published on September 28, 2013
Revision 22: published by Red Forks on October 14, 2013
Revision 24: published by D4Tocchini on April 17, 2014
Revision 25: published by Brenton Simpson on April 17, 2014
Revision 26: published by Brenton Simpson on April 17, 2014
Revision 27: published by mingodad on May 28, 2014