Benchmark: Lodash cloneDeep vs structuredClone vs Klona 3

HTML Preparation code:

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

Script Preparation code:

var MyObject = {
  description: 'Creates a deep copy of source, which should be an object or an array.',
  myNumber: 123456789,
  myBoolean: true,
  jayson: {
    stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
    parse: 'JSON.parse() method parses a JSON string...'
  }
};
function set(obj, key, val) {
	if (typeof val.value === 'object') val.value = klona(val.value);
	if (!val.enumerable || val.get || val.set || !val.configurable || !val.writable || key === '__proto__') {
		Object.defineProperty(obj, key, val);
	} else obj[key] = val.value;
}

function klona(val) {
	var k, out, tmp;

	if (Array.isArray(val)) {
		out = Array(k=val.length);
		while (k--) out[k] = (tmp=val[k]) && typeof tmp === 'object' ? klona(tmp) : tmp;
		return out;
	}

	if (Object.prototype.toString.call(val) === '[object Object]') {
		out = {}; // null
		for (k in val) {
			if (k === '__proto__') {
				Object.defineProperty(out, k, {
					value: klona(val[k]),
					configurable: true,
					enumerable: true,
					writable: true,
				});
			} else {
				out[k] = (tmp=val[k]) && typeof tmp === 'object' ? klona(tmp) : tmp;
			}
		}
		return out;
	}

	return val;
}

var myCopy = null;

Tests:

Native structuredClone
myCopy = structuredClone(MyObject);
Klona
myCopy = klona(MyObject);
Lodash
myCopy = _.cloneDeep(MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Native structuredClone
Klona
Lodash

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 139 on Android

View result in a separate tab

Test name	Executions per second
Native structuredClone	436626.9 Ops/sec
Klona	4342198.0 Ops/sec
Lodash	1228152.2 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 three JavaScript microbenchmarks that compare different approaches to create a deep copy of an object:

1. `structuredClone` (native)
2. `klona` (a custom library)
3. `_.cloneDeep` from Lodash

These benchmarks test the execution time and performance differences between these three methods.

**Options being compared**

* **Native structuredClone**: The built-in `structuredClone` method in modern browsers, which creates a deep copy of an object.
* **Klona**: A custom JavaScript library developed by Google to create deep copies of objects. Klona is designed to be faster and more efficient than the native `structuredClone` method.
* **Lodash _.cloneDeep**: The `_.cloneDeep` function from Lodash, a popular JavaScript utility library.

**Pros and Cons**

* **Native structuredClone**:
	+ Pros: Fast, widely supported by modern browsers, and easy to use.
	+ Cons: May not work in older browsers or versions of Internet Explorer that don't support it.
* **Klona**:
	+ Pros: Optimized for performance, designed specifically for deep copying objects, and can be used in environments where the native `structuredClone` method is not available.
	+ Cons: Requires additional setup and may require more code to use compared to native methods.
* **Lodash _.cloneDeep**:
	+ Pros: Easy to use, widely supported by JavaScript frameworks and libraries, and provides additional functionality beyond just deep copying (e.g., deep cloning of arrays).
	+ Cons: May not be as fast as Klona or native `structuredClone` in performance-critical scenarios.

**Special considerations**

* The `set` function used in the benchmark is a custom function that sets properties on an object. This function is specific to the Klona library and is designed to test the performance of deep copying objects with nested objects.
* The `klona` function uses recursive checks to ensure that all properties, including nested objects, are properly copied.

**Other alternatives**

If you need to create a deep copy of an object in JavaScript, other options include:

* Using `Object.assign()` and creating a new object with the same prototype as the original.
* Using a library like Immutable.js or Ramda.
* Implementing your own custom deep copying function using recursion or iteration.

However, these alternatives may not be as efficient or performant as the methods tested in this benchmark.

Related benchmarks:

Lodash cloneDeep vs structuredClone vs Klona 3 (version: 2)

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

Comparing performance of: Native structuredClone vs Klona vs Lodash

Created: 3 years ago by: Registered User

Jump to the latest result

Native structuredClone

Klona

Lodash

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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