Benchmark: slice vs subarray

Script Preparation code:

var bytes = [84,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46,104,105,115,32,105,115,32,97,32,115,97,109,112,108,101,32,112,97,114,97,103,114,97,112,104,46];
var buffer = new ArrayBuffer(bytes);
var bufferArray = new Uint8Array(bytes);

Tests:

slice
buffer.slice(3, 13);
subarray
bufferArray.subarray(3, 13);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
subarray

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
slice	4112037.8 Ops/sec
subarray	15237198.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares two methods for extracting subsets of data from an array-like structure in JavaScript: the `slice` method of `ArrayBuffer` and the `subarray` method of `Uint8Array`.

### Options Compared

1. **ArrayBuffer.prototype.slice()**
   - **Definition**: The `slice` method creates a new `ArrayBuffer` that contains a copy of a portion of the original buffer.  
   - **Usage Example**: `buffer.slice(3, 13);`
   - **Output**: Returns a new `ArrayBuffer` from index 3 to index 13, inclusive of the start index and exclusive of the end index.

2. **Uint8Array.prototype.subarray()**
   - **Definition**: The `subarray` method returns a new `Uint8Array` view on the same underlying `ArrayBuffer`, without creating a copy of the data.  
   - **Usage Example**: `bufferArray.subarray(3, 13);`
   - **Output**: Returns a new `Uint8Array` view of the buffer from index 3 to 13, similarly inclusive of the start and exclusive of the end index.

### Pros and Cons

#### ArrayBuffer.prototype.slice()

- **Pros**:
  - Creates a completely new buffer that is independent of the original. Any changes to the new buffer will not affect the original.
  - Useful when you need a separate buffer to work on and ensure you don’t accidentally alter the original data.
  
- **Cons**:
  - It involves memory allocation for the new buffer, which can be slower and more resource-intensive, especially for large data sets.
  - Generally, it might not be as efficient in terms of performance for repeated operations compared to subarray derived from the same buffer.

#### Uint8Array.prototype.subarray()

- **Pros**:
  - Does not create a new copy of the data, thus enhancing performance, especially for large arrays.
  - Memory-efficient as both original and subarray share the same underlying buffer. This means that changes to the subarray directly affect the original buffer, which can be advantageous in certain scenarios.
  
- **Cons**:
  - Changes made in the subarray will also reflect in the original buffer, which might lead to unintentional side effects if modifications are made without consideration.
  - It may not be suitable if you require data isolation for each operation.

### Library Description

The benchmark is based on native JavaScript features without the use of external libraries. It utilizes `ArrayBuffer` and `Uint8Array`, which are part of JavaScript's typed array family introduced in ECMAScript 2015. These types enable more efficient handling of binary data, allowing JavaScript to work with raw binary data in applications such as web applications and performance-sensitive scenarios.

### Other Considerations

- **Performance Context**: The benchmark results demonstrate that the `subarray` method significantly outperforms the `slice` method in terms of executions per second, with results showing approximately 20.7 million executions per second for `subarray` versus about 4.7 million for `slice`. This indicates that for applications where performance is critical, especially when dealing with large datasets or when operations are performed frequently, the `subarray` approach is generally preferable.

### Other Alternatives

- **Typed Arrays**: The benchmark includes specifically `Uint8Array`, but other typed arrays like `Float32Array`, `Int16Array`, etc., can be used depending on the data type and usage requirements.
  
- **Other Slicing Libraries**: While not directly comparable to built-in methods, libraries like `lodash` and `underscore.js` provide array manipulation functions which can slice or map over data, but these often involve more abstraction and may come with additional overhead compared to native operations.

Overall, this benchmark illustrates the efficiency differences between these two approaches, reinforcing the importance of selecting the right method based on requirements for performance and memory management in JavaScript applications.

Related benchmarks:

slice vs subarray (version: 0)

Comparing performance of: slice vs subarray

Created: 2 months ago by: Guest

Jump to the latest result

slice

subarray

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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