Benchmark: arr unshift vs push + reverse (large array)

Script Preparation code:

var arr = [];

Tests:

unshift
for (let i = 0; i < 100000; i++){ arr.unshift(i); }
push + reverse
for (let i = 0; i < 100000; i++){ arr.push(i); } arr.reverse();

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 17 runs

push + reverse

59/s

unshift

0/s

Fastest: push + reverse (283.3x faster)

View exact numbers

✓ push + reverse: 59 ops/sec
• unshift: 0 ops/sec

Firefox 7 runs

push + reverse

30/s

unshift

5/s

Fastest: push + reverse (6.5x faster)

View exact numbers

✓ push + reverse: 30 ops/sec
• unshift: 5 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
unshift
push + reverse

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/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

push + reverse

69/s

unshift

0/s

View exact numbers

Test name	Executions per second
✓ push + reverse	69 Ops/sec
unshift	0 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 provided benchmark and explain what's being tested, compared options, pros and cons, and other considerations.

**Benchmark Definition**

The provided JSON represents a JavaScript microbenchmark named "arr unshift vs push + reverse (large array)". This benchmark compares the performance of two approaches:

1. Using `unshift()` to add elements to the beginning of an array.
2. Using `push()` followed by reversing the array using `reverse()`.

**Script Preparation Code**

The script preparation code is `var arr = [];`, which initializes an empty array `arr`.

**Html Preparation Code**

There is no HTML preparation code provided, so we'll assume it's not being used or is already handled elsewhere.

**Individual Test Cases**

We have two test cases:

1. **"unshift"`**: This test case uses a single line of code: `for (let i = 0; i < 100000; i++){\r\n arr.unshift(i);\r\n}`. The loop iterates 100,000 times and adds the current value of `i` to the beginning of `arr` using `unshift()`.
2. **"push + reverse"`**: This test case consists of two lines: `for (let i = 0; i < 100000; i++){\r\n arr.push(i);\r\n}` and `\r\narr.reverse();`. The loop iterates 100,000 times and adds the current value of `i` to the end of `arr` using `push()`, followed by reversing the array using `reverse()`.

**Library Used**

In both test cases, no libraries are explicitly mentioned. However, it's likely that the benchmark is running in a browser environment, where built-in JavaScript functionality is used.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes being tested in these benchmarks.

**Pros and Cons of Different Approaches**

1. **`unshift()`**:
	* Pros: Can be more efficient for adding elements to the beginning of an array, as it doesn't require creating a new array and copying elements.
	* Cons: Can lead to slower performance due to the increased memory allocation required for the new element, especially in large arrays.
2. **`push()` + `reverse()`**:
	* Pros: Can be faster when dealing with large arrays, as it avoids the overhead of allocating a new array and copying elements using `unshift()`.
	* Cons: Requires an additional reverse operation, which can introduce additional overhead.

**Other Considerations**

When deciding between these approaches, consider the following:

* **Memory allocation**: If you're working with very large arrays, `unshift()` might be less efficient due to increased memory allocation.
* **Array reversal**: Reversing a large array using `reverse()` can be an expensive operation. If possible, try to avoid reversing the array altogether or use more efficient algorithms like `slice()` and `reverse()`.
* **Browser implementation**: Different browsers may implement these methods differently, affecting performance.

**Alternative Approaches**

Other approaches you might consider for adding elements to an array include:

* Using a data structure like a linked list or a doubly linked list.
* Utilizing a library or framework optimized for array manipulation (e.g., React's `useState()` and `useReducer()` hooks).
* Implementing your own optimized algorithm, such as using a single pass through the array and updating the elements accordingly.

Keep in mind that these alternatives might not be relevant to this specific benchmark, but they demonstrate other ways to approach similar problems.

arr unshift vs push + reverse (large array) (version: 0)

Comparing performance of: `unshift vs push + reverse`

Created: 5 years ago by: Guest

Go to the latest result

unshift

push + reverse

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 17 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

arr unshift vs push + reverse (large array) (version: 0)

Comparing performance of: unshift vs push + reverse

Created: 5 years ago by: Guest

Go to the latest result

unshift

push + reverse

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 17 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `unshift vs push + reverse`