Benchmark: JS Cloning benchmarking

JS Cloning benchmarking (version: 0)

Comparing performance of: Spread operator (...) vs JSON.parse(JSON.stringify()) vs Custom function vs Lodash.cloneDeep() vs jQuery.extend(true) vs structuredClone() By cloning a complex object with nested specific objects (ArrayBuffer, Set, Map, RegExp, etc.)

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

Created: one year ago by: Guest

Jump to the latest result

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:

Spread operator (...)

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: [],
  otherObjs: {
  	mySet: new Set(["a","b","c"]),
    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),
    myErr: new Error("Oups !"),
    myReg: new RegExp(/ab+c/, "i"),
    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),
    myFile: new File([""], "filename"),
    myArrBuff: new ArrayBuffer(8),
    myImgData: new ImageData(300, 300),
  },
}
const copy = { ...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: [],  otherObjs: {    mySet: new Set(["a","b","c"]),    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),    myErr: new Error("Oups !"),    myReg: new RegExp(/ab+c/, "i"),    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),    myFile: new File([""], "filename"),    myArrBuff: new ArrayBuffer(8),    myImgData: new ImageData(300, 300),  },}const copy = { ...base };

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: [],
  otherObjs: {
  	mySet: new Set(["a","b","c"]),
    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),
    myErr: new Error("Oups !"),
    myReg: new RegExp(/ab+c/, "i"),
    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),
    myFile: new File([""], "filename"),
    myArrBuff: new ArrayBuffer(8),
    myImgData: new ImageData(300, 300),
  },
}
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: [],  otherObjs: {    mySet: new Set(["a","b","c"]),    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),    myErr: new Error("Oups !"),    myReg: new RegExp(/ab+c/, "i"),    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),    myFile: new File([""], "filename"),    myArrBuff: new ArrayBuffer(8),    myImgData: new ImageData(300, 300),  },}const copy = JSON.parse(JSON.stringify(base));

Custom function

function myClone(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") ? myClone(value) : value;
  }
  return bObject;
};
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: [],
  otherObjs: {
  	mySet: new Set(["a","b","c"]),
    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),
    myErr: new Error("Oups !"),
    myReg: new RegExp(/ab+c/, "i"),
    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),
    myFile: new File([""], "filename"),
    myArrBuff: new ArrayBuffer(8),
    myImgData: new ImageData(300, 300),
  },
}
const copy = myClone(base);

 
function myClone(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") ? myClone(value) : value;  }  return bObject;};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: [],  otherObjs: {    mySet: new Set(["a","b","c"]),    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),    myErr: new Error("Oups !"),    myReg: new RegExp(/ab+c/, "i"),    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),    myFile: new File([""], "filename"),    myArrBuff: new ArrayBuffer(8),    myImgData: new ImageData(300, 300),  },}const copy = myClone(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: [],
  otherObjs: {
  	mySet: new Set(["a","b","c"]),
    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),
    myErr: new Error("Oups !"),
    myReg: new RegExp(/ab+c/, "i"),
    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),
    myFile: new File([""], "filename"),
    myArrBuff: new ArrayBuffer(8),
    myImgData: new ImageData(300, 300),
  },
}
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: [],  otherObjs: {    mySet: new Set(["a","b","c"]),    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),    myErr: new Error("Oups !"),    myReg: new RegExp(/ab+c/, "i"),    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),    myFile: new File([""], "filename"),    myArrBuff: new ArrayBuffer(8),    myImgData: new ImageData(300, 300),  },}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: [],
  otherObjs: {
  	mySet: new Set(["a","b","c"]),
    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),
    myErr: new Error("Oups !"),
    myReg: new RegExp(/ab+c/, "i"),
    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),
    myFile: new File([""], "filename"),
    myArrBuff: new ArrayBuffer(8),
    myImgData: new ImageData(300, 300),
  },
}
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: [],  otherObjs: {    mySet: new Set(["a","b","c"]),    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),    myErr: new Error("Oups !"),    myReg: new RegExp(/ab+c/, "i"),    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),    myFile: new File([""], "filename"),    myArrBuff: new ArrayBuffer(8),    myImgData: new ImageData(300, 300),  },}const copy = jQuery.extend(true, {}, base);

structuredClone()

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: [],
  otherObjs: {
  	mySet: new Set(["a","b","c"]),
    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),
    myErr: new Error("Oups !"),
    myReg: new RegExp(/ab+c/, "i"),
    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),
    myFile: new File([""], "filename"),
    myArrBuff: new ArrayBuffer(8),
    myImgData: new ImageData(300, 300),
  },
}
const copy = structuredClone(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: [],  otherObjs: {    mySet: new Set(["a","b","c"]),    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),    myErr: new Error("Oups !"),    myReg: new RegExp(/ab+c/, "i"),    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),    myFile: new File([""], "filename"),    myArrBuff: new ArrayBuffer(8),    myImgData: new ImageData(300, 300),  },}const copy = structuredClone(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
Spread operator (...)
JSON.parse(JSON.stringify())
Custom function
Lodash.cloneDeep()
jQuery.extend(true)
structuredClone()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Windows

View result in a separate tab

Test name	Executions per second
Spread operator (...)	19177.8 Ops/sec
JSON.parse(JSON.stringify())	13989.3 Ops/sec
Custom function	5.9 Ops/sec
Lodash.cloneDeep()	9801.1 Ops/sec
jQuery.extend(true)	18136.2 Ops/sec
structuredClone()	1928.4 Ops/sec

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

It looks like you're presenting benchmark results for different JavaScript operations.

To summarize, the results show that:

The Spread operator (...) is currently the fastest, with an execution rate of 19177.76 executions per second.
The jQuery.extend(true) operation is also relatively fast, with an execution rate of 18136.24 executions per second.
The JSON.parse(JSON.stringify()) operation is slower than both of these, with an execution rate of 9801.09 executions per second.
The Lodash.cloneDeep() operation has the lowest execution rate of all, at 1928.35 executions per second.
The structuredClone() function has a similar execution rate to Lodash's cloneDeep, at around 1928.35 executions per second.

Overall, it seems that the spread operator is currently the fastest way to create a deep copy in JavaScript!

LLMs can make mistakes. Check important info.

Related benchmarks: