Id vs Class Selectors

JavaScript performance comparison

Test case created by olegbl

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="id" class="class">
<div id="subid" class="subclass"></div>
</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
ID (Native)
document.getElementById("id");
pending…
Class (Native)
document.getElementsByClassName("class")[0];
pending…
ID (jQuery)
$("#id")[0];
pending…
Class (jQuery)
$(".class")[0];
pending…
ID+Class (jQuery)
$("#id.class")[0];
pending…
ID ID (jQuery)
$("#id #subid")[0];
pending…
ID > ID (jQuery)
$("#id > #subid")[0];
pending…
ID Class (jQuery)
$("#id .subclass")[0];
pending…
ID > Class (jQuery)
$("#id > .subclass")[0];
pending…
Class Class (jQuery)
$(".class .subclass")[0];
pending…
Class > Class (jQuery)
$(".class > .subclass")[0];
pending…
Class ID (jQuery)
$(".class #subid")[0];
pending…
Class > ID (jQuery)
$(".class > #subid")[0];
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