Benchmark: NodeList loop iterator comparison v2

HTML Preparation code:

<ul>
</ul>

<ol>
</ol>

Script Preparation code:

const ul = document.querySelector('ul');
const ol = document.querySelector('ul');
for (let i = 0; i < 1000; i++) {
    const li = document.createElement('li')
    li.classList.add(i % 2 === 0 ? 'even' : 'odd')
    ul.appendChild(document.createElement('li'));
    ol.appendChild(document.createElement('li'));
}

var oddListItems = document.querySelectorAll('li.odd');

var anything = [];

Tests:

for ... of
for (const item of oddListItems) { anything.push(item); }
Array.from
Array.from(oddListItems).forEach(item => anything.push(item));
NodeList.forEach
oddListItems.forEach(item => anything.push(item));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for ... of
Array.from
NodeList.forEach

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 131 on Ubuntu

View result in a separate tab

Test name	Executions per second
for ... of	56175100.0 Ops/sec
Array.from	22263000.0 Ops/sec
NodeList.forEach	97272792.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark identified as "NodeList loop iterator comparison v2" evaluates the performance of different methods for iterating over a NodeList in JavaScript. The NodeList is created by querying for all `<li>` elements that have the class "odd" within the previously defined `<ul>` and `<ol>` structures. The benchmark consists of three test cases, each testing a different method of iteration.

### Approaches Compared

1. **for...of Loop**
   ```javascript
   for (const item of oddListItems) {
       anything.push(item);
   }
   ```
   - **Pros**: This approach is straightforward and highly readable. It leverages the iterability of the NodeList, making it easy to understand.
   - **Cons**: In earlier JavaScript environments, the performance of `for...of` can be slower compared to traditional loops, but this has improved significantly with modern JavaScript engines.

2. **Array.from with forEach**
   ```javascript
   Array.from(oddListItems).forEach(item => anything.push(item));
   ```
   - **Pros**: This method converts the NodeList into an array, allowing the use of powerful array methods like `forEach`. It enhances compatibility with array manipulation functions.
   - **Cons**: The conversion from NodeList to an array introduces overhead, potentially making it the slowest option among the three, particularly for larger NodeLists because it involves creating a new array and iterating over it.

3. **NodeList.forEach**
   ```javascript
   oddListItems.forEach(item => anything.push(item));
   ```
   - **Pros**: This method directly uses the built-in `forEach` method on the NodeList, making it concise and efficient, as no conversion is needed. It maintains the semantic clarity of the operation.
   - **Cons**: While generally performant in modern browsers, it's important to note that older environments may not support the `forEach` method on NodeLists.

### Performance Insights

The benchmark results show that `NodeList.forEach` yielded the highest performance, achieving around 97 million executions per second, followed by the `for...of` loop at about 56 million, and finally `Array.from` at approximately 22 million. This indicates a clear preference for using the native `forEach` method in terms of speed for this specific case.

### Other Considerations

- **Browser Compatibilities**: It's crucial to consider the context in which this code will run. Older browsers may not fully support `forEach` on NodeLists, while `for...of` and `Array.from` provide broader compatibility, although `for...of` support has also been widely adopted in modern browsers.
- **Readability vs. Performance**: While performance metrics are important, code readability and maintainability should also be considered. The choice of an approach may depend on the specific needs of the project, particularly if the code needs to be understood by various team members.

### Alternatives

- **Traditional for Loop**: Using a classic `for` loop to iterate through a NodeList is another alternative, which can be optimized for performance in many JavaScript environments:
  ```javascript
  for (let i = 0; i < oddListItems.length; i++) {
      anything.push(oddListItems[i]);
  }
  ```
- **Map Method**: If we want to transform the items while iterating, using `Array.from(oddListItems).map(...)` could be another choice, though it adds the overhead of creating a new array:
  ```javascript
  Array.from(oddListItems).map(item => anything.push(item));
  ```

In conclusion, the test compares three distinct methods of iterating over a NodeList, highlighting both performance and usability. Each approach has its strengths and trade-offs, so the "best" method may vary depending on particular project requirements and target browser environments.

Related benchmarks:

NodeList loop iterator comparison v2 (version: 0)

Comparing performance of: for ... of vs Array.from vs NodeList.forEach

Created: one month ago by: Guest

Jump to the latest result

for ... of

Array.from

NodeList.forEach

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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