MeasureThat.net

Run results for: Array.prototype.forEach vs. querySelectorAll

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36
Chrome 95
Mac OS X 10.15.7
Desktop
3 years ago
Test name Executions per second
Array.prototype.forEach 269440.0 Ops/sec
querySelectorAll 214985.6 Ops/sec
HTML Preparation code:
AخA
 
1
<ul><li class="nolink"><a href="#" rel="next">A link with class .nolink</a></li><li class="nolink"><a href="#" rel="next">Another link with class .nolink</a></li><li><a href="#" rel="next">A link with no classes</a></li></ul>
Tests:

  • Array.prototype.forEach

     
    const noLinks  = document.getElementsByClassName('nolink');
    Array.prototype.forEach.call(noLinks, function(noLink) {
      const matches = noLink.getElementsByTagName('a')[0];
      matches.setAttribute('role', 'link');
      matches.setAttribute('aria-disabled', 'true');
      matches.removeAttribute('href');
      matches.removeAttribute('rel');
    });

  • querySelectorAll

     
    document
      .querySelectorAll('.nolink a')
      .forEach(noLink => {
        noLink.setAttribute('role', 'link');
        noLink.setAttribute('aria-disabled', 'true');
        noLink.removeAttribute('href');
        noLink.removeAttribute('rel');
      });