JavaScript Object Reference Caching
There are many objects in our codebase that are spaced out to avoid collisions.
Example : App.local.view.MyView...
In most places I've seen in the codebase, we use the full path to get the object reference, and this is repeated multiple times within the same function.
Example :
function hello() {
App.local.view.MyView.render();
...
...
App.local.view.MyView.reset();
}
I wanted to understand by keeping the object reference below
var MyView = App.local.view.MyView;
there will be any performance improvement. What makes me ask this question is my understanding of modern browsers like chrome does automatic optimizations for us behind the scenes.
source to share
It will be an improvement, but we're talking completely dismissive .
It takes a while to find the property of an object, but it is really quite fast.
If you're doing this for performance reasons, don't .
If you're doing this to make your code more readable / maintainable, then it's OK.
EDIT:
I created a test to check this:
var data = {a: {b: {c: {d: 1}}}};
var cache = data.a.b.c.d;
// uncached 901,326,988 ±1.03% fastest
// cached 879,568,962 ±0.95% 2% slower
// Chrome 41 on OSX 10.10
Good, which is amazing!
Turns it off faster just to call
data.a.b.c.d + 1
Instead
cache + 1
I'm pretty sure it depends on the JavaScript implementation. Providing a specific reason why this is happening will be left to other geniuses digging inside the internals of js systems.
So, with my recommendations above in mind, stay the same:
If you are doing this for performance reasons, not - it is actually slower.
If you're doing this to make your code more readable / maintainable, then it's OK - the cost of execution is worth the value of clearer code.
source to share
This is implementation specific and depends heavily on the underlying JavaScript engine.
For example, the v8 engine (Chrome and possibly others) uses so called hidden classes for JavaScript objects. This has the advantage of knowing that every property of an object has a fixed offset in memory and thus accessing the object is very fast.
On the other hand, some implementations (I'm only working with node.js, so I don't have any specific browser references that use this method, but Firefox seems to use this method - see below) can use dictionaries for the property map objects to their memory cells. Dictionary lookups require more operations (more CPU cycles) and are therefore somewhat slower.
In general, however, we are talking about an extremely small difference.
To summarize, in terms of performance, this has little or no effect on the performance of your code. However, given the style of your code, it can improve the readability and maintainability of your code.
This jsperf (courtesy of @naomik) seems to support this - when launched in Chrome, the difference is around 5%, whereas for Firefox it's a whopping 29%.
source to share