Benchmark: slice vs subarray vs set

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 = new Float32Array(f32.buffer, 10 * 4, 10);
slice direct
var copy = f32.slice(10, 20);
subarray copy
var copy = new Float32Array(f32.subarray(10, 20));
slice copy
var copy = new Float32Array(f32.slice(10, 20));
subarray set
var copy = new Float32Array(10).set(f32.subarray(10, 20));
slice set
var copy = new Float32Array(10).set(f32.slice(10, 20));

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: one year ago)

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

Browser/OS: Chrome 108 on Windows

View result in a separate tab

Test name	Executions per second
subarray direct	1356232.8 Ops/sec
slice direct	2828000.8 Ops/sec
subarray copy	1265748.6 Ops/sec
slice copy	1169896.8 Ops/sec
subarray set	1191865.9 Ops/sec
slice set	1147732.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's being tested on MeasureThat.net.

The provided benchmark compares different approaches to create a copy of a subset of an array or subarray in JavaScript:

1. **Slice vs Subarray**: This comparison tests two popular methods for creating a new array or subarray from an existing one:
	* `slice()`: Returns a new array containing the elements from the specified start index up to (but not including) the end index.
	* `subArray()` (note: this is not a standard JavaScript method; it's likely a custom implementation): Creates a new subarray of the original array, excluding the elements before the start index and up to (but not including) the end index.
2. **Set**: This option uses the `set()` method on a new Float32Array instance to copy a subset of an existing array or subarray:
	* `new Float32Array(10).set(f32.subarray(10, 20));` creates a new Float32Array with 10 elements and sets their values by copying the corresponding elements from `f32.subarray(10, 20)`.
3. **Copy using slice()**: Similar to the first option but uses `slice()` for creating a new array or subarray.
4. **Copy using subArray()**: As mentioned earlier, this is not a standard JavaScript method and is likely a custom implementation.

**Pros and Cons:**

*   **Slice vs Subarray (custom)**:
    *   **Pros**:
        *   Standardized and widely supported across browsers and platforms.
        *   More readable code with explicit indexing.
    *   **Cons**:
        *   May not be as efficient as other methods due to the need for explicit indexing.
*   **Set**: 
    *   **Pros**:
        *   Efficient, as it directly copies data without the overhead of creating a new array or subarray.
        *   Concise code with fewer lines compared to `slice()` and custom `subArray()`.
    *   **Cons**:
        *   Less readable due to the use of `set()`, which may require more context for understanding its purpose.
*   **Copy using slice()**:
    *   **Pros**:
        *   Concise code with fewer lines compared to `subArray()` and custom implementation.
    *   **Cons**:
        *   May not be as efficient due to the need to create a new array or subarray.
*   **Copy using subArray() (custom)**:
    *   **Pros**: None mentioned in the provided benchmark.
    *   **Cons**: Not a standard JavaScript method, which may make it less readable and less supported across browsers and platforms.

**Other considerations:**

1.  Performance: The `set()` method is likely to be the fastest option due to its direct copying approach. However, this assumes that the resulting array or subarray can fit in memory without significant copying overhead.
2.  Memory usage: Be mindful of memory usage when creating large arrays or subarrays to avoid potential issues with memory allocation and garbage collection.
3.  Code readability: Use the method that best fits your specific use case while maintaining code readability.

In conclusion, this benchmark provides a valuable comparison of different approaches for creating copies of array subsets in JavaScript, highlighting the trade-offs between efficiency, conciseness, and readability.

Related benchmarks:

slice vs subarray vs set (version: 0)

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

Created: 6 years 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 llama3.2:3b, generated 2 months ago):