CODEWITHSUNDEEP
javascriptperformancejavascript-objects
martian17
martian17

Reputation: 508

Is a deep object slow in JavaScript? If so how much

Simple question: is there a merit of using a shallow object over a deeper one? When I write a code, I tend to use a deep object just so it is easy to understand and classify. But I am wondering if this custom is making my code slower.

I have done a test but I have no idea if I am doing it correctly.

//building necessary objects
var a = {};
var b;
b = a;
for (var i = 0; i < 100; i++) {
  b["a"] = {};
  b = b["a"];
}
var c = {};

//objects used
//a.a.a. ..(101 "a"s).. .a === {}
//c === {}

//1st test: shallow
var d;
var start = performance.now();
for (var i = 0; i < 1000000000; i++) {
  d = c;
  d = null;
}
var end = performance.now();
console.log('Shallow: ' + (end - start));

//2nd test: deeper
var e;
var start = performance.now();
for (var i = 0; i < 1000000000; i++) {
  e = a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a.a;
  e = null;
}
var end = performance.now();
console.log('Deeper: ' + (end - start));

the result(ms):

shallow 3229 3304 3246 3253 3277
deep    3375 3343 3247 3193 3248

The test times for the deep object is not slow, but sometimes even faster than the shallow one. Despite the result, I am not confident enough to conclude that they are the same speed. Is there any difference between two of them?

Upvotes: 11

Views: 1304

Answers (2)

Lukas Liesis
Lukas Liesis

Reputation: 26403

  1. You are using unrealistic code to test "real code", which is nonsense
  2. You use Date.now() which is approximation to timestamp and you should use performance.now() to test js speed. Currently, even with good test code, you get wrong results.
  3. JS engines are updating all the time. There were times when deep objects were slow, it's not a case anymore for the last x years. It's such an old problem that I can't even remember the years or google anything valuable out.

Upvotes: 5

user7951676
user7951676

Reputation: 367

It is an optimisation in the js engine to access objects directly and allow for deep objects to be cashed in a variable which takes less time to reach. So it is faster to access them without having to go through the chain. For example:

var a={a:{a:{}}}
var b=a.a.a
var c=b
// is faster than 
var c=a.a.a

For more information read this: JavaScript Performance: Mutiple variables or one object?

Upvotes: 2

Related Questions