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)

Historical Performance Data aggregated from 38 community runs

Desktop Results:

Chrome 32 runs

slice

7.6M/s

Spread

7.2M/s

Array from

4.3M/s

JSON.stringify

1.1M/s

structuredClone

485K/s

Fastest: slice (15.6x faster)

View exact numbers

✓ slice: 7,551,829 ops/sec
• Spread: 7,195,266 ops/sec
• Array from: 4,275,250 ops/sec
• JSON.stringify: 1,115,073 ops/sec
• structuredClone: 484,653 ops/sec

Firefox 6 runs

slice

31.4M/s

Spread

28.5M/s

Array from

14.5M/s

JSON.stringify

1.2M/s

structuredClone

757K/s

Fastest: slice (41.4x faster)

View exact numbers

✓ slice: 31,357,168 ops/sec
• Spread: 28,483,514 ops/sec
• Array from: 14,463,791 ops/sec
• JSON.stringify: 1,203,082 ops/sec
• structuredClone: 757,100 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

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

Browser/OS: Chrome 144 on Mac OS X 10.15.7

View result in a separate tab

slice

11.1M/s

Spread

10.7M/s

Array from

10.5M/s

JSON.stringify

2.0M/s

structuredClone

827K/s

View exact numbers

Test name	Executions per second
✓ slice	11,108,642 Ops/sec
Spread	10,714,845 Ops/sec
Array from	10,464,244 Ops/sec
JSON.stringify	2,007,316 Ops/sec
structuredClone	826,963 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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

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

Created: 3 years ago by: Guest

Go to the latest result

JSON.stringify

slice

Array from

Spread

structuredClone

Historical Performance Data aggregated from 38 community runs

Desktop Results:

Chrome 32 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Created: 3 years ago by: Guest

Go to the latest result

JSON.stringify

slice

Array from

Spread

structuredClone

Historical Performance Data aggregated from 38 community runs

Desktop Results:

Chrome 32 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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