Benchmark: 3 Ways to Iterate a JavaScript Collection v.1.0.1

HTML Preparation code:

<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:

querySelectorAll
document .querySelectorAll('.nolink a') .forEach(noLink => { noLink.setAttribute('role', 'link'); noLink.setAttribute('aria-disabled', 'true'); noLink.removeAttribute('href'); noLink.removeAttribute('rel'); });
Array.prototype
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'); });
getElementsByClassName + getElementsByTagName
const noLinks = document.getElementsByClassName('nolink'); for (let noLink of noLinks) { const matches = noLink.getElementsByTagName('a')[0]; matches.setAttribute('role', 'link'); matches.setAttribute('aria-disabled', 'true'); matches.removeAttribute('href'); matches.removeAttribute('rel'); };
getElementsByClassName + querySelector
const noLinks = document.getElementsByClassName('nolink'); for (let noLink of noLinks) { const matches = noLink.querySelector('a') matches.setAttribute('role', 'link'); matches.setAttribute('aria-disabled', 'true'); matches.removeAttribute('href'); matches.removeAttribute('rel'); };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
Array.prototype
getElementsByClassName + getElementsByTagName
getElementsByClassName + querySelector

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36

Browser/OS: Chrome 96 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
querySelectorAll	258588.2 Ops/sec
Array.prototype	277511.2 Ops/sec
getElementsByClassName + getElementsByTagName	277962.0 Ops/sec
getElementsByClassName + querySelector	277988.4 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explore what's being tested, the different approaches compared, their pros and cons, and other considerations.

**What is being tested?**

MeasureThat.net provides a microbenchmarking platform for JavaScript performance testing. In this specific benchmark, three ways to iterate over a collection of elements are being compared:

1. `querySelectorAll`
2. `Array.prototype.forEach.call` (using `getElementsByClassName`)
3. `for...of` loop (using `getElementsByClassName` and then `querySelector`)

**Approaches compared**

Here's a brief overview of each approach:

### 1. `querySelectorAll`

This method uses the `querySelectorAll` API to select all elements with the specified class (`nolink`) and then iterates over them using a `forEach` loop.

Pros:

* Easy to implement and understand
* Works well for small collections

Cons:

* Can be slower than other methods for larger collections due to the DOM traversal cost

### 2. `Array.prototype.forEach.call`

This method uses the `getElementsByClassName` API to select all elements with the specified class (`nolink`) and then iterates over them using a `forEach` loop provided by the `Array.prototype`.

Pros:

* Faster than `querySelectorAll` for larger collections
* Still easy to implement and understand

Cons:

* Requires two separate calls ( `getElementsByClassName` followed by `forEach.call` )
* Can be slower if the array is not properly cached or if the browser has issues with caching

### 3. `for...of` loop**

This method uses the `getElementsByClassName` API to select all elements with the specified class (`nolink`) and then iterates over them using a `for...of` loop.

Pros:

* Fast and efficient
* Modern syntax is easier to read and understand

Cons:

* Only supported in modern browsers (Chrome 96 and above)
* May not work as expected in older browsers or with certain CSS rules

**Other considerations**

* The benchmark measures the number of executions per second, which indicates how fast each approach can iterate over the collection.
* The raw UA string at the end of each test case provides information about the browser being tested (in this case, Chrome 96 on a Mac OS X 10.15.7 machine).
* The `getElementsByClassName` API is used consistently across all three approaches.

**Alternatives**

If you're looking for alternative ways to iterate over collections in JavaScript, here are some options:

* Using `document.querySelectorAll` with a more specific selector (e.g., `.nolink a`)
* Using `Array.from()` or `Array.prototype.map()` to create a new array from the DOM elements
* Using `requestAnimationFrame()` or `setInterval()` for timing-sensitive iterations

Keep in mind that each approach has its trade-offs, and the best choice depends on your specific use case and performance requirements.

Related benchmarks:

3 Ways to Iterate a JavaScript Collection v.1.0.1 (version: 1)

Comparing performance of: querySelectorAll vs Array.prototype vs getElementsByClassName + getElementsByTagName vs getElementsByClassName + querySelector

Created: 3 years ago by: Registered User

Jump to the latest result

querySelectorAll

Array.prototype

getElementsByClassName + getElementsByTagName

getElementsByClassName + querySelector

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):