Simple jquery element vs id (v2)

Revision 2 of this benchmark created on

Description

A very simple test to see which method of selection is faster for the same element:

  • ID alone
  • element alone
  • element with ID

It is expected that the third will not be the fastest, but it is included for thoroughness. The unknown is between the first two options

(Added jQuery/native test cases to demonstrate that if you're using jQuery, using a native call inside jQuery is quicker than using the rest (besides all native)

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="grandparent">
  <strong>
    Grandparent
  </strong>
  textnode
  <div id="parent">
    <strong>
      Parent
    </strong>
    textnode
    <section id="child">
      <strong>
        Child
      </strong>
      textnode
    </section>
  </div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
Find by ID
$('#child');
ready
Find by element
$('section')
ready
Find by ID and element
$('section#child')
ready
Native get by ID
document.getElementById('child');
ready
jQuery native ID selector
$(document.getElementById("child"));
ready
jQuery native element selector
$(document.getElementsByTagName("section"));
ready

Revisions

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