Benchmark: compare slice vs structuredClone

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var testArray = [{
  description: 'Random description.',
  testNumber: 123456789,
  testBoolean: true,
  testObject: {
    testString: 'test string',
    testNumber: 12345
  },
  testArray: [{
    myName: 'test name',
    myNumber: 123245
  }]
},{
  description: 'Random description.',
  testNumber: 123456789,
  testBoolean: true,
  testObject: {
    testString: 'test string',
    testNumber: 12345
  },
  testArray: [{
    myName: 'test name',
    myNumber: 123245
  }]
}];
var testCopy = null;

var deepClone = function(obj) {
   var out;
    if (Array.isArray(obj)) {
        out = [];
        for (var index = 0; index < obj.length; ++index) {
            let subArray = obj[index];
            out.push((subArray === null) ? subArray : (subArray instanceof Date) ? new Date(subArray.valueOf()) : (typeof subArray === 'object') ? deepClone(subArray) : subArray);
        }
    } else {
        out = {};
        for (var key in obj) {
            var subObject = obj[key];
            out[key] = subObject === null ? subObject : subObject instanceof Date ? new Date(subObject.valueOf()) : (typeof subObject === 'object') ? deepClone(subObject) : subObject;
            
           
        }
    }
    return out;
};

Tests:

structuredClone
testCopy = structuredClone(testArray);
slice
testCopy = testArray.slice(0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
structuredClone
slice

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/26.0.1 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

slice

157.4M/s

structuredClone

458K/s

View exact numbers

Test name	Executions per second
✓ slice	157,404,000 Ops/sec
structuredClone	458,455 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.

**What is being tested?**

The provided JSON represents two test cases that compare the performance of `slice()` and `structuredClone()` functions in JavaScript.

**Options compared:**

* `slice()`: A built-in JavaScript method that creates a shallow copy of a portion of an array, starting from the specified index.
* `structuredClone()`: A new JavaScript function introduced in ECMAScript 2022 (ES12) that creates a deep clone of an object, including all its nested properties and arrays.

**Pros and Cons:**

1. **`slice()`**:
	* Pros:
		+ Widely supported by most browsers.
		+ Fast execution time due to native implementation.
	* Cons:
		+ Creates only a shallow copy, which might not be suitable for all use cases (e.g., when dealing with complex data structures).
2. **`structuredClone()`**:
	* Pros:
		+ Ensures deep cloning of objects and arrays, making it more suitable for complex data structures.
		+ More efficient than `slice()` for large datasets due to its native implementation in modern browsers.
	* Cons:
		+ Less widely supported by older browsers (only Chrome 128 is reported in the benchmark result).
		+ Might have slightly slower execution times compared to `slice()`.

**Library and purpose:**

The provided HTML Preparation Code includes a link to Lodash, a popular JavaScript utility library. However, it's not being used in this specific benchmark. Instead, the test cases rely on built-in functions (`slice()` and `structuredClone()`) or a custom implementation of `structuredClone()`.

**Special JS features or syntax:**

There are no special JavaScript features or syntax mentioned in this benchmark.

**Other considerations:**

* The benchmark is designed to compare the performance of two cloning methods, which might be useful for developers working with complex data structures.
* The use of a custom implementation of `structuredClone()` adds another variable to consider when analyzing the results.

**Alternatives:**

If you need to clone arrays or objects in JavaScript and don't have access to `slice()` or `structuredClone()`, other alternatives include:

1. Using a library like Lodash, which provides various cloning functions.
2. Implementing your own cloning logic using recursion or iteration.
3. Using a framework like React or Angular, which often provide built-in cloning mechanisms for components and data structures.

Keep in mind that the choice of cloning method depends on the specific requirements of your project and the trade-offs you're willing to make between performance, compatibility, and maintainability.

compare slice vs structuredClone (version: 0) Benchmark.js

Comparing performance of: `structuredClone vs slice`

Created: 3 years ago by: Guest

Go to the latest result

structuredClone

slice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

compare slice vs structuredClone (version: 0) Benchmark.js

Comparing performance of: structuredClone vs slice

Created: 3 years ago by: Guest

Go to the latest result

structuredClone

slice

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: `structuredClone vs slice`