Benchmark: NodeList vs Array iterator

HTML Preparation code:

<ul>
</ul>

Script Preparation code:

var ul = document.querySelector('ul');
for(var i=0;i<100;i++) {
  ul.appendChild(document.createElement('li'));
}

var nodeList = document.querySelectorAll('li');
var array = Array.from(nodeList);

Tests:

nodeList
for (let i of nodeList) { i.classList.add("hi"); }
array
for (let i of array) { i.classList.add("hi"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
nodeList
array

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Windows

View result in a separate tab

Test name	Executions per second
nodeList	18025.6 Ops/sec
array	23833.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and analyze what's being tested.

**Benchmark Overview**

The benchmark compares the performance of two approaches to iterate over a NodeList (a collection of DOM elements) versus an Array in JavaScript. The test case creates a new unordered list (`<ul>`) with 100 list items (`<li>`), appends them using `appendChild`, and then converts the NodeList to an Array using `Array.from()`.

**Options Compared**

There are two options being compared:

1. **NodeList iteration**: The first option uses traditional NodeList iteration, which involves iterating over the elements using a `for` loop with an index (`var i = 0; i < nodeList.length; i++`). In this loop, each element's class is added to it using `i.classList.add("hi")`.
2. **Array iteration**: The second option uses Array iteration, which involves using the `forEach()` method or a traditional `for` loop with an iterator variable (`var i of array`). In this case, both options use the same loop structure: iterate over each element and add its class to it.

**Pros and Cons**

* **NodeList Iteration**:
	+ Pros: It's a built-in, lightweight way to iterate over DOM elements.
	+ Cons: It can be slower than Array iteration due to the additional overhead of accessing `nodeList.length` and checking each element individually.
* **Array Iteration**:
	+ Pros: It's generally faster than NodeList iteration because it avoids the overhead of calculating the length and comparing individual elements.
	+ Cons: It requires creating an Array instance, which can be slower for small datasets.

In general, if you need to iterate over DOM elements frequently, using `NodeList` or `forEach()` on a NodeList might be acceptable. However, for larger datasets or performance-critical applications, using Array iteration with `Array.from()` and `forEach()` is likely to be faster.

**Library and Purpose**

* **Array.from()**: This method creates a new Array instance from an iterable (like a NodeList). It's used here to convert the NodeList to an Array for comparison.
* **DOM Elements**: The benchmark uses DOM elements (list items) to demonstrate iteration over a collection of objects. It's essential to understand how to work with these elements, especially in web development.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark beyond the use of `forEach()` and Array.from(). The test focuses on comparing two common iteration patterns.

**Alternatives**

If you need alternatives for iterating over DOM elements or Arrays, consider:

* **Traditional `for` loops**: While not as concise as `forEach()`, traditional `for` loops can provide better control over iteration.
* **Underscore.js or Lodash**: These libraries offer higher-order functions like `forEach()` and `map()`, which can simplify iteration logic in larger applications.

Keep in mind that these alternatives might have performance implications, so it's essential to test them thoroughly to ensure they meet your requirements.

Related benchmarks:

NodeList vs Array iterator (version: 0)

Comparing performance of: nodeList vs array

Created: 4 years ago by: Guest

Jump to the latest result

nodeList

array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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