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]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON.stringify
slice
Array from
Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Linux

View result in a separate tab

Test name	Executions per second
JSON.stringify	1442503.9 Ops/sec
slice	9405252.0 Ops/sec
Array from	5418190.5 Ops/sec
Spread	8670161.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a platform for creating and running JavaScript microbenchmarks. The provided JSON benchmark definition compares the performance of different methods for copying an array in JavaScript: `JSON.stringify`, `slice`, `Array.from`, `spread` (also known as destructuring), and `structuredClone`. Let's dive into each method, their pros and cons, and other considerations.

**Methods being compared**

1. **JSON.stringify**
2. **slice**
3. **Array.from**
4. **Spread** (destructuring)
5. **structuredClone**

**Pros and Cons of each approach:**

*   **JSON.stringify**: This method serializes the entire array into a JSON string, which can be slow for large arrays.
    *   Pros: Works well with nested objects, easy to implement.
    *   Cons: Slow performance, consumes more memory.
*   **slice**: Creates a shallow copy of a portion of an array. It's efficient but only creates a new array, not a deep copy.
    *   Pros: Fast performance, minimal memory allocation.
    *   Cons: Only creates a shallow copy, may not work with nested objects.
*   **Array.from**
    *   Pros: Works well with both arrays and sets, allows for mapping and filtering options.
    *   Cons: May have performance overhead due to the need to create an iterator.
*   **Spread** (destructuring): Creates a shallow copy of an array by spreading its elements into a new array.
    *   Pros: Fast performance, creates a shallow copy like `slice`.
    *   Cons: Only works with arrays, not sets or other data structures.
*   **structuredClone**: Creates a deep copy of a value using the `Structured Clone` algorithm. This method is designed for cloning complex objects.
    *   Pros: Deep copying, supports cloning nested objects and arrays.
    *   Cons: May be slower than `slice` or spread, may not work with all data types.

**Libraries used**

None are explicitly mentioned in the provided benchmark definition, but `structuredClone` is a built-in JavaScript function introduced in ECMAScript 2022 (ES12).

**Special JS features/syntax**

None are explicitly mentioned in the provided benchmark definition.

**Other alternatives**

*   **Object.assign()**: Creates a shallow copy of an array by assigning its elements to a new object.
    *   Pros: Works well with arrays and objects, allows for mapping options.
    *   Cons: May have performance overhead due to the need to create a new object.
*   **Array.prototype.map()**: Creates a new array with the results of applying a provided function on every element in this array.
    *   Pros: Allows for transformation of data, works well with arrays and sets.
    *   Cons: May have performance overhead due to the use of functions.

**Benchmarking considerations**

*   **Array size**: The benchmark definition doesn't specify an array size. However, the choice of array size can significantly impact performance results. Larger arrays may favor more efficient copying methods like `slice` or spread.
*   **Browser and JavaScript engine**: Different browsers and JavaScript engines may have varying performance characteristics for each method being compared.
*   **Execution count**: The number of executions per second is reported in the benchmark result, which can be affected by factors such as browser cache, disk I/O, and network latency.

**Future benchmarks**

In the future, MeasureThat.net could consider adding new methods to the comparison, such as:

*   **Array.prototype.reduce()**
*   **Array.prototype.forEach()**
*   **Array.prototype.entries()**
*   **Array.prototype.sort()**

Additionally, exploring different data structures like sets, maps, or objects of other types might provide more comprehensive results.

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

Created: one year ago by: Guest

Jump to the latest result

JSON.stringify

slice

Array from

Spread

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