Benchmark: Loop through child nodes multiple times - v2

HTML Preparation code:

<ul id="list">
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
</ul>

Script Preparation code:

var list=document.querySelector('#list');
function createCopy(el) {
  var l = [];
  for (var node = list.firstChild; node; node = node.nextSibling) {
    l.push(node);
  }
  return l;
}

Tests:

Just loop
var node, count = 0; for (node = list.firstChild; node; node = node.nextSibling) { count++; } for (node = list.firstChild; node; node = node.nextSibling) { count++; }
Create copy and loop
var node, count = 0, l = createCopy(list), i; for (i = 0; i < l.length; i++) { node = l[i]; count++; } for (i = 0; i < l.length; i++) { node = l[i]; count++; }
Using childNodes
var node, childNodes = list.childNodes, count = 0, i, len = childNodes.length; for (i = 0; i < len; i++) { node = childNodes[i]; count++; } for (i = 0; i < len; i++) { node = childNodes[i]; count++; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Just loop
Create copy and loop
Using childNodes

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Just loop	1781715.1 Ops/sec
Create copy and loop	2487128.0 Ops/sec
Using childNodes	632148.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 JavaScript microbenchmark you've provided.

**What is being tested?**

The benchmark measures the performance of three different approaches to iterate over the child nodes of an HTML list element:

1. **Just Loop**: Simply iterating over the `firstChild` property of the list element without creating a copy.
2. **Create Copy and Loop**: Creating a copy of the list element's child nodes using the `createCopy()` function, and then iterating over the copied array.
3. **Using childNodes**: Directly accessing the `childNodes` property of the list element to iterate over its child nodes.

**Options compared**

The three options are being compared in terms of their execution speed, with the goal of determining which approach is most efficient.

**Pros and Cons of each approach:**

1. **Just Loop**:
	* Pros: Simple, straightforward implementation.
	* Cons: Requires two iterations over the `firstChild` property, which can be slow for large lists.
2. **Create Copy and Loop**:
	* Pros: Creates a copy of the child nodes, which can be useful in certain scenarios (e.g., avoiding modifying the original list).
	* Cons: Requires additional memory allocation and copying of data, which can be slower than direct iteration.
3. **Using childNodes**:
	* Pros: Directly accessing the child nodes without creating an intermediate copy, which can be faster for large lists.
	* Cons: May require more complex logic to handle edge cases (e.g., empty lists).

**Library and its purpose**

The `createCopy()` function is not a built-in library, but rather a custom implementation that creates a shallow copy of the list element's child nodes. Its purpose is to provide an alternative way to iterate over the child nodes without modifying the original list.

**Special JS feature or syntax**

There is no specific JavaScript feature or syntax being used in this benchmark other than basic iteration and property access.

**Other alternatives**

If you need to optimize iteration over HTML lists, consider using more advanced techniques:

* **IntersectionObserver**: Instead of iterating directly over child nodes, use the `IntersectionObserver` API to observe changes in the list element's content.
* **RequestAnimationFrame**: Use `RequestAnimationFrame` to schedule iterations at a specific time, reducing the overhead of repeated checks.

These alternatives may provide better performance and efficiency, but they also add complexity to your code.

Related benchmarks:

Loop through child nodes multiple times - v2 (version: 1)

Comparing performance of: Just loop vs Create copy and loop vs Using childNodes

Created: 2 years ago by: Registered User

Jump to the latest result

Just loop

Create copy and loop

Using childNodes

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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