Benchmark: immutable vs mutable, slice VS splice VS shift for fixed size arrays

Script Preparation code:

var count = 120000;
var list = new Array(count).fill(100);

Tests:

slice immutable
if (list.length > count - 1) { list=list.slice(0, count - 1) list.push(count + 1) } else { list = [...list, count + 1]; }
splice immutable
list = [...list, count + 1] if (list.length > count) { list.splice(0, list.length - count); }
shift-while immutable
list = [...list, count + 1] while (list.length > count) { list.shift(); }
slice mutable
list=list.slice(0, count) list.push(count + 1)
splice mutable
list.push(count + 1) if (list.length > count) { list.splice(0, list.length - count); }
shift-while mutable
list.push(count + 1) while (list.length > count) { list.shift(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice immutable
splice immutable
shift-while immutable
slice mutable
splice mutable
shift-while mutable

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
slice immutable	1507.2 Ops/sec
splice immutable	1336.1 Ops/sec
shift-while immutable	1333.6 Ops/sec
slice mutable	1502.4 Ops/sec
splice mutable	13285.0 Ops/sec
shift-while mutable	86219.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Purpose**

The benchmark measures the performance of different ways to add an element to a fixed-size array in JavaScript: using `slice`, `splice`, or `shift` operations, with immutable and mutable arrays. The goal is to compare the execution times of these approaches on various browsers.

**Test Cases**

There are six test cases, each representing a different scenario:

1. **Slice Immutable**: Measures the performance of slicing an array from the beginning to a certain length ( `list.slice(0, count - 1)` ) and then appending an element to it.
2. **Splice Immutable**: Measures the performance of removing elements from the start of an array until its length reaches a certain threshold ( `list.splice(0, list.length - count)` ) and then appending an element to it.
3. **Shift-While Immutable**: Measures the performance of shifting elements from the end of an array until its length reaches a certain threshold ( `while (list.length > count) { list.shift(); }` ) and then appending an element to it.
4. **Slice Mutable**: Similar to Slice Immutable, but with a mutable array.
5. **Splice Mutable**: Similar to Splice Immutable, but with a mutable array.
6. **Shift-While Mutable**: Similar to Shift-While Immutable, but with a mutable array.

**Library Usage**

None of the test cases use any external libraries. They rely on built-in JavaScript features and data structures (arrays).

**Special JS Features or Syntax**

The tests utilize various JavaScript features:

* `slice()` and `splice()` methods for array manipulation.
* `push()` method for adding an element to the end of an array.
* `shift()` method for removing an element from the beginning of an array.
* `while` loops for iterating over elements in the array.

**Pros and Cons of Different Approaches**

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

1. **Slice Immutable**:
	* Pros: Efficient use of memory (no extra allocation), predictable behavior.
	* Cons: May involve unnecessary copying of data.
2. **Splice Immutable**:
	* Pros: Also efficient in terms of memory, but can be slower than slice due to the removal operation.
	* Cons: Can be less predictable than slice, as the removed elements are not guaranteed to be in the same order.
3. **Shift-While Immutable**:
	* Pros: Similar efficiency to slice and splice, with a clear understanding of the iteration process.
	* Cons: May require more iterations to reach the desired length, potentially leading to slower performance.
4. **Slice Mutable**:
	* Pros: No memory allocation or copying required, simple to implement.
	* Cons: Can be less predictable due to the potential for extra memory allocation.
5. **Splice Mutable**:
	* Pros: Efficient in terms of memory and can be faster than slice for large arrays.
	* Cons: May involve more overhead due to the removal operation and potential memory allocation.
6. **Shift-While Mutable**:
	* Pros: Simple and predictable, with a clear understanding of the iteration process.
	* Cons: Can be slower than other approaches due to the repeated shift operations.

**Other Alternatives**

There are no significant alternatives in this benchmark. The focus is on comparing different array manipulation techniques using JavaScript's built-in features.

However, if you were to extend this benchmark or consider similar scenarios, some potential alternative approaches might include:

* Using `Array.from()` for creating new arrays.
* Employing custom data structures (e.g., linked lists) instead of traditional arrays.
* Exploring other methods for adding elements to an array, such as using `concat()` or `push()`.
* Investigating the performance implications of using different JavaScript engines or browsers.

I hope this explanation provides a comprehensive overview of the benchmark and its test cases!

Related benchmarks:

immutable vs mutable, slice VS splice VS shift for fixed size arrays (version: 0)

Comparing performance of: slice immutable vs splice immutable vs shift-while immutable vs slice mutable vs splice mutable vs shift-while mutable

Created: 3 years ago by: Guest

Jump to the latest result

slice immutable

splice immutable

shift-while immutable

slice mutable

splice mutable

shift-while mutable

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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