All JS Selectors

Benchmark created by Patrick on

Description

Test to determine the most efficient Javascript or jQuery selector. This test assumes you can manipulate the HTML to provide the id or class that is necessary hook for the most efficient selector.

Preparation HTML

<div id="alpha" class="alpha">Alpha</div>
<span id="bravo" class="bravo">Beta</span>
<div id="charlie" class="charlie">Charlie</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById | Vanilla JS
document.getElementById('bravo');
ready
getElementsByTagName | Vanilla JS
document.getElementsByTagName("span");
ready
getElementsByClassName from multiple | Vanilla JS
document.getElementsByTagName("div")[1];
ready
getElementsByClassName | Vanilla JS
document.getElementsByClassName("bravo");
ready
querySelector | Vanilla JS
document.querySelector("#bravo");
ready
by id | jQuery
$("#bravo");
ready
by tag name | jQuery
$("span");
ready
by tag name from multiple | jQuery
$("div").eq(1);
ready
by class name | jQuery
$(".bravo");
ready

Revisions

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

  • Revision 1: published by Patrick on