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: 3 years ago by: Guest

Go 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>

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 };
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));
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);
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);
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);
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);

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Spread operator (...)

3K/s

jQuery.extend(true)

3K/s

Lodash.cloneDeep()

3K/s

structuredClone()

1K/s

Custom function

23/s

JSON.parse(JSON.stringify())

15/s

Fastest: Spread operator (...) (208.4x faster)

View exact numbers

✓ Spread operator (...): 3,160 ops/sec
• jQuery.extend(true): 2,906 ops/sec
• Lodash.cloneDeep(): 2,667 ops/sec
• structuredClone(): 1,408 ops/sec
• Custom function: 23 ops/sec
• JSON.parse(JSON.stringify()): 15 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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: one year ago)

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

Browser/OS: Chrome 139 on Windows

View result in a separate tab

jQuery.extend(true)

4K/s

Spread operator (...)

4K/s

Lodash.cloneDeep()

4K/s

structuredClone()

2K/s

Custom function

45/s

JSON.parse(JSON.stringify())

20/s

View exact numbers

Test name	Executions per second
✓ jQuery.extend(true)	3,830 Ops/sec
Spread operator (...)	3,676 Ops/sec
Lodash.cloneDeep()	3,651 Ops/sec
structuredClone()	1,867 Ops/sec
Custom function	45 Ops/sec
JSON.parse(JSON.stringify())	20 Ops/sec

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

LLMs can make mistakes. Check important info.

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: 3 years ago by: Guest

Go to the latest result

Spread operator (...)

JSON.parse(JSON.stringify())

Custom function

Lodash.cloneDeep()

jQuery.extend(true)

structuredClone()

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

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: `Spread operator (...) vs JSON.parse(JSON.stringify()) vs Custom function vs Lodash.cloneDeep() vs jQuery.extend(true) vs structuredClone()`