Benchmark: fixed array slice VS splice VS shift - adding new elements to end

Script Preparation code:

var list = [];
for (let i = 0; i < 1000; i++) {
  list.push({'s':'usd', 'p':i});
}

Tests:

slice
list.push({'s':'cad', 'p':13}) list.push({'s':'cad', 'p':14}) list.push({'s':'cad', 'p':15}) list=list.slice(list.length-1000)
splice
list.push({'s':'cad', 'p':13}) list.push({'s':'cad', 'p':14}) list.push({'s':'cad', 'p':15}) list.splice(0, list.length-1000);
shift -while
list.push({'s':'cad', 'p':13}) list.push({'s':'cad', 'p':14}) list.push({'s':'cad', 'p':15}) while(list.length>1000){ list.shift(); }
shift-for
list.push({'s':'cad', 'p':13}) list.push({'s':'cad', 'p':14}) list.push({'s':'cad', 'p':15}) for(let i=0; i<(list.length-998); i++){ list.shift(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
splice
shift -while
shift-for

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

Browser/OS: Chrome 91 on Linux

View result in a separate tab

Test name	Executions per second
slice	278724.3 Ops/sec
splice	162104.8 Ops/sec
shift -while	919740.4 Ops/sec
shift-for	928122.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its various components.

**Benchmark Definition**
The benchmark is designed to measure the performance of three different methods for adding new elements to the end of an array in JavaScript:

1. `list.push()`
2. `list.splice()`
3. A combination of `while` loop and `shift()` method (Shift-While)

These methods are commonly used in JavaScript development, but they have different overheads and efficiency characteristics.

**Options Compared**

The three options compared in this benchmark are:

1. **Fixed Array Slice**: This option uses the `slice()` method to create a new array with the last 1000 elements of the original array.
2. **Splice Method**: This option uses the `splice()` method to remove the first 1000 elements from the original array, effectively creating an empty array.
3. **Shift-While Method**: This option uses a `while` loop and the `shift()` method to repeatedly remove elements from the end of the array until it reaches the desired size.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Fixed Array Slice (slice())**
	* Pros: Creates a new, independent array with the last 1000 elements.
	* Cons: Creates an additional object in memory and may incur a higher overhead due to the creation of a new array.
2. **Splice Method (splice())**
	* Pros: Can modify the original array in-place, reducing memory allocation overhead.
	* Cons: Removes the first 1000 elements from the array, effectively discarding existing data.
3. **Shift-While Method (shift() + while loop)**
	* Pros: Modifies the original array in-place and can be more efficient than `slice()` or `splice()`.
	* Cons: May require more iterations to reach the desired size due to the need to remove elements one by one.

**Library Usage**

None of the benchmark options explicitly use any libraries. However, the `slice()` method is a built-in JavaScript function that creates a new array with a specified range of elements from an existing array.

**Special JS Features or Syntax**

The only special syntax used in this benchmark is the use of template literals (`var list = [];\r\nfor (let i = 0; i < 1000; i++) {\r\n  list.push({'s':'usd', 'p':i});\r\n}`) to create a large array with 1000 elements. This syntax is widely supported in modern browsers and Node.js environments.

**Other Alternatives**

For this specific benchmark, there are no other alternatives that would significantly change the outcome. However, if you're interested in exploring other methods for adding new elements to an array, some possible options include:

* Using `Array.prototype.push.apply()` or `Array.prototype.unshift()` with a separate array or iterable as an argument.
* Utilizing WebAssembly (WASM) arrays, which may offer improved performance for certain use cases.

Keep in mind that the choice of method ultimately depends on the specific requirements and constraints of your project.

Related benchmarks:

fixed array slice VS splice VS shift - adding new elements to end (version: 0)

Comparing performance of: slice vs splice vs shift -while vs shift-for

Created: 3 years ago by: Registered User

Jump to the latest result

slice

splice

shift -while

shift-for

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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