Benchmark: Array initialization: preallocate vs push vs preallocate & fill

Tests:

Preallocate
var N = 10000; var result = new Array(N); for (var i = 0; i < N; i++) { result[i] = i * 2; }
Preallocate & fill
var N = 10000; var result = new Array(N).fill(0); for (var i = 0; i < N; i++) { result[i] = i * 2; }
Push
var N = 10000; var result = []; for (var i = 0; i < N; i++) { result.push(i * 2); }
Index
var N = 10000; var result = []; for (var i = 0; i < N; i++) { result[i] = i * 2; }

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 7 runs

Preallocate

99K/s

Preallocate & fill

55K/s

Push

45K/s

Index

37K/s

Fastest: Preallocate (2.7x faster)

View exact numbers

✓ Preallocate: 99,494 ops/sec
• Preallocate & fill: 55,079 ops/sec
• Push: 45,285 ops/sec
• Index: 37,245 ops/sec

Firefox 5 runs

Preallocate

22K/s

Push

20K/s

Index

19K/s

Preallocate & fill

15K/s

Fastest: Preallocate (1.5x faster)

View exact numbers

✓ Preallocate: 21,923 ops/sec
• Push: 20,104 ops/sec
• Index: 18,922 ops/sec
• Preallocate & fill: 14,614 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
Preallocate
Preallocate & fill
Push
Index

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

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

Browser/OS: Firefox 146 on Windows

View result in a separate tab

Preallocate

18K/s

Push

17K/s

Index

15K/s

Preallocate & fill

12K/s

View exact numbers

Test name	Executions per second
✓ Preallocate	18,162 Ops/sec
Push	17,277 Ops/sec
Index	15,068 Ops/sec
Preallocate & fill	11,908 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Definition**

The benchmark is defined in JSON format, which represents the test cases to be executed. The test case measures the performance of different approaches for initializing an array: `preallocate`, `push`, and `index`. Each test case has a unique name, description (none in this case), preparation code, and HTML preparation code.

**Approaches Compared**

The three approaches compared are:

1. **Preallocate**: Allocates memory for the entire array beforehand using `new Array(N)`.
2. **Preallocate & Fill**: Initializes the array with zeros using `new Array(N).fill(0)` before populating it.
3. **Push**: Uses the `push` method to add elements one by one.

**Pros and Cons of Each Approach**

1. **Preallocate**:
	* Pros: Typically faster, as the entire array is allocated upfront.
	* Cons: Requires more memory upfront, which can lead to slower performance if the array grows larger than expected.
2. **Preallocate & Fill**:
	* Pros: Reuses the same allocation for all elements, reducing overhead.
	* Cons: Slower than preallocation since it involves a separate step of filling the array with zeros.
3. **Push**:
	* Pros: Memory-efficient, as only necessary space is allocated for each element.
	* Cons: Typically slower due to repeated allocations and pushes.

**Library Used**

There doesn't appear to be any specific library used in this benchmark. The JavaScript code uses built-in methods like `Array`, `new Array()`, `push()`, and `fill()`.

**Special JS Feature/Syntax (None)**

No special JavaScript features or syntax are used in this benchmark.

**Other Considerations**

* **Cache Locality**: Preallocation can improve cache locality, as the allocated array is contiguous in memory. This might lead to better performance for certain workloads.
* **Garbage Collection**: The `push` approach can incur more garbage collection overhead due to the repeated allocations and deallocations of individual elements.

**Alternative Approaches**

Other approaches that could be explored in this benchmark include:

1. **Array.from()**: Using the `Array.from()` method to create an array from an iterable.
2. **map()**: Using the `map()` method to create a new array by applying a transformation function to each element of an existing array.
3. **WebAssembly**: Compiling JavaScript code to WebAssembly (WASM) for potential performance benefits.

Please note that these alternatives might not be directly comparable to the preallocated, push, and indexed approaches, as they involve different algorithmic designs and execution patterns.

Array initialization: preallocate vs push vs preallocate & fill (version: 1)

Comparing performance of: `Preallocate vs Preallocate & fill vs Push vs Index`

Created: 3 years ago by: Registered User

Go to the latest result

Preallocate

Preallocate & fill

Push

Index

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 7 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array initialization: preallocate vs push vs preallocate & fill (version: 1)

Comparing performance of: Preallocate vs Preallocate & fill vs Push vs Index

Created: 3 years ago by: Registered User

Go to the latest result

Preallocate

Preallocate & fill

Push

Index

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 7 runs

Firefox 5 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: `Preallocate vs Preallocate & fill vs Push vs Index`