id/class and tag

JavaScript performance comparison

Test case created by Julien

Preparation code

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

<div id="a" class="a1"></div>
<div id="b" class="a1"></div>
<div id="c" class="a1"></div>
<div id="d" class="a1"></div>
<div id="e" class="a1"></div>
<div id="test" class="test"></div>
<div id="f" class="test"></div>
<div id="g" class="a3"></div>
<div id="h" class="a3"></div>
<div id="i" class="a3 a4"></div>
<div id="j" class="a3 a4"></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
#test
$("#test").val();
pending…
div#test
$("div#test").val();
pending…
.test
$(".test").val();
pending…
div.test
$("div.test").val();
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:

2 comments

Daniel Hanly commented :

This goes against what I would logically assume.

div#tag = you are telling the browser to only search the divs for the #tag

tag = you are telling the browser to scan the entire page to search for the divs.

Why would it work like this?

Erius commented :

AFAIK since id is supposed to be unique you would only need $("#tag") and it will work.

I assume with $("div#tag") you search for all div first and then search one that has id tag within them, of course it is slower

Add a comment