Javascript Tips
satheesh babu b
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 language="JavaScript1.1"> |
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 language="JavaScript1.1"> |
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.
Tip 2: Cache your scripts!
You've "cashed in" your objects...another way to enhance script performance is the cache the entire script, by including it in a .js file. The technique causes the browser to load the script in question only once, and recall it from cache should the page be reloaded or revisited.
|
<script src="imagescript.js"></script> |
Use script caching when a script is extremely large, or embedded across multiple pages.
Tip 3: Understand the cost of your objects
The fact is, 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, the two dynamic content properties of IE 4+:
-object.innerText
-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>, innerText would definitely be the more intelligent choice. Another example are the CSS properties " display" and "visibility "; the former is significantly more expensive than the later.
Someone I was helping had the following error pop up on some browsers:
line ##
char 1
object expected
It turned out to be caused by a line like this:
|
Code: |
|
|
This is because the function: My_preloadImages was not defined in this html file and was not loaded by a
<script language="JavaScript" src="
MyFunctions.js">
type line either.
Once I made a dummy function of that name and placed it in the header section all was well, except of course that the images wanted were not in fact pre-loaded.
This Error Means:
(1)
that for some reason a function expected has not been found. It could be that you mis-typed the name MyFunction is different from the following: myFunction, Myfunction, & myfunction to name but a few.
(2)
It could be that the function was loaded but too late. Using something like:
|
Code: |
|
|
would cause this problem.
(3)
An error occured before the function could be loaded which caused the rest of the script to abort. In some very strange cases this error might not be seen by you if the browser for some reason doesn't choke on it, yet all code following this error will
NOT HAVE BEEN LOADED! - This has got to be the most difficult to locate, but I'd suggest that if everything looks OK to you, then simply move this function to the beginning of the <script> section and see what happens. By moving each piece from the bottom to the top (one piece at a time) you will eventually be able to locate the defective section.
--
Best Regards,
Satheesh babu B,
ACES - ICT – Application Development
(ABN AMRO)
Mumbai
Telephone : +91 22 56647914
Mobile : +91 9324412308
Email : sathee...@in.abnamro.com
http://satheeshbabu.blogspot.com/
http://groups.google.com/group/TechdotNetIndia