8

Let's say I have a variable nested deeply within a massive object which I re-use quite often:

i = 10000000;
while (i) {
    i--;
    document.write( bigobject.a.b.c.d.e.f.g.h.i.j.k.l.m.n.o.p );
}

Would it be faster to cache it in a new variable outside of the loop?

v = bigobject.a.b.c.d.e.f.g.h.i.j.k.l.m.n.o.p

and use that cached variable in my loop?

document.write ( v );

For the less visually oriented: Are JavaScript variables cached automatically or does the browser have to search through the larger variable each time it's requested?

Improve this question
1
  • most are cached, but if there's a getter in the path, like is common with the DOM and expandos, everything to the right has to be re-gathered. Commented Jun 29, 2013 at 4:56

2 Answers 2

Reset to default
9

As with all performance questions of importance, it is always best to test your specific situation in a tool like jsperf.com so you can measure the exact situation you care about and you should also run the test in multiple browsers to make sure what you're measuring is a general characteristic of the language implementation, not just a peculiarity to one browser.

In answer to your question, it is generally faster to cache a deep object reference if you are going to be accessing it multiple times.

In the specific example, I coded here: http://jsperf.com/cache-deep-reference, the cached reference was more than 2x faster in chrome and more than 4x faster in IE10.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

jsperf.com/cachedeepprops, i added it. No big perf gain. But my loops are small.
in fact even for multiple accesses, there is no big gain in performance, when compared with cached one.
@TamilVendhan - that's why my answer states that each performance issue of consequence must be measured. I measured the particular example the OP used and it does make a measurable difference. Other situations may have different outcomes. In your particular case, console.log() is a bad thing to use in a performance testing loop because it's quite slow and can easily mask what you are actually trying to measure.
I am just sharing my observations & opinions :-) I accept your view & I know its right, when it comes for performance.
Yes, console.log is really a bad thing. Once i removed it, things become faster & the results are now completely different.
1

I know that this is already answered however, I just made my own test for this and thought that someone on SO may find it useful:

ClassCreate('app').props.set('cipher', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'x', 'y', 'z']);

perfTest({
    ns: 'noCache',
    fn: function() {
        for (var i = 0; i < 500; i++) {
            console.log(app.props.get('cipher'));
        }
    }
});

perfTest({
    ns: 'cached',
    fn: function() {
        var cipher = app.props.get('cipher');
        for (var i = 0; i < 500; i++) {
            console.log(cipher);
        }
    }
});

RESULTS

Cached variable x500: 812.261ms

Direct access to object in same x500 loop: 1050.416ms

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.