Benchmark: slice vs subarray vs set - million elements

Script Preparation code:

var data = new Array(1000000);

for (var i = 0; i < data.length; i++) {
  data[i] = i % 2 === 0 ? i : i + 0.5;
}
var f32 = new Float32Array(data);

Tests:

subarray direct
var copy = f32.subarray(0, 500000);
slice direct
var copy = f32.slice(0, 500000);
subarray copy
var copy = new Float32Array(f32.subarray(0, 500000));
slice copy
var copy = new Float32Array(f32.slice(0, 500000));
subarray set
var copy = new Float32Array(1000000).set(f32.subarray(0, 500000));
slice set
var copy = new Float32Array(1000000).set(f32.slice(0, 500000));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
subarray direct
slice direct
subarray copy
slice copy
subarray set
slice set

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
subarray direct	42349796.0 Ops/sec
slice direct	6794.7 Ops/sec
subarray copy	6637.1 Ops/sec
slice copy	3359.1 Ops/sec
subarray set	6253.8 Ops/sec
slice set	3092.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 6 months ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON assesses various methods for creating and copying sections of a large array of floating-point numbers in JavaScript using the `Float32Array`, part of the Typed Arrays feature of JavaScript. The benchmark focuses on the performance of different array manipulation techniques: `subarray` and `slice`, as well as methods that involve copying (`new Float32Array()`) and setting (`set()`) arrays.

### Benchmark Options Compared

1. **Direct Subarray Creation:**
   - **Test Case:** `var copy = f32.subarray(0, 500000);`
   - **Description:** This creates a view of the original `Float32Array` without copying the data. The `subarray` method returns a new TypedArray that shares the same buffer as the original, meaning both arrays reflect the same underlying data.
   - **Performance Result:** Highest performance at approximately 19.19 million executions per second.
   
2. **Direct Slice Creation:**
   - **Test Case:** `var copy = f32.slice(0, 500000);`
   - **Description:** This creates a new array that is a copy of the specified section of the `Float32Array`. The `slice` method creates a new array containing the elements from the original array, thus differing from `subarray` as it does not share the buffer.
   - **Performance Result:** Significantly lower performance at about 6.53 thousand executions per second.

3. **Subarray with Copy:**
   - **Test Case:** `var copy = new Float32Array(f32.subarray(0, 500000));`
   - **Description:** This creates a new `Float32Array` based on the results of an earlier `subarray`, which means it first creates a view (like the first test case) and then copies that data into a completely new array.
   - **Performance Result:** Similar to the slice but with minor degradation at around 6.48 thousand executions per second.

4. **Slice with Copy:**
   - **Test Case:** `var copy = new Float32Array(f32.slice(0, 500000));`
   - **Description:** This directly creates a new array that is both copied from a slice. This represents a double copying because it first creates a copy of the elements before creating a new `Float32Array`.
   - **Performance Result:** Lower performance than subarray copy, at about 3.1 thousand executions per second.

5. **Subarray with Set:**
   - **Test Case:** `var copy = new Float32Array(1000000).set(f32.subarray(0, 500000));`
   - **Description:** This creates a new `Float32Array` and uses the `set` method to copy elements from a `subarray`. The `set` method allows you to copy the values of one TypedArray into another, starting at a specified index.
   - **Performance Result:** Around 6.45 thousand executions per second, indicating some overhead from the new array allocation.

6. **Slice with Set:**
   - **Test Case:** `var copy = new Float32Array(1000000).set(f32.slice(0, 500000));`
   - **Description:** Similar to the subarray set case, but it starts with a sliced copy, again resulting in an explicit copy from the slice method.
   - **Performance Result:** Lowest performance of the direct copying methods at about 3.2 thousand executions per second.

### Pros and Cons of Approaches

- **Subarray:**
  - **Pros:** Fast, low memory overhead since no data is copied.
  - **Cons:** Any changes to the subarray will affect the original array because they share the same buffer.

- **Slice:**
  - **Pros:** Creates an independent copy, changes to the new array do not affect the original.
  - **Cons:** Higher memory and processing cost due to the copying of data.

- **Copy Approaches (new Float32Array with subarray or slice):**
  - **Pros:** Guarantees an independent copy which can be modified without side effects.
  - **Cons:** Significantly slower than the `subarray` approach, and incurs extra memory allocation overhead.

- **Set Method:**
  - **Pros:** Efficient way to copy data from one TypedArray to another and allows specifying the starting index.
  - **Cons:** Still slower than using `subarray` directly due to the copying overhead.

### Other Considerations

- **Memory Management:** The direct use of `subarray` can lead to increased memory efficiency, particularly in situations where large datasets are manipulated. However, developers must be cautious about unintentional side effects due to shared buffers.

- **Use Case Suitability:** The choice between these methods may depend on the use case. For read-only access where data integrity isn't a concern, `subarray` is ideal. In contrast, if independent manipulation of the data is necessary, `slice` or copying methods are preferable.

### Alternatives

1. **Manual Copying:** Implementing a manual for-loop to copy elements might provide more control over the copying process but is often less efficient than using built-in methods like `slice`, `set`, etc.
   
2. **Typed Arrays vs Regular Arrays:** For raw performance with structured numerical data, Typed Arrays (like `Float32Array`) are preferred. Regular JavaScript arrays may be more convenient for general use but lack the performance optimizations of typed structures.

3. **WebAssembly:** For complex numerical computations and data manipulations beyond what JavaScript handles natively, WebAssembly could provide significant performance improvements.

This benchmark serves to inform engineers about the trade-offs present when manipulating arrays in JavaScript, helping them choose the best approach depending on their specific constraints and requirements.

Related benchmarks:

slice vs subarray vs set - million elements (version: 1)

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

Created: 6 months ago by: Guest

Jump to the latest result

subarray direct

slice direct

subarray copy

slice copy

subarray set

slice set

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 6 months ago):