2

Concretely, is this code:

var style = el.style;
var x = style.left;
var y = style.top;

more efficient than this one:

var x = el.style.left;
var y = el.style.top;

I had a talk with a colleague about this recently. The first snippet saves a getter call because it caches the style object, but it creates one more reference to the style object and uses one more variable.

Hannes
  • 21
  • 2
  • 5
    Measure it, and see which performs better. That said, this sort of thing almost never makes a significant difference in speed, especially if you're only executing it twice. – Robert Harvey Jan 06 '13 at 02:55
  • @RobertHarvey: Well, I'm not sure I would say almost never. Perhaps not for just two accesses, but [it is significantly faster for canvas `ImageData` manipulation](http://www.onaluf.org/en/entry/13). – icktoofay Jan 06 '13 at 03:50

3 Answers3

0

It isn't going to matter much.

Just wrote a test for you on jsperf to see... neck and neck, almost no difference (no statistically significant difference on my machine):

http://jsperf.com/alias-vs-dot-lookup-speed

cheers.

hunterloftis
  • 13,386
  • 5
  • 48
  • 50
0

This answer depends upon what question you really care about:

  1. If performance is your main concern, then you have to measure the two cases in all significant browsers and assess the results of those measurements.
  2. If you're just looking for a good rule of thumb to follow, then I'd argue that creating a new variable just for two uses like this is probably not worth it unless it's a highly performance sensitive piece of code in which case rule #1 wins.
  3. If you're looking for a good balance between code simplicity, compactness and speed, then I'd say to avoid the extra variable and extra line of code for this simple case. The performance difference won't be significant so why add complexity and more code.
  4. If you're looking for a correctness issue, then that's entirely personal opinion and both sides can be argued. I would argue #3 wins. When nothing else drives your decision, go for simplicity.
jfriend00
  • 683,504
  • 96
  • 985
  • 979
0

I would class this as premature optimisation, unless you are hitting some sort of performance issue I wouldn't worry about which approach you take here (especially for code as small as this). I wouldn't be surprised if the style property is already being cached by the DOM internally anyway so there might not even be any extra overhead each time you access it.

Is it advisable to cache objects that are only used twice in JavaScript

To answer your question - if there is a lot of overhead in accessing it then generally it would be a good idea cache e.g. perhaps it's created every time it's accessed, or causes an expensive lookup on a collection. However, if its purely returning the object directly then I see no benefit.

If your after a precise answer then the only way to get that would be to actually benchmark both versions. However, for your particular code I would say any performance difference would be negligible. However, introducing another variable will add unnecessary overhead for the compiler (albeit small).

James
  • 80,725
  • 18
  • 167
  • 237