QSA selector vs. regular JS selection

Benchmark created on

Preparation HTML

<div id="div">
  <a href="#" class="link">Link</a>
</div>
<div>
  <a href="#" class="link">Link</a>
</div>
<br />
<br />
<div id="TestResults">
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
document.getElementById("div");
ready
qsa("#id")
document.querySelectorAll("#div")
ready
getElementsByClassName
document.getElementsByClassName("link");
ready
qsa(".className")
document.querySelectorAll(".link");
ready
getElementsByTagName
document.getElementsByTagName("div");
ready
qsa("tagName")
document.querySelectorAll("div");
ready
"tag.class" without QSA
var tags = document.getElementsByTagName("a");
var res = [];
for (var j = 0; j < tags.length; j++) {
  if (tags[j].className.indexOf("link") > -1) {
    res.push(tags[j]);
  }
}
ready
"tag.class" with QSA
document.querySelectorAll("a.link");
ready
"tag > tag.class" without QSA
var tags = document.getElementsByTagName("div");
var res = [];
for (var j = 0; j < tags.length; j++) {
  var tags2 = tags[j].getElementsByTagName("a");
  for (var k = 0; k < tags2.length; k++) {
    if (tags2[k].className.indexOf("link") > -1) {
      res.push(tags2[j]);
    }
  }
}
ready
"tag > tag.class" with QSA
document.querySelectorAll("div > a.link");
ready

Revisions

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

  • Revision 1: published on
  • Revision 3: published by Jon-Carlos Rivera on