Benchmark: map vs queryselectorall on static nodelist

HTML Preparation code:

<div class="name"></div> <div class="name"></div> <div class="name"></div>

Tests:

map
[...document.querySelectorAll('.name')].map(element => { console.log(element); });
queryselectorall
document.querySelectorAll('.name').forEach(element => { console.log(element); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
queryselectorall

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 102 on Windows

View result in a separate tab

Test name	Executions per second
map	16603.1 Ops/sec
queryselectorall	19704.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, the options compared, pros and cons of those approaches, and other considerations.

**Benchmark Purpose**

The purpose of this benchmark is to compare the performance of two different ways to iterate over a static NodeList in JavaScript: `map()` and `forEach()` (aliased as `querySelectorAll()`). The test case creates three identical HTML elements with class "name" and measures the time it takes for each approach to log the elements to the console.

**Options Compared**

There are two options being compared:

1. **`map()`**: This method returns a new Array containing the results of applying the provided function on every element in the original array (NodeList). In this case, the function simply logs the element to the console.
2. **`forEach()` (aliased as `querySelectorAll()`)**: This method executes a provided callback function once for each element in the NodeList, without returning any value.

**Pros and Cons**

* **`map()`**:
	+ Pros:
		- Can be used when you need to transform data or perform some operation on each element.
		- Returns a new array with the results, which can be useful for further processing.
	+ Cons:
		- Creates a new array, which can lead to increased memory usage and slower performance if dealing with large datasets.
		- The callback function is called multiple times (once for each iteration), which may incur additional overhead.
* **`forEach()` (aliased as `querySelectorAll()`)**:
	+ Pros:
		- Does not create a new array, making it more memory-efficient and potentially faster than `map()`.
		- Only executes the callback function once per element, reducing overhead compared to `map()`.
	+ Cons:
		- Cannot be used when you need to transform data or perform some operation on each element.
		- Does not return any value from the callback function.

**Library and Special JS Features**

The benchmark uses a library: `document.querySelectorAll()` (aliased as `querySelectorAll()`). This method is part of the DOM API and returns a NodeList containing all elements that match the specified CSS selector. The `forEach()` method is also a built-in JavaScript method for iterating over arrays.

**Other Considerations**

* **Context**: The benchmark assumes a modern web browser with a relatively recent version of JavaScript ( likely ECMAScript 2015 or later).
* **Hardware**: The test uses a desktop device, which may affect the performance results compared to mobile devices.
* **JavaScript Engine**: The benchmark is executed in Chrome, which uses its own Just-In-Time (JIT) compiler and JavaScript engine.

**Alternatives**

If you're looking for alternative approaches to iterate over NodeLists or arrays, consider:

1. **`reduce()`**: A method that applies a function to each element of an array, accumulating a result.
2. **`for...of` loop**: An older way to iterate over arrays using a `for` loop with the `of` keyword.
3. **Other libraries**: Depending on your specific use case, you might need or prefer other libraries like Lodash or Ramda.

Keep in mind that these alternatives may have different performance characteristics and use cases compared to `map()` and `forEach()`.

Related benchmarks:

map vs queryselectorall on static nodelist (version: 0)

Comparing performance of: map vs queryselectorall

Created: 3 years ago by: Guest

Jump to the latest result

map

queryselectorall

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