$("#id") vs $(document.getElementById) (v20)

Revision 20 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="LOL" class="FOO">
</div>
<script>
  var $el, $ref = document.getElementById('LOL');
</script>

Setup

$el = null;

Teardown


    if ($el !== $ref) {
      throw Error('cannot test');
    }

Test runner

Ready to run.

Testing in
TestOps/sec
#id
$el = $("#LOL")[0];
ready
tag + attrib
$el = $("div[id=LOL]")[0];
ready
attrib
$el = $("[id=LOL]")[0];
ready
tag + id
$el = $('div#LOL')[0];
ready
queryselectorall
$el = document.querySelectorAll('#LOL')[0];
ready
queryselector
$el = document.querySelector('#LOL')[0];
ready
getElementById
$el == document.getElementById("LOL");
ready
native chrome global var from ID
$el = LOL;
ready
derp
$el = window.LOL;
ready
class
$el = $('.FOO')[0];
ready
class + tag
$el = $('div.FOO')[0];
ready
overkill
$el = $('div#LOL.FOO')[0];
ready
best of both?
$el = $(document.getElementById("LOL"))[0];
ready
IE7 Hack
$el = $(LOL);
ready

Revisions

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