Benchmark: subarray vs slice vs copy and subarray

Script Preparation code:

var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var f32 = new Float32Array(data);

Tests:

subarray direct
var copy = f32.subarray(10, 20);
slice direct
var copy = data.slice(10, 20);
subarray copy
var copy = new Float32Array(data).subarray(10, 20);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
subarray direct
slice direct
subarray copy

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Browser/OS: Chrome 142 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
subarray direct	34988272.0 Ops/sec
slice direct	38700420.0 Ops/sec
subarray copy	2480891.2 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 provided benchmark.

The test case is comparing three approaches: `subarray`, `slice`, and `copy` (using `Float32Array`) to create a subset of data from an existing array. Here's what each approach does:

1. **Subarray**: The `subarray` method creates a new Array object that contains a subset of the elements in the original array, starting at the specified index (`10`) and ending at the next index (`20`). This approach modifies the original array.
2. **Slice**: The `slice` method returns a shallow copy of the original array, containing a subset of its elements from the start index (`10`) to the end index (`20`), inclusive. This approach does not modify the original array.
3. **Copy using Float32Array**: This approach creates a new `Float32Array` object and then uses its `subarray` method to create a subset of data, similar to `subarray`. However, this time, it uses a `Float32Array` instead of an ordinary Array.

**Pros and Cons:**

* **Subarray**:
	+ Pros: Efficient in terms of memory usage, as it creates a new array object.
	+ Cons: Modifies the original array, which might be unexpected behavior for some users.
* **Slice**:
	+ Pros: Does not modify the original array, preserving its integrity. Returns a shallow copy, so modifications made to the subset do not affect the original array.
	+ Cons: May have higher memory usage compared to `subarray`, as it creates a new array object.
* **Copy using Float32Array**:
	+ Pros: Efficient in terms of memory usage, similar to `subarray`. However, it's more verbose and might be less intuitive for developers who are not familiar with working with `Float32Array`.
	+ Cons: Requires creating an additional `Float32Array` object, which may incur a small performance overhead.

**Library and purpose:**
The `slice()` method is a built-in JavaScript method that returns a shallow copy of the original array. The `subarray()` method is also a built-in Array method that creates a new array containing a subset of elements from the original array.

**Special JS feature or syntax:**
None mentioned in this benchmark.

Now, let's analyze the benchmark results:

The latest benchmark result shows the execution times for each test case:

1. **Slice direct**: 12195230.0 executions per second ( highest performance)
2. **Subarray direct**: 9430810.0 executions per second
3. **Subarray copy**: 1249454.125 executions per second

The results indicate that `slice` is the most efficient approach, followed by `subarray`, and then `subarray copy`. However, it's essential to consider the context in which this benchmark will be used. If modifying the original array is acceptable or expected behavior, `subarray` might be a better choice for performance reasons.

As for alternatives, other approaches that come to mind are:

* Using `Array.prototype.map()` to create a new array with a subset of elements
* Using a custom function to iterate over the original array and create a new array with the desired subset of elements

Related benchmarks:

subarray vs slice vs copy and subarray (version: 0)

Comparing performance of: subarray direct vs slice direct vs subarray copy

Created: 2 years ago by: Guest

Jump to the latest result

subarray direct

slice direct

subarray copy

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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