Benchmark: JSON stringify vs slice vs structuredClone vs spread vs Array from

Script Preparation code:

var vertices = [
      [1, 0, 0, 0],
      [0, 1, 0, 0],
      [0, 0, 1, 0],
      [0, 0, 0, 1],
    ]

var myCopy = null;

Tests:

JSON.stringify
myCopy = JSON.parse(JSON.stringify(vertices));
slice
myCopy = vertices.slice();
Array from
myCopy = Array.from(vertices)
Spread
myCopy = [...vertices]
structuredClone
myCopy = structuredClone(vertices)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON.stringify
slice
Array from
Spread
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 days ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
JSON.stringify	1211291.1 Ops/sec
slice	5408973.5 Ops/sec
Array from	3638824.2 Ops/sec
Spread	4982323.0 Ops/sec
structuredClone	494946.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explore what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark measures the performance of different methods for creating a copy of an array in JavaScript:

1. `JSON.stringify`
2. `slice()`
3. `Array.from()`
4. Spread operator (`[...vertices]`)
5. `structuredClone`

**Library and Special JS Feature**

None of these methods rely on any specific library or special JavaScript feature. They are all built-in or widely supported by most modern browsers.

**Benchmark Preparation Code**

The script preparation code initializes an array `vertices` with four 3D vertices, which will be used as input for the benchmarking tests.

**Individual Test Cases**

Each test case measures the performance of a specific method for creating a copy of the `vertices` array. The methods being tested are:

1. `JSON.stringify`: Converts the entire array to a string using JSON serialization.
2. `slice()`: Creates a shallow copy of the array by copying its elements one by one.
3. `Array.from()`: Creates a new array from an iterable (in this case, the `vertices` array).
4. Spread operator (`[...vertices]`): Spreads the elements of the `vertices` array into a new array using the spread syntax.
5. `structuredClone`: A relatively new method introduced in ECMAScript 2022, which creates a deep copy of an object or array.

**Comparison and Performance**

The benchmark measures the execution frequency per second (in executions per second) for each test case across multiple browsers and devices. The results show that:

* `slice()` is the fastest way to create a shallow copy of an array.
* The spread operator (`[...vertices]`) is comparable in performance to `Array.from()`, but slightly slower than `slice()`.
* `structuredClone` is significantly faster than `JSON.stringify`, making it a good choice for deep copying arrays.
* `Array.from()` is slower than both `slice()` and the spread operator.

**Pros and Cons**

Here's a brief summary of the pros and cons of each method:

1. **slice()**:
	* Fast, but only creates a shallow copy.
	* Can be slow if the array is very large.
2. **Array.from()**:
	* Creates a new array with deep copies by default (although this can be customized).
	* Slightly slower than `slice()` and the spread operator.
3. **Spread operator (`[...vertices]`)**:
	* Fast, but only creates a shallow copy.
	* Can be slow if the array is very large.
4. **structuredClone**:
	+ Fast for deep copying arrays.
	- Only available in ECMAScript 2022 and later browsers.
5. **JSON.stringify**:
	+ Slow due to string conversion overhead.
	- Only creates a shallow copy.

**Alternatives**

If you need to create a deep copy of an array, `structuredClone` is likely the best choice. For shallow copying, `slice()` or the spread operator are good options. If you're targeting older browsers, `Array.from()` might be a suitable alternative.

Keep in mind that these results may vary depending on your specific use case and requirements. It's essential to consider factors like array size, performance criticality, and compatibility with different browsers when choosing an approach.

Related benchmarks:

JSON stringify vs slice vs structuredClone vs spread vs Array from (version: 0)

Comparing performance of: JSON.stringify vs slice vs Array from vs Spread vs structuredClone

Created: one year ago by: Guest

Jump to the latest result

JSON.stringify

slice

Array from

Spread

structuredClone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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