16

I am seeing some odd behavior in a jsperf test. Here is the setup:

var pro={};
pro._x=3;
var q=Object.create(pro);
q.x=3;
q.z={};
q.z.x=3;

Then I simply lookup each of the properties q.x, q._x, and q.z.x.

The single lookup q.x is faster than the prototype lookup q._x as expected. But the double lookup q.z.x is the fastest. I expected q.z.x to be the slowest, especially when compared to q.x.

q.z.x is even faster than q.z. What is going on here?

gloo
  • 2,490
  • 3
  • 22
  • 38
  • 19
    Compiler optimisations… – RobG Dec 01 '14 at 02:59
  • I know that are all of the same order of magnitude so not a big deal, but it doesn't make sense to me. – gloo Dec 01 '14 at 03:00
  • Firefox 32 has oposite results, proto the faster, double lookup slowest. but much faster than chrome :) – rnrneverdies Dec 01 '14 at 03:01
  • It resembles an optimization like the oldie-but-goldie `volatile`. You reference that var twice, so you'll use it extensively (or at least, the optimizer thinks that) – Alex Apr 15 '15 at 12:32
  • In revision 4 of the test http://jsperf.com/8dfns4/4 where `q.x=3` is moved to the last line, the double lookup is the slowest (Testing in Firefox 37.0). – Leonidas Kapsokalivas Apr 17 '15 at 16:28
  • I thought it was faster because `q.` has multiple siblings, whereas `q..` does not have siblings, so when doing a lookup on a property, it iterates over less items. But I was wrong about that, when adding multiple siblings to the object root, a double lookup is actually the same speed in Firefox: http://jsperf.com/8dfns4/7 – Blaise Apr 30 '15 at 10:20
  • 2
    Curious, does the order of the lookup matter? like if you do q.x after q.z.x or some other way around? – Lex Podgorny May 10 '15 at 10:50
  • depends on browser. In Safari double look up is slowest. – Said Kholov May 13 '15 at 01:53
  • see this revision of your code http://jsperf.com/8dfns4/11. – Himanshu Pandey May 20 '15 at 02:22

1 Answers1

1

The thing that makes the deeper lookup be faster is the fact that the JavaScript engine is able to better optimise the code for performance, as it knows exactly what object it is receiving.

Unlike using Object.create, where the engine is unable to perform its regular optimisation cycle, using a plain old empty object to initialise the z property of the q object, basically allows the engine to allocate appropriate memory and index it accordingly.

This piece of code var q=Object.create(pro); basically tells the JS engine: "Hey, you're getting an instance of an Object but I don't have a clue what type it is. Could be an Array, Objec, RegExp, Date.", while this piece of code -- q.z={}; says -- "Hey, you're getting an Object object here! Make sure to put aside some memory in accordance to this datatype".

Adrian Oprea
  • 2,360
  • 3
  • 21
  • 23