Da questo tutorial su javascript efficiente:
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.
e
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.
Con la memorizzazione nella cache degli oggetti JavaScript, il numero di ricerche è ridotto, poiché il riferimento all'oggetto è contenuto all'interno della variabile, migliorando potenzialmente le prestazioni e l'utilizzo della memoria.