Benchmark: querySelectorAll, iterated map or array map

HTML Preparation code:

<!--your preparation HTML code goes here-->
<div id=''></div>
<div id=''></div>
<div id=''></div>
<div id=''></div>
<div id=''></div>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script><canvas id='' width='' height=''></canvas>
<a id='' href='#' />
<script src=''></script>
<a id='' href='#' />
<canvas id='' width='' height=''></canvas>
<div id=''></div>
<canvas id='' width='' height=''></canvas>
<script src=''></script>

Tests:

Iterator
[...document.querySelectorAll("*").values().map(e => e.attributes)];
Non-Iterator
[...document.querySelectorAll("*")].map(e => e.attributes);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Iterator
Non-Iterator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Linux

View result in a separate tab

Test name	Executions per second
Iterator	19931.8 Ops/sec
Non-Iterator	32097.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The provided benchmark tests the performance of two different approaches to accessing the attributes of elements in the DOM using the `querySelectorAll` method in JavaScript:

1. **Benchmark Definition & Approaches**:
   - **Iterator Approach**: 
     ```javascript
     [...document.querySelectorAll("*").values().map(e => e.attributes)];
     ```
     This approach uses the `values()` method from the `NodeList.prototype`, which returns an iterator of the elements found by `querySelectorAll`. The spread operator `[...]` converts the iterator into an array, and `map()` is used to create a new array of attributes for each of the selected elements.

- **Non-Iterator Approach**:
     ```javascript
     [...document.querySelectorAll("*")].map(e => e.attributes);
     ```
     Here, `querySelectorAll("*")` directly returns a NodeList. The spread operator is applied directly to this NodeList, converting it into an array, and `map()` is then used to retrieve the attributes for each element.

2. **Performance Comparison**:
   - The benchmark results show that the Non-Iterator approach executed approximately **32,097** operations per second, while the Iterator approach was significantly slower at about **19,932** operations per second.

3. **Pros and Cons**:
   - **Iterator Approach**:
     - **Pros**: 
       - Can be seen as a more recent and potentially more modern way of handling collections as it utilizes iterators, which may be easier for some developers to work with in certain contexts.
     - **Cons**:
       - Performance is significantly lower in this case, which can be a critical factor in applications requiring high performance, especially with large DOM trees.
       - The need to call `values()` adds extra step and complexity.
     
   - **Non-Iterator Approach**:
     - **Pros**:
       - Demonstrates better performance, which suggests it's a more efficient method for this specific case.
       - Simpler, as it does not require the additional `values()` call.
     - **Cons**:
       - Might be considered "less modern" by some developers who prefer using iterators for more abstracted and generalized access patterns.

4. **Considerations**:
   - The performance differences could vary with different browsers, as optimizations and implementations can significantly influence execution speed.
   - The size of the DOM or the number of elements being processed could affect the overall performance, making the choice of method important based on expected use cases.

5. **Alternatives**:
   - Other methods for accessing attributes can include using `forEach()` on the NodeList returned by `querySelectorAll`, which can offer readability benefits but may also incur a performance cost like the iterator method.
   - Utilizing libraries like jQuery could also abstract this process, and while they provide convenience, they often come with additional overhead that might be less efficient than native JavaScript methods.

In conclusion, this benchmark highlights a practical comparison between using iterators versus direct array methods in JavaScript when dealing with DOM elements. Developers can choose either approach depending on their performance needs and code readability preferences, keeping in mind the implications of the size of the DOM and target browsers.

Related benchmarks:

querySelectorAll, iterated map or array map (version: 1)

Comparing performance of: Iterator vs Non-Iterator

Created: one year ago by: Guest

Jump to the latest result

Iterator

Non-Iterator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):