Benchmark: angular.copy vs JSON.parse(JSON.stringify()) vs angular.fromJson(angular.toJson())

angular.copy vs JSON.parse(JSON.stringify()) vs angular.fromJson(angular.toJson()) (version: 0)

FIguring out the performance differences between using the operations in the name on copying an array of objects considering the fact that other methods of copying (slice, concat, etc.) are shallow copies and end up being by reference instead of by value.

Comparing performance of: angular.copy() vs JSON.parse(JSON.stringify()) vs _.colneDeep() vs angular.fromJson(angular.toJson())

Created: 6 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
  </head>
  <body>
  </body>
</html>

Script Preparation code:

var origArr = [
 {
  name  : "obj1",
  val   : 1,
  color : "blue"
 },
  {
  name  : "obj2",
  val   : 2,
  color : "red"
 },
  {
  name  : "obj3",
  val   : 3,
  color : "green"
 },
  {
  name  : "obj4",
  val   : 4,
  color : "orange"
 }
];

var newArr = [];

Tests:

angular.copy()
newArr = angular.copy(origArr);
JSON.parse(JSON.stringify())
newArr = JSON.parse(JSON.stringify(origArr));
_.colneDeep()
newArr = _.cloneDeep(origArr);
angular.fromJson(angular.toJson())
newArr = angular.fromJson(angular.toJson(origArr));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
angular.copy()
JSON.parse(JSON.stringify())
_.colneDeep()
angular.fromJson(angular.toJson())

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

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/102.0.5005.63 Safari/537.36

Browser/OS: Chrome 102 on Windows

View result in a separate tab

Test name	Executions per second
angular.copy()	474922.6 Ops/sec
JSON.parse(JSON.stringify())	290349.8 Ops/sec
_.colneDeep()	285128.5 Ops/sec
angular.fromJson(angular.toJson())	189181.5 Ops/sec

angular.copy vs JSON.parse(JSON.stringify()) vs angular.fromJson(angular.toJson()) (version: 0)

FIguring out the performance differences between using the operations in the name on copying an array of objects considering the fact that other methods of copying (slice, concat, etc.) are shallow copies and end up being by reference instead of by value.

Comparing performance of: angular.copy() vs JSON.parse(JSON.stringify()) vs _.colneDeep() vs angular.fromJson(angular.toJson())

Created: 6 years ago by: Guest

Jump to the latest result

angular.copy()

JSON.parse(JSON.stringify())

_.colneDeep()

angular.fromJson(angular.toJson())

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A