Returning Javascript Variables and Performance

Question

I currently have all my script's required elements cached in a global object similar to this:

var MainObject={
   $El1 : $('#element1'), 
   $El2 : $('#element2')
   };

Inside my methods I can then just access the object directly.

method1:function(){
   MainObject.$El1 // DO SOMETHING WITH THIS ELEMENT
}, ...

So, I have 2 questions.

I've read that local variables are the fastest. would it be better to write my methods like so?

method1:function(){
    var $El1=MainObject.$El1; 
    $El1 // DO SOMETHING WITH THIS ELEMENT
}, ...

and if so...

If I have many Methods in my script that reference these elements (which can quickly turn into quite a few lines) what would be the best way to condense them?

method1:function(){
   var $El1=MainObject.$El1,
       $El2=MainObject.$El1,
       $El3=MainObject.$El1,
       $El4=MainObject.$El1;

   $El1 // DO SOMETHING WITH THIS ELEMENT
},

method2:function(){
   var $El1=MainObject.$El1,
       $El2=MainObject.$El1,
       $El3=MainObject.$El1,
       $El4=MainObject.$El1;

   $El1 // DO SOMETHING WITH THIS ELEMENT
},

method3:function(){
   var $El1=MainObject.$El1,
       $El2=MainObject.$El1,
       $El3=MainObject.$El1,
       $El4=MainObject.$El1;

   $El1 // DO SOMETHING WITH THIS ELEMENT
},

Thanks!

No, actually you're far off the track and it's impossible :-) — Bergi, Feb 24 '13 at 00:15
To make a function that declares variables in a different scope. — Bergi, Feb 24 '13 at 00:17
hmmm, so if there a better way to condense many variable declarations throughout the different methods? — Aaron, Feb 24 '13 at 00:20
@Aaron If you want to improve performance (not that improvements would be significant), make sure that you use the strict language. In the strict language, all nested environments are static, which means that the engine knows for sure that `MainObject` is a global variable, which results in faster access times. — Šime Vidas, Feb 24 '13 at 00:34

score 3 · Accepted Answer · answered Feb 24 '13 at 00:35

3

Adding code for premature optimization before you've measured that you actually have a performance problem in a particular method that needs solving is rarely, if ever, a good idea. It just adds more lines of code, takes longer to write and often doesn't solve any real problems.

Then, when you do have a performance issue to address, you need to measure carefully to find out what aspect of the method is really taking the time.

Yes, local variables are faster than global variables (the local scope is searched before the global scope to resolve a variable name). Yes, multiple references as in MainObject.$EL1 is slower than a single local reference.

Here's my general rule-of-thumb. If you're just using something like MainObject.$EL1 once or twice in a method, there's little advantage to caching it in a local variable. If you're using it three or more times, then it makes good sense to cache it locally just to prevent all the extra lookup. I would generally do the same in javascript as in C++.

If you have an actual performance issue and you want to make something faster, then your first intuition for what is the main cause of the performance issue is rarely correct. So, it makes a lot of sense to profile and find out what is really taking the most time. Then, when you are making changes, you need a way to measure the impact of the changes to know that you're actually making a difference when you add more code.

answered Feb 24 '13 at 00:35

jfriend00

683,504
96
985
979

Thank you for addressing the question! :p Yes, the objects are being used multiple times in the methods so I'm wanting to cache them. The script is complete, I'm just optimizing now. I'm trying to reduce the line count and this is one place I thought I might be able to. Do you know if there's any way to condense these throughout multiple methods? – Aaron Feb 24 '13 at 00:39
@Aaron - if you just want to condense their readability impact, then you can use one longer line rather than multiple lines. But, there isn't any other fast way to get them all into local variables like this. – jfriend00 Feb 24 '13 at 00:40
here's a question... what if I were to include something like: var allVars=script.getVars(); inside every method (where the declarations are)? Then inside the getVars method, retrieve all of the elements and return them as an object? Since I've declared allVars within the method itself, would the returned object contents be local as well? The code is working, but (back to my original question that was impossible but now working) - are these truly local/cached to the method? – Aaron Feb 24 '13 at 01:18
@Aaron - you'd be putting them into local variables, but you'd need an extra lookup to get both the object and then the corresponding property and you'd have the overhead of a method call. It would be better to keep the originals in a global object and then just reassign the global object to a local var. If you really care, then you will have to benchmark this (perhaps in jsPerf) in several browsers to know if you're making things faster or slower. – jfriend00 Feb 24 '13 at 01:20
@Aaron - I added one more idea to my previous comment that you may have missed. – jfriend00 Feb 24 '13 at 01:23
thanks! I'll work with your new idea a bit as well, but it looks like this is working great. It's only affecting performance if I set it inside a loop of 20,000 - so I'm taking it that that small of a hit will be ok to remove all of those var declarations and reduce the line count significantly while keeping my elements cached :) – Aaron Feb 24 '13 at 01:37

score 1 · Answer 2 · edited May 23 '17 at 11:44

1

this getElements() function its impossible

The local variable ends with the scope.. once the scope is over the variable is also gone..

You should read these excellent posts JavaScript Variable Scope and Variable Scope

edited May 23 '17 at 11:44

Community

1
1

answered Feb 24 '13 at 00:19

thiagoh

7,098
8
51
77

OK, so returning the vars is out of the question. It was a long shot, but I'm just wondering if there is a better way to condense the var declarations at the top of each method? – Aaron Feb 24 '13 at 00:25
1

why dont you create a local object which has inside it all references you need? this is the fastest way to achieve your task.. they'll be only two paths to get you to the memory, one to the local obj and another to your var.. this way `localObj.myVar` – thiagoh Feb 24 '13 at 00:28
Wouldn't creating/referencing a local object would be slower than referencing local variables and be about the same length? I'm not sure how this would help reduce the repetitive declarations throughout different methods. – Aaron Feb 24 '13 at 00:30

score 0 · Answer 3 · answered Feb 24 '13 at 00:53

Local variables are faster, but not by much. You would need to access the variables several times inside the function to make up for the time it takes to copy the value to the local variable in the first place. If you use it only once, you will only have wasted that time.

Here is a performance test: http://jsperf.com/variables-vs-properties-2

Not only can you see that there is no big difference between looking up properties in an object and using a local variable, you can also see that you have to do this millions of time before the difference would be noticable.

Returning Javascript Variables and Performance

3 Answers3