Benchmark: slice vs splice vs shift vs delete

Script Preparation code:

var list = new Array(10*1000);
for (var i = 0; i < 10 * 1000; i++) {
  list[i]= i * Math.random();
}

Tests:

slice
while(list.length) { list = list.slice(1) }
shift
while(list.length) { list.shift() }
splice
while(list.length) { list.splice(0,1) }
delete
let i = 0 let ln= list.length while (i < ln) { list[i]; delete list[i]; i++ }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
shift
splice
delete

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

Browser/OS: Chrome 136 on Mac OS X 10.15.7

View result in a separate tab

splice

195.1M/s

slice

190.0M/s

shift

189.6M/s

delete

187.2M/s

View exact numbers

Test name	Executions per second
✓ splice	195,117,376 Ops/sec
slice	189,962,880 Ops/sec
shift	189,570,016 Ops/sec
delete	187,222,640 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 benchmark and its results.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark that compares the performance of four different approaches to modify an array:

1. `slice()`: Creates a new array with all elements from the original array, excluding the first element.
2. `shift()`: Removes the first element from the original array and returns it.
3. `splice(0, 1)`: Removes the first element from the original array and returns an array with the removed element.
4. `delete` statement: Deletes the first occurrence of a property in the object (not directly applicable to arrays, but we'll assume it's used as a stand-in for removing an element).

**Options being compared**

The benchmark compares the performance of these four approaches on a large array of 10,000 elements, populated with random numbers.

**Pros and cons of each approach:**

1. `slice()`: Creates a new array, which can be memory-intensive. However, it's generally a fast operation.
2. `shift()`: Removes an element from the original array, making subsequent operations faster. However, it requires more cache misses compared to `splice`.
3. `splice(0, 1)`: Similar to `shift()`, but creates an additional array object. It's also relatively fast but can be slower due to the extra object creation.
4. `delete` statement: Not directly applicable to arrays, but used as a stand-in for removal. This approach is likely to be slow due to its nature.

**Library and purpose**

None of the approaches explicitly use a library or a framework, but they do utilize JavaScript's built-in array methods. The `splice()` method, in particular, uses an internal implementation that modifies the original array's length property.

**Special JS features or syntax**

There are no specific special features or syntax used in this benchmark beyond what's standard in modern JavaScript.

**Other considerations**

The benchmark measures executions per second (FPS), which can be influenced by factors like:

* Cache performance: How effectively the browser caches the array data and subsequent operations.
* Garbage collection: When the browser cleans up memory, it may slow down or speed up certain operations.
* Interpreter optimizations: Some JavaScript engines have built-in optimizations for specific operations.

**Alternative approaches**

Other methods to modify an array could be explored in similar benchmarks, such as:

1. Using `Array.prototype.map()` and then reducing the resulting array
2. Using `Array.prototype.filter()` and then concatenating or using `join()`
3. Directly manipulating the array's internal buffer (not recommended for JavaScript)

In general, when optimizing array operations, consider factors like memory allocation, cache performance, and garbage collection to understand why certain approaches might be faster than others.

For more detailed analysis of specific benchmarks or microbenchmarks, I'd recommend exploring:

* The Firefox Developer Edition documentation on Array Methods Performance
* Mozilla's Array.prototype methods documentation
* Benchmarking resources for JavaScript engines (e.g., jsperf or microbenchmark)

Keep in mind that benchmarking is an area of ongoing research and optimization, and the best approach often depends on the specific use case, performance requirements, and target audience.

slice vs splice vs shift vs delete (version: 2) Benchmark.js

which is faster

Comparing performance of: `slice vs shift vs splice vs delete`

Created: 5 years ago by: Registered User

Go to the latest result

slice

shift

splice

delete

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

slice vs splice vs shift vs delete (version: 2) Benchmark.js

which is faster

Comparing performance of: slice vs shift vs splice vs delete

Created: 5 years ago by: Registered User

Go to the latest result

slice

shift

splice

delete

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: `slice vs shift vs splice vs delete`