Benchmark: Deep copy performance

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

Script Preparation code:

var data = [];
var res = [];

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(json => data = json)

Tests:

jQuery direct extend
res = []; $.extend(true, res, data);
jQuery extend assignment
res = $.extend(true, [], data);
Lodash cloneDeep
res = _.cloneDeep(data);
JSON parse and stringify
res = JSON.parse(JSON.stringify(data));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery direct extend
jQuery extend assignment
Lodash cloneDeep
JSON parse and stringify

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 97 on Windows

View result in a separate tab

Test name	Executions per second
jQuery direct extend	20256.2 Ops/sec
jQuery extend assignment	15439.8 Ops/sec
Lodash cloneDeep	15479.3 Ops/sec
JSON parse and stringify	8984.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON benchmark data for the "Deep copy performance" test case.

**What is being tested?**

The benchmark measures the performance of different approaches to create a deep copy of an object in JavaScript. The object being copied is a JSON response from a remote server, fetched using the `fetch` API and parsed as JSON.

**Options compared:**

Four options are compared:

1. **jQuery direct extend**: Uses jQuery's `$extend` method to merge the source data into a new array.
2. **jQuery extend assignment**: Uses jQuery's `$extend` method to assign the result of merging the source data to a new array, instead of modifying the original array.
3. **Lodash cloneDeep**: Uses Lodash's `cloneDeep` function to create a deep copy of the source data.
4. **JSON parse and stringify**: Uses JSON's `parse` and `stringify` functions to create a deep copy of the source data by parsing the JSON string and then stringifying it again.

**Pros and cons of each approach:**

1. **jQuery direct extend**:
	* Pros: Simple and straightforward, leverages jQuery's existing functionality.
	* Cons: May not be optimal for large datasets due to the overhead of jQuery's library.
2. **jQuery extend assignment**:
	* Pros: Similar to jQuery direct extend but avoids modifying the original array, reducing potential side effects.
	* Cons: Still relies on jQuery's library and may not be suitable for non-JQuery environments.
3. **Lodash cloneDeep**:
	* Pros: Robust and efficient deep copying mechanism, suitable for large datasets and complex data structures.
	* Cons: Requires an additional dependency (Lodash), which may add overhead.
4. **JSON parse and stringify**:
	* Pros: Lightweight and efficient, as it only involves basic JSON parsing and stringification.
	* Cons: May not preserve all the nuances of the original data structure, especially for complex objects.

**Library usage:**

The benchmark uses jQuery (`$.extend`) and Lodash (`cloneDeep`). These libraries provide optimized implementations for common JavaScript tasks, but they also introduce additional dependencies and potential overhead.

**Special JS feature or syntax:**

None are explicitly mentioned in this benchmark. However, it's worth noting that the use of `fetch`, JSON parsing, and stringification relies on modern JavaScript features and APIs.

**Other alternatives:**

If you need to create a deep copy of an object without using libraries like jQuery or Lodash, you can implement your own solution using techniques like:

* Recursive object iteration
* Shallow/deep cloning using JavaScript's built-in `Object.assign` method
* Using a library like `lodash-es` (a lightweight alternative to Lodash)

For non-JavaScript environments or when performance is critical, other alternatives may include:

* Using a dedicated deep copying library like `js-deep-copy`
* Implementing a custom cloning mechanism using native JavaScript APIs

Keep in mind that each approach has trade-offs in terms of complexity, performance, and memory usage. The choice ultimately depends on your specific requirements and constraints.

Related benchmarks:

Deep copy performance (version: 5)

Comparing performance of: jQuery direct extend vs jQuery extend assignment vs Lodash cloneDeep vs JSON parse and stringify

Created: 5 years ago by: Registered User

Jump to the latest result

jQuery direct extend

jQuery extend assignment

Lodash cloneDeep

JSON parse and stringify

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