The benefit of using the Selectors API

Benchmark created by t32k on

Description

From High Performance JavaScript Build Faster Web Application Interfaces By Nicholas C. Zakas

Preparation HTML

<div>
  <ul>
    <li><a href="#" class="warning">item 1</a></li>
    <li><a href="#" class="notice">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#" class="notice">item 4</a></li>
    <li><a href="#" class="warning">item 5</a></li>
    <li><a href="#">item 6</a></li>
    <li><a href="#" class="warning">item 7</a></li>
    <li><a href="#" class="notice">item 8</a></li>
    <li><a href="#">item 9</a></li>
    <li><a href="#" class="notice">item 10</a></li>
  </ul>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementsByTagName
var errs = [],
    anchors = document.getElementsByTagName('a'),
    classname = '';
for (var i = 0, len = anchors.length; i < len; i++) {
 classname = anchors[i].className;
 if (classname === 'notice' || classname === 'warning') {
  errs.push(anchors[i]);
 }
}
ready
querySelectorAll
var errs = document.querySelectorAll('a.warning', 'a.notice');
ready

Revisions

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