Simple jquery element vs id

Benchmark created by Greg 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

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

Revisions

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