getElementsByClassName vs jQuery('className')

JavaScript performance comparison

Revision 5 of this test case created by Sean

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
if (!document.getElementsByClassName) 
{
                document.getElementsByClassName = function(className) 
                {
                                return this.querySelectorAll("." + className);
                };
    
                Element.prototype.getElementsByClassName = document.getElementsByClassName;
}

</script>
<div class="test"></div>
    

Preparation code output

<div class="test"></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
Use getElementsByClassName return jQuery collection
jQuery(document.getElementsByClassName('test'))
pending…
use sizzler return jQuery collection
jQuery('.test')
pending…
getElementsByClassName only
document.getElementsByClassName('test')
pending…
querySelectorAll
document.querySelectorAll('.test')
pending…
use querySelectorAll to return a jquery collection
jQuery(document.querySelectorAll('.test'))
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.

0 Comments