getElementById vs. getElementsByClassName vs. querySelector vs. jQuery (v31)

Revision 31 of this benchmark created on

Description

Compare the speed of getElementById to getElementsByClassName to querySelector to jQuery returns of each of those selectors.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<p id="foo" class="my-foo">Foo</p>
<div><div><div>
<p id="bar" class="my-bar">Bar</p>
</div></div></div>
<p id="baz" class="my-baz">Baz</p>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
var foo = document.querySelector("body > #foo");
ready
querySelector
var bar = document.querySelector("#bar");
ready
getElementsByClassName
var foo = $('body > #foo');
ready
jQuery ID Selector
var bar = $("#bar");
ready
jQuery Class Selector
 
ready

Revisions

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