Run results for: querySelectorAll loop test

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser: Chrome 120

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

for loop 3

1.4M/s

for loop 1

1.1M/s

for loop 2

977K/s

View exact numbers

HTML Preparation code:

<html>
  <head></head>
  <body>
  </body>
</html>

Script Preparation code:

for (let i = 0; i < 1000; i++) {
    document.body.insertAdjacentHTML('afterend', '<div class="serp">Hello World</div>')
}

Tests:

for loop 1
const serps = document.body.querySelectorAll('serp'); for (const serp of serps) { serp.classList.add('terp') }
for loop 2
const serps = document.body.querySelectorAll('serp'); [...serps].forEach(serp => { serp.classList.add('terp') })
for loop 3
const serps = document.body.querySelectorAll('serp'); for (let i = 0; i < serps.length; i++) { serps[i].classList.add('terp') }