Benchmark: Array.prototype.forEach vs. querySelectorAll

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:

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'); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.forEach
querySelectorAll

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing two approaches for iterating over HTML elements: `Array.prototype.forEach` and `querySelectorAll`. Both methods are used to iterate over the `<ul>` element with class `nolink`, which contains three links.

**Options compared:**

The benchmark compares the performance of:

1. **`Array.prototype.forEach`**: This method takes an array-like object (in this case, a NodeList) and calls a callback function on each element in the collection.
2. **`querySelectorAll`**: This method returns a NodeList that contains all elements that match the specified CSS selector (`'.nolink a'`) in the given HTML document.

**Pros and Cons of each approach:**

1. **`Array.prototype.forEach`**:
	* Pros:
		+ Can be used with any array-like object, not just DOM nodes.
		+ Can have side effects (e.g., modifying the elements) as part of the callback function.
	* Cons:
		+ Requires an explicit conversion from a NodeList to an array (using `Array.prototype.slice()` or `Array.from()`) if you need to use array methods.
2. **`querySelectorAll`**:
	* Pros:
		+ Returns a NodeList that is already in the correct format for iteration.
		+ Can be used without explicit conversion.
	* Cons:
		+ Only works on elements that match the specified CSS selector.

**Libraries and features:**

Neither `Array.prototype.forEach` nor `querySelectorAll` rely on specific libraries. However, they do use:

1. **DOM (Document Object Model)**: The HTML document is used as the data source for both methods.
2. **CSS selectors**: The `querySelectorAll` method uses a CSS selector (`'.nolink a'`) to find the relevant elements.

**Special JS features or syntax:**

There are no specific JavaScript features or syntax that require special handling in this benchmark. Both methods use standard JavaScript concepts and libraries (DOM).

**Other alternatives:**

If you need to iterate over HTML elements, other alternatives might include:

1. **`document.addEventListener('DOMContentLoaded', () => { ... });`**: This method can be used to wait for the DOM to be fully loaded before executing code.
2. **`const elements = document.querySelectorAll('.nolink a');`**: While `querySelectorAll` is already tested, using `document.querySelectorAll` with a CSS selector might provide different results due to caching and performance optimization.

Keep in mind that these alternatives may not be directly comparable to the original benchmark, as they may have different performance characteristics or use cases.

Related benchmarks:

Array.prototype.forEach vs. querySelectorAll (version: 0)

Comparing performance of: Array.prototype.forEach vs querySelectorAll

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.forEach

querySelectorAll

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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