Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I have watched a couple videos on JS where the presenter mentioned "caching" a variable but I didn't see them do anything in the code that would "cache" it beyond normal assignments. When i think of cache i think of something stored in local memory in which case aren't all js variables cached by definition.

When you cache a variable in javascript what or you "doing" to it?

EDIT: I have heard the term in several but the only one that comes to mind is Writing Modular Javascript - Tutorial. Which i just watched last night. I didn't post it because you have to pay to view and I hate feeling liking i am plugging a pay service on stackexchange.

share|improve this question
2  
If you want us to discuss the content of some videos, you should post links to them. –  user16764 Feb 23 '12 at 22:57
    
@user16764 I added a link. –  Ominus Feb 23 '12 at 23:03
add comment

2 Answers 2

up vote 4 down vote accepted

From this tutorial on efficient javascript:

One of the best kept secrets to boosting script performance is to cache your objects. Often times, your script will repeatedly access a certain object, as in the following demonstration:

<script type="text/javascript">
for (i=0;i<document.images.length;i++)
document.images[i].src="blank.gif"
</script>

In the above, the object "document.images" is what's accessed multiple times. The code to realizing it is inefficient, since the browser must dynamically look up "document.images" twice during each loop (once to see if i<document.images, and the other, to access and change the image's src). If you have 10 images on the page, for example, that's 20 calls to the Images object right there. Excessive calls to JavaScript objects can wear down the browser, not to mention your computer's memory.

The term "cache your object" means storing a repeatedly access object inside a user defined variable, and using that variable instead in subsequent references to the object. The performance improvement can be significant. Here's a modified version of the initial script using object caching:

<script type="text/javascript">
var theimages=document.images
for (i=0;i<theimages.length;i++)
theimages[i].src="blank.gif"
</script>

Not only is the number of times document.images[] is referenced cut in half with the above, but for each time it is referenced, the browser doesn't have to go through document.images first, but goes straight to its containing array.

Remember to use object caching when calling highly nested DHTML objects, like document.all.myobject, or document.layers.firstlayer etc.

and

some JavaScript objects are less forgiving on the browser than others. While recognizing exactly which isn't easy (and isn't the goal here), just becoming aware of this fact is important.

Take, for example, these two properties:

-object.innerText //IE only
-object.innerHTML

Did you know that the second property demands multiple times the system resources to call than the first? If all you're changing is the textual content of a <div> or <span> and in IE only, innerText would definitely be the more efficient choice. Another example are the CSS properties "display" and "visibility"; the former is significantly more expensive than the later.

With JavaScript object caching, the number of lookups is cutdown, since the object reference is held within the variable - potentially improving performance and memory usage.

share|improve this answer
    
Excellent description! Thanks. –  Ominus Feb 23 '12 at 23:02
add comment

The answers here can help you figure out which kinds of references to your data get garbage collected at which point, with more detailed discussion here and elsewhere on the web.

When you're looking to keep data in local memory in javascript, you'll want to make sure you store a reference to it that stays in scope for as long as it's required. This will require that you make some assignments at some point - sometimes using local variables ( ie: var x = cached value), though, more likely, you'll want to place things onto longer lived objects,ie:

jQuery.extend(myObject, {
   dog_cacher: []
}

...

myObject.dog_cacher = ["brown dog", "spotted dog"]
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.