getElementsByClassName vs jQuery('className')

JavaScript performance comparison

Revision 5 of this test case created by Sean

Info

Fix the test to return a jQuery object. Add IE8 compatibility test

Preparation code

<script src="//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

Test runner

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

Java applet disabled.

Testing in unknown unknown
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. Here’s a list of current revisions for this page:

0 comments

Add a comment