Benchmark: Cloning benchmarking (with anonymous functions)

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

AخA
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Tests:

JSON.parse(JSON.stringify())

const base = {
	firstName: 'John',
  lastName: 'Doe',
  size: 170,
  birthDate: new Date(1985, 0,15),
  married: true,
  address: {
  	street: '2 av Victor Hugo',
    country: 'FR',
  },
  childrens: [
  	{
    	name: 'Paul',
      age: 8,
    },
  ],
  functions: [
  	function () { return 'Base function' },
  ],
};
const copy = JSON.parse(JSON.stringify(base));

 
const base = {    firstName: 'John',  lastName: 'Doe',  size: 170,  birthDate: new Date(1985, 0,15),  married: true,  address: {    street: '2 av Victor Hugo',    country: 'FR',  },  childrens: [    {        name: 'Paul',      age: 8,    },  ],  functions: [    function () { return 'Base function' },  ],};const copy = JSON.parse(JSON.stringify(base));

Custom function

function clone(aObject) {
  // Prevent undefined objects
  // if (!aObject) return aObject;

  let bObject = Array.isArray(aObject) ? [] : {};

  let value;
  for (const key in aObject) {

    // Prevent self-references to parent object
    // if (Object.is(aObject[key], aObject)) continue;

    value = aObject[key];

    bObject[key] = (typeof value === "object") ? clone(value) : value;
  }

  return bObject;
};
// base object
const base = {
	firstName: 'John',
  lastName: 'Doe',
  size: 170,
  birthDate: new Date(1985, 0,15),
  married: true,
  address: {
  	street: '2 av Victor Hugo',
    country: 'FR',
  },
  childrens: [
  	{
    	name: 'Paul',
      age: 8,
    },
  ],
  functions: [
  	function () { return 'Base function' },
  ],
};
const copy = clone(base);

​x
 
function clone(aObject) {  // Prevent undefined objects  // if (!aObject) return aObject;​  let bObject = Array.isArray(aObject) ? [] : {};​  let value;  for (const key in aObject) {​    // Prevent self-references to parent object    // if (Object.is(aObject[key], aObject)) continue;​    value = aObject[key];​    bObject[key] = (typeof value === "object") ? clone(value) : value;  }​  return bObject;};// base objectconst base = {    firstName: 'John',  lastName: 'Doe',  size: 170,  birthDate: new Date(1985, 0,15),  married: true,  address: {    street: '2 av Victor Hugo',    country: 'FR',  },  childrens: [    {        name: 'Paul',      age: 8,    },  ],  functions: [    function () { return 'Base function' },  ],};const copy = clone(base);

Lodash.cloneDeep()

const base = {
	firstName: 'John',
  lastName: 'Doe',
  size: 170,
  birthDate: new Date(1985, 0,15),
  married: true,
  address: {
  	street: '2 av Victor Hugo',
    country: 'FR',
  },
  childrens: [
  	{
    	name: 'Paul',
      age: 8,
    },
  ],
  functions: [
  	function () { return 'Base function' },
  ],
};
const copy = _.cloneDeep(base);

 
const base = {    firstName: 'John',  lastName: 'Doe',  size: 170,  birthDate: new Date(1985, 0,15),  married: true,  address: {    street: '2 av Victor Hugo',    country: 'FR',  },  childrens: [    {        name: 'Paul',      age: 8,    },  ],  functions: [    function () { return 'Base function' },  ],};const copy = _.cloneDeep(base);

jQuery.extend(true)

const base = {
	firstName: 'John',
  lastName: 'Doe',
  size: 170,
  birthDate: new Date(1985, 0,15),
  married: true,
  address: {
  	street: '2 av Victor Hugo',
    country: 'FR',
  },
  childrens: [
  	{
    	name: 'Paul',
      age: 8,
    },
  ],
  functions: [
  	function () { return 'Base function' },
  ],
};
const copy = jQuery.extend(true, {}, base);

 
const base = {    firstName: 'John',  lastName: 'Doe',  size: 170,  birthDate: new Date(1985, 0,15),  married: true,  address: {    street: '2 av Victor Hugo',    country: 'FR',  },  childrens: [    {        name: 'Paul',      age: 8,    },  ],  functions: [    function () { return 'Base function' },  ],};const copy = jQuery.extend(true, {}, base);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
JSON.parse(JSON.stringify())
Custom function
Lodash.cloneDeep()
jQuery.extend(true)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 113 on Windows

View result in a separate tab

Test name	Executions per second
JSON.parse(JSON.stringify())	244468.1 Ops/sec
Custom function	509495.2 Ops/sec
Lodash.cloneDeep()	371343.7 Ops/sec
jQuery.extend(true)	410452.3 Ops/sec

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

Let's dive into the world of benchmarking and explore what's being tested on MeasureThat.net.

Benchmark Definition

The benchmark is designed to compare the performance of four different methods for cloning an object:

Spread operator (...): This method uses the spread operator to create a new copy of the original object.
JSON.parse(JSON.stringify()): This method uses JSON serialization and deserialization to clone the object.
Custom function: A custom function is provided that manually clones the object by iterating over its properties and recursively cloning any nested objects.
Lodash's cloneDeep(): This method is a part of the popular Lodash library, which provides a function for deeply cloning objects.

Options Compared

The benchmark compares the performance of these four methods, including:

The time it takes to execute each test case
The number of executions per second (ExecutionsPerSecond)

Pros and Cons of Each Method

Here's a brief overview of each method's pros and cons:

Spread operator (...):
- Pros: Simple, concise, and efficient.
- Cons: May not work as expected for complex objects or nested arrays.
JSON.parse(JSON.stringify()):
- Pros: Works well for simple objects and can handle nested arrays.
- Cons: Can be slow for large objects due to the overhead of JSON serialization and deserialization.
Custom function:
- Pros: Provides a high degree of control over the cloning process, which can be beneficial for complex objects.
- Cons: Manual and error-prone, with a higher chance of introducing bugs.
Lodash's cloneDeep():
- Pros: Part of a well-maintained library with extensive testing, providing a reliable and efficient cloning solution.
- Cons: Requires external dependency (Lodash) and may not be suitable for very large objects.

Benchmark Results

The latest benchmark results show the performance differences between these methods:

Custom function: 509495.1875 executions per second
jQuery.extend(true): 410452.34375 executions per second
Lodash's cloneDeep(): 371343.65625 executions per second
JSON.parse(JSON.stringify()): 244468.109375 executions per second

As expected, the custom function and jQuery.extend(true) perform relatively well, while Lodash's cloneDeep() and JSON.parse(JSON.stringify()) are slower due to their additional overhead.

In conclusion, this benchmark provides valuable insights into the performance characteristics of different object cloning methods. While the spread operator is simple and efficient for small objects, it may not be suitable for complex cases. The custom function and jQuery.extend(true) provide a good balance between control and performance, while Lodash's cloneDeep() is a reliable but slower option due to its added dependency.

LLMs can make mistakes. Check important info.

Let's dive into the world of benchmarking and explore what's being tested on MeasureThat.net.

**Benchmark Definition**

The benchmark is designed to compare the performance of four different methods for cloning an object:

1. **Spread operator (`...`)**: This method uses the spread operator to create a new copy of the original object.
2. **`JSON.parse(JSON.stringify())`**: This method uses JSON serialization and deserialization to clone the object.
3. **Custom function**: A custom function is provided that manually clones the object by iterating over its properties and recursively cloning any nested objects.
4. **Lodash's `cloneDeep()`**: This method is a part of the popular Lodash library, which provides a function for deeply cloning objects.

**Options Compared**

The benchmark compares the performance of these four methods, including:

* The time it takes to execute each test case
* The number of executions per second (ExecutionsPerSecond)

**Pros and Cons of Each Method**

Here's a brief overview of each method's pros and cons:

1. **Spread operator (`...`)**:
	* Pros: Simple, concise, and efficient.
	* Cons: May not work as expected for complex objects or nested arrays.
2. **`JSON.parse(JSON.stringify())`**:
	* Pros: Works well for simple objects and can handle nested arrays.
	* Cons: Can be slow for large objects due to the overhead of JSON serialization and deserialization.
3. **Custom function**:
	* Pros: Provides a high degree of control over the cloning process, which can be beneficial for complex objects.
	* Cons: Manual and error-prone, with a higher chance of introducing bugs.
4. **Lodash's `cloneDeep()`**:
	* Pros: Part of a well-maintained library with extensive testing, providing a reliable and efficient cloning solution.
	* Cons: Requires external dependency (Lodash) and may not be suitable for very large objects.

**Benchmark Results**

The latest benchmark results show the performance differences between these methods:

* Custom function: 509495.1875 executions per second
* jQuery.extend(true): 410452.34375 executions per second
* Lodash's `cloneDeep()`: 371343.65625 executions per second
* `JSON.parse(JSON.stringify())`: 244468.109375 executions per second

As expected, the custom function and jQuery.extend(true) perform relatively well, while Lodash's `cloneDeep()` and `JSON.parse(JSON.stringify())` are slower due to their additional overhead.

In conclusion, this benchmark provides valuable insights into the performance characteristics of different object cloning methods. While the spread operator is simple and efficient for small objects, it may not be suitable for complex cases. The custom function and jQuery.extend(true) provide a good balance between control and performance, while Lodash's `cloneDeep()` is a reliable but slower option due to its added dependency.

Related benchmarks:

Cloning benchmarking (with anonymous functions) (version: 0)

Comparing performance of: Spread operator (...) vs JSON.parse(JSON.stringify()) vs Custom function vs Lodash.cloneDeep() vs jQuery.extend(true)

Comparing performance of: JSON.parse(JSON.stringify()) vs Custom function vs Lodash.cloneDeep() vs jQuery.extend(true)

Created: one year ago by: Guest

Jump to the latest result