jQuery $( '.class' ) vs getElementsByClassName( 'class' )

JavaScript performance comparison

Revision 4 of this test case created by Liam

Preparation code

<div class="class1" id="id1"></div>
<div class="class2" id="id2"></div>
<div class="class3" id="id3"></div>
<div class="class4" id="id4"></div>
<div class="class5" id="id5"></div>
<div class="class6" id="id6"></div>
<div class="class7" id="id7"></div>
<div class="class8" id="id8"></div>
<div class="class9" id="id9"></div>
<div class="class10" id="id10"></div>
<div class="class11" id="id11"></div>
<div class="class12" id="id12"></div>
<div class="class13" id="id13"></div>
<div class="class14" id="id14"></div>
<div class="class15" id="id15"></div>
<div class="class16" id="id16"></div>
<div class="class17" id="id17"></div>
<div class="class18" id="id18"></div>
<div class="class19" id="id19"></div>
<div class="class20" id="id20"></div>
<div class="class21" id="id21"></div>
<div class="class22" id="id22"></div>
<div class="class23" id="id23"></div>
<div class="class24" id="id24"></div>
<div class="class25" id="id25"></div>
<div class="class26" id="id26"></div>
<div class="class27" id="id27"></div>
<div class="class28" id="id28"></div>
<div class="class29" id="id29"></div>
<div class="class30" id="id30"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    

Preparation code output

<div class="class1" id="id1"></div> <div class="class2" id="id2"></div> <div class="class3" id="id3"></div> <div class="class4" id="id4"></div> <div class="class5" id="id5"></div> <div class="class6" id="id6"></div> <div class="class7" id="id7"></div> <div class="class8" id="id8"></div> <div class="class9" id="id9"></div> <div class="class10" id="id10"></div> <div class="class11" id="id11"></div> <div class="class12" id="id12"></div> <div class="class13" id="id13"></div> <div class="class14" id="id14"></div> <div class="class15" id="id15"></div> <div class="class16" id="id16"></div> <div class="class17" id="id17"></div> <div class="class18" id="id18"></div> <div class="class19" id="id19"></div> <div class="class20" id="id20"></div> <div class="class21" id="id21"></div> <div class="class22" id="id22"></div> <div class="class23" id="id23"></div> <div class="class24" id="id24"></div> <div class="class25" id="id25"></div> <div class="class26" id="id26"></div> <div class="class27" id="id27"></div> <div class="class28" id="id28"></div> <div class="class29" id="id29"></div> <div class="class30" id="id30"></div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
$('.class')
for ( var i = 1; i <= 30; i++ ) 
{

  var x = $( '.class' + i );

};
pending…
getElementsByClassName('class')
for ( var i = 1; i <= 30; i++ ) 
{

  var x = document.getElementsByClassName( 'class' + i );

};
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.

1 Comment

Liam (revision owner) commented :

This is very slow for JQ considering that it's supposed to be using getElementsByClassName if supported. Is the extra loss accounted for the additional handling required by the JQ class selector or is something else going on here?