jQuery #name vs div[id='name']

JavaScript performance comparison

Revision 2 of this test case created by tomByrer

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <div id="Header">
        This is my header
    </div>
    <div id="FormSection">
        <input id="Text1" type="text" />
        <input id="Text2" type="text" />
        <input id="Text3" type="text" />
        <input id="Text4" type="text" />
        <input id="Text5" type="text" />
        <input id="Text6" type="text" />
        <input id="Text7" type="text" />
        <input id="Text8" type="text" />
        <input id="Text9" type="text" />
        <input id="Text10" type="text" />
        <input id="Text11" type="text" />
        <input id="Text12" type="text" />
        <input id="Text13" type="text" />
        <input id="Text14" type="text" />
        <input id="Text15" type="text" />
        <input id="Text16" type="text" />
        <input id="Text17" type="text" />
        <input id="Text18" type="text" />
        <input id="Text19" type="text" />
        <input id="Text20" type="text" />
        <textarea id="TextArea1" cols="20" rows="2"></textarea>
        <input id="Submit1" type="submit" value="submit" />
    </div>
    <div id="FooterSection">
        This is my footer
    </div>

Preparation code output

This is my footer

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
var s = $('#TextArea1');
pending…
div[id=name]
var t = $('div[id="TextArea1"]');
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:

1 comment

tomByrer (revision owner) commented :

No changes made from v1; checking jsPerf's API of /edit

Add a comment