getElementById vs. querySelector (v90)

Revision 90 of this benchmark created on

Description

Compare the speed of getElementById to querySelector

Preparation HTML

<p id="foo">Foo</p>
<p id="bar">Bar</p>
<p id="baz">Baz</p>
<p id1="foo">Foo</p>
<p id1="bar">Bar</p>
<p id1="baz">Baz</p>
<p id="foo">Foo</p>
<p id="bar">Bar</p>
<p id="baz">Baz</p>
<p id1="foo">Foo</p>
<p id1="bar">Bar</p>
<p id1="baz">Baz</p>
<p id="foo">Foo</p>
<p id="bar">Bar</p>
<p id="baz">Baz</p>
<p id1="foo">Foo</p>
<p id1="bar">Bar</p>
<p id1="baz">Baz</p>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
var bar = document.getElementsByTagName("p");
if (!bar) {
  return;
}
var list = [];
for (var i = 0; i < bar.length; i++) {
  if (bar[i].getAttribute('id1')) {
    list.push(bar[i]);
  }
}
ready
querySelector
var bar = document.querySelector("p[id1]");
ready

Revisions

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