querySelector vs getElementById (v5)

Revision 5 of this benchmark created on

Description

Checking how much faster is document.getElementById vs document.querySelector

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="foo" class="bar">
  <div class="baz"></div>
</div>

Setup

var $foo = $("#foo");

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
document.getElementById('foo')
ready
querySelector - by id
document.querySelector('#foo')
ready
querySelector - by class
document.querySelector('.bar')
ready
getElementsByTagName
document.getElementsByTagName('div')[0];
ready
$foo.find(".baz")
$foo.find(".baz")[0];
ready

Revisions

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