Benchmark: JS: Zip Element.children indexing vs existing array copy

HTML Preparation code:

<div id="container1"></div><div id="container2"></div>

Script Preparation code:

var container1 = document.getElementById("container1");
var container2 = document.getElementById("container2");
var N = 1000;
var a1 = [];
var a2 = [];

for (var i = 0; i < N; ++i) {
  var s1 = document.createElement("span");
  s1.textContent = i.toString();
  container1.appendChild(s1);
  a1.push(s1);
  
  var s2 = document.createElement("span");
  s2.textContent = i.toString();
  container2.appendChild(s2);
  a2.push(s2);
}

Tests:

Array copy
for (var i = 0; i < N; ++i) { var e1 = a1[i]; var e2 = a2[i]; }
Element.children
for (var i = 0; i < N; ++i) { var e1 = container1.children[i]; var e2 = container2.children[i]; }
Element.children ref
var c1 = container1.children; var c2 = container2.children; for (var i = 0; i < N; ++i) { var e1 = c1[i]; var e2 = c2[i]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array copy
Element.children
Element.children ref

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 88 on Linux

View result in a separate tab

Test name	Executions per second
Array copy	448485.8 Ops/sec
Element.children	5992.1 Ops/sec
Element.children ref	10182.4 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, compared, and analyzed.

**Benchmark Overview**

The primary goal of this benchmark is to compare the performance of accessing an array versus accessing the children of an HTML element using JavaScript. The test focuses on the speed difference between these two approaches, specifically in terms of memory usage.

**Test Cases**

There are three test cases:

1. **Array Copy**: This test case creates an array `a1` and another array `a2`, then appends elements to both arrays using the `push()` method.
2. **Element.children**: In this test case, the same array is created as in the previous one, but instead of accessing it directly, the code uses the `children` property of two HTML elements (`container1` and `container2`) to access its elements.
3. **Element.children Ref**: Similar to the second test case, but with a reference to the children array (`c1` and `c2`) instead of using the `children` property directly.

**Comparison**

The benchmark compares the performance of accessing an array versus accessing the children of an HTML element in three different approaches:

* **Array Copy**: Directly accesses the array elements.
* **Element.children**: Uses the `children` property to access the array elements.
* **Element.children Ref**: Uses a reference to the children array (`c1` and `c2`) to access its elements.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Array Copy**:
	+ Pros: Fastest, most straightforward way to access an array element.
	+ Cons: Creates a new copy of the array, which can lead to increased memory usage.
* **Element.children**:
	+ Pros: Can be faster than accessing an array directly, as it avoids creating a new copy.
	+ Cons: Slower than direct array access, and may incur additional overhead due to the DOM traversal.
* **Element.children Ref**:
	+ Pros: Balances speed with memory efficiency, as it uses a reference to the children array instead of creating a new copy.
	+ Cons: May still incur some overhead due to the DOM traversal.

**Library Usage**

In this benchmark, no libraries are used explicitly. However, the test cases rely on the `Document` object and the `HTMLElement` interface, which are built-in components of the JavaScript runtime environment (Browser).

**Special JS Features or Syntax**

The benchmark does not use any special JavaScript features or syntax that is not widely supported by modern browsers.

**Other Alternatives**

If you wanted to explore alternative approaches for accessing array elements in your code, some options might include:

* Using `Slice()` or `Subarray()` methods to create a new view into the original array.
* Utilizing `Array.prototype.forEach()` or other iteration methods instead of direct array access.
* Leveraging modern JavaScript features like `async/await` or `Generators` for more efficient data processing.

Keep in mind that each alternative approach has its own trade-offs, and the best choice will depend on the specific requirements and constraints of your project.

Related benchmarks:

JS: Zip Element.children indexing vs existing array copy (version: 0)

Is the speed increase of random array access versus Element.children[i] significant enough to justify the extra memory?

Comparing performance of: Array copy vs Element.children vs Element.children ref

Created: 3 years ago by: Guest

Jump to the latest result

Array copy

Element.children

Element.children ref

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