Benchmark: slice vs subarray vs set vs copy

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 = 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));
copy
var copy = new Float32Array(f32);

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
copy

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.4 Safari/605.1.15

Browser/OS: Safari 16 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
subarray direct	5782273.5 Ops/sec
slice direct	6162650.5 Ops/sec
subarray copy	2829094.8 Ops/sec
slice copy	3025900.2 Ops/sec
subarray set	2981960.5 Ops/sec
slice set	3078381.8 Ops/sec
copy	3545215.5 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 in this specific benchmark.

**Benchmark Overview**

The benchmark compares the performance of four approaches to create a subset or copy of an existing array:

1. `slice` (or `.slice()` method)
2. `subarray` (or `.subarray()` method)
3. Creating a new array using `Float32Array` and then setting its elements
4. Creating a new array using `Float32Array` and copying the original array's elements

**Options Being Compared**

Here are the options being compared, along with their pros and cons:

1. **slice**
	* Pros: Simple and intuitive API, widely supported by browsers.
	* Cons: Can be slower than other methods due to the creation of a new DOM element or substring object.
2. **subarray**
	* Pros: Similar to `slice` but creates a new `DOM Substring` object, which can be faster for large arrays.
	* Cons: Less intuitive API and not as widely supported by browsers as `slice`.
3. **Create a new array using Float32Array and set its elements**
	* Pros: Can be faster than the other methods since it involves creating a new array with the desired size, which can take advantage of CPU caching.
	* Cons: Requires more code and is less intuitive than other methods.
4. **Create a new array using Float32Array and copying the original array's elements**
	* Pros: Similar to option 3 but uses a simpler API.
	* Cons: May be slower due to the overhead of creating a copy.

**Library Usage**

The benchmark uses the `Float32Array` class, which is a part of the Web API for working with floating-point numbers. `Float32Array` provides an efficient way to manipulate arrays of 32-bit floating-point numbers and is commonly used in graphics, audio, and scientific computing applications.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax mentioned in this benchmark. All methods rely on standard JavaScript array operations.

**Other Alternatives**

If you're interested in exploring other performance optimization techniques for arrays, consider the following:

1. **Array.prototype.map()**: This method can be faster than slicing or using `subarray()` for small to medium-sized arrays.
2. **Array.prototype.splice()**: This method can be faster than creating a new array by concatenating elements when working with large datasets.
3. ** Typed Arrays**: Other types of typed arrays, such as Int32Array, Uint8Array, or Float64Array, may offer better performance depending on your specific use case.

Keep in mind that the best approach will depend on your specific requirements and use case. Always consider profiling and benchmarking your code to determine the most efficient solution for your problem.

Related benchmarks:

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

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

Created: one year ago by: Guest

Jump to the latest result

subarray direct

slice direct

subarray copy

slice copy

subarray set

slice set

copy

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):