Benchmark: js array perfomance

Script Preparation code:

function generateTestArray() {
  const result = [];
  for (let i = 0; i < 1000000; ++i) {
    result.push({
      a: i,
      b: i / 2,
      r: 0,
    });
  }
  return result;
}

var array = generateTestArray();

​x
 
function generateTestArray() {  const result = [];  for (let i = 0; i < 1000000; ++i) {    result.push({      a: i,      b: i / 2,      r: 0,    });  }  return result;}​var array = generateTestArray();

Tests:

Array.forEach

array.forEach((x) => {
        x.r = x.a + x.b;
      });

 
array.forEach((x) => {        x.r = x.a + x.b;      });

for of

  for (const obj of array) {
        obj.r = obj.a + obj.b;
      }

 
  for (const obj of array) {        obj.r = obj.a + obj.b;      }

for <array.length, indexing
for (let i = 0; i < array.length; ++i) { array[i].r = array[i].a + array[i].b; }
for (let i = 0; i < array.length; ++i) {
array[i].r = array[i].a + array[i].b;
}

for <len, indexing

const len = array.length;
      for (let i = 0; i < len; ++i) {
        array[i].r = array[i].a + array[i].b;
      }

 
const len = array.length;      for (let i = 0; i < len; ++i) {        array[i].r = array[i].a + array[i].b;      }

for <array.length, tmp element

for (let i = 0; i < array.length; ++i) {
        const x = array[i];
        x.r = x.a + x.b;
      }

 
for (let i = 0; i < array.length; ++i) {        const x = array[i];        x.r = x.a + x.b;      }

for <len, tmp element

const len = array.length;
      for (let i = 0; i < len; ++i) {
        const x = array[i];
        x.r = x.a + x.b;
      }

 
const len = array.length;      for (let i = 0; i < len; ++i) {        const x = array[i];        x.r = x.a + x.b;      }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Array.forEach
for of
for <array.length, indexing
for <len, indexing
for <array.length, tmp element
for <len, tmp element

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 91 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.forEach	120.6 Ops/sec
for of	515.4 Ops/sec
for <array.length, indexing	6.7 Ops/sec
for <len, indexing	8.8 Ops/sec
for <array.length, tmp element	13.0 Ops/sec
for <len, tmp element	24.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

Let's dive into the benchmark and explain what's being tested.

Benchmark Description

The benchmark measures the performance of different ways to iterate over an array in JavaScript. The test case creates a large array with 1 million elements, each containing three properties: a, b, and r. The script then performs an operation on each element in the array, either by updating the value of r based on the values of a and b.

Benchmark Options

The benchmark compares four different ways to iterate over the array:

Array.forEach: This method iterates over the array using a callback function.
for...of: This loop construct iterates over the array elements without explicit indexing.
For loops with indexing: These loops use explicit indexing (array[i]) to access each element in the array.
For loops with tmp element: These loops create a temporary variable x to hold each element of the array.

Pros and Cons of Each Approach

Array.forEach:
- Pros: Efficient, easy to read, and concise.
- Cons: May not be suitable for complex operations or mutable arrays.
For...of:
- Pros: Modern, efficient, and easy to read.
- Cons: Limited support in older browsers, may require explicit handling of array creation.
For loops with indexing:
- Pros: Fast, flexible, and suitable for complex operations.
- Cons: Less readable than other options, requires manual memory management (e.g., array[i]).
For loops with tmp element:
- Pros: More readable than indexing, allows for caching or reusing temporary variables.
- Cons: May be slower due to the creation of a temporary variable, less efficient than indexing.

Library and Special JS Features

The benchmark does not use any external libraries. However, it assumes that the Array object is available, which is a built-in JavaScript object. There are no special JavaScript features used in this benchmark.

Other Considerations

The benchmark uses a large array to ensure that performance differences between iterations are significant.
The generateTestArray() function creates an array with 1 million elements, which may not be representative of real-world scenarios. In practice, arrays are often smaller and more manageable.
The benchmark assumes that the array variable is accessible within each iteration.

Alternatives

If you want to explore alternative approaches or modifications to this benchmark, consider:

Using a different data structure (e.g., linked list, tree) for the array.
Adding more complex operations to the test case (e.g., sorting, filtering).
Comparing performance across multiple browsers or environments.
Analyzing memory usage and garbage collection behavior for each iteration.

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Description**

The benchmark measures the performance of different ways to iterate over an array in JavaScript. The test case creates a large array with 1 million elements, each containing three properties: `a`, `b`, and `r`. The script then performs an operation on each element in the array, either by updating the value of `r` based on the values of `a` and `b`.

**Benchmark Options**

The benchmark compares four different ways to iterate over the array:

1. **Array.forEach**: This method iterates over the array using a callback function.
2. **for...of**: This loop construct iterates over the array elements without explicit indexing.
3. **For loops with indexing**: These loops use explicit indexing (`array[i]`) to access each element in the array.
4. **For loops with tmp element**: These loops create a temporary variable `x` to hold each element of the array.

**Pros and Cons of Each Approach**

1. **Array.forEach**:
	* Pros: Efficient, easy to read, and concise.
	* Cons: May not be suitable for complex operations or mutable arrays.
2. **For...of**:
	* Pros: Modern, efficient, and easy to read.
	* Cons: Limited support in older browsers, may require explicit handling of array creation.
3. **For loops with indexing**:
	* Pros: Fast, flexible, and suitable for complex operations.
	* Cons: Less readable than other options, requires manual memory management (e.g., `array[i]`).
4. **For loops with tmp element**:
	* Pros: More readable than indexing, allows for caching or reusing temporary variables.
	* Cons: May be slower due to the creation of a temporary variable, less efficient than indexing.

**Library and Special JS Features**

The benchmark does not use any external libraries. However, it assumes that the `Array` object is available, which is a built-in JavaScript object. There are no special JavaScript features used in this benchmark.

**Other Considerations**

* The benchmark uses a large array to ensure that performance differences between iterations are significant.
* The `generateTestArray()` function creates an array with 1 million elements, which may not be representative of real-world scenarios. In practice, arrays are often smaller and more manageable.
* The benchmark assumes that the `array` variable is accessible within each iteration.

**Alternatives**

If you want to explore alternative approaches or modifications to this benchmark, consider:

* Using a different data structure (e.g., linked list, tree) for the array.
* Adding more complex operations to the test case (e.g., sorting, filtering).
* Comparing performance across multiple browsers or environments.
* Analyzing memory usage and garbage collection behavior for each iteration.

Related benchmarks:

js array perfomance (version: 0)

Comparing performance of: Array.forEach vs for of vs for <array.length, indexing vs for <len, indexing vs for <array.length, tmp element vs for <len, tmp element

Created: 3 years ago by: Registered User

Jump to the latest result