How to speed up JavaScript using the DOMready event
One of the problems many JavaScript programmers meet when trying to produce their own page control is timing and event cluttering.
As always, let’s use an example
function startslideshow() {
dosomething();
};
window.onload=”startslideshow”;
This makes the function startslideshow (an example used through the article) execute when the window loads. But what happens if another function wants to execute on window load too? If you added, later in the chain of scripts, the code
window.onload=”startanotherthing”;
the other function gets executed, but replaces the first one.
The same happens if you use this code
<body onload=”startslideshow()”>
That means the function startslideshow will be executed after the body of the document has loaded.
If you instead write this code
function startslideshow() {
dosomething();
};
startslideshow();
You’ll have a timing problem, because when executing startslideshow(), you will not be sure that the HTML of the page is completely loaded and available to the script. Don’t even think using a setTimeout and try to guess how much time it takes. It would be a so bad solution police would come to your home and arrest you for ‘bad programming’.
So, you are faced with these two problems:
- You need the code to execute when the page loads
- You need the code to be self encapsulated, so you can plug and play it in the page without worrying it will disturb other code
Nothing else? Indeed, there is more. If you execute the code on page loads, it means all of the page should be downloaded, even all the images. If you have a slideshow, and the user clicks on an image before all the others on the page are loaded, you will have problems because your initial function has not executed yet.
Enter the realm of DOMready. Many experienced programmers now let their code execute not when the entire page has loaded, but only when the Document Object Model (DOM) is ready, that is, all the HTML and javascript files have been loaded and are available to the JavaScript interpreter. The DOMready event fires way earlier during page rendering.
Unfortunately, the DOMready event is not very easily approachable, as browsers have slightly different implementation of the technique.
Chances are you already use a JavaScript framework to address cross browser incompatibilities.
If you use prototype.js, probably you access the window load event with this code
Event.observe(window, ‘load’, startslideshow);
replace startslideshow with your function. You can chain more Event.observe and prototype.js will take care by itself of executing the functions one after the other on window load.
To access the earlier, faster DOMready event, replace that code with
document.observe(“dom:loaded”,startslideshow);
the function is brand new and requires a version of prototype.js not lower than 1.6 .
What if you use jQuery? The code is
$(document).ready(startslideshow);
That’s all. Indeed, the code is not faster di per se, just the perception of responsiveness of the page is, because the code gets executed earlier.
If you use the debugger plugin Firebug for Firefox, in the Net panel of the latest version there are two vertical lines drawn. The first one detects the point in time the DOM is ready. The second one when the page is loaded.
The only things you’re left to do is subscribe to my feeds and leave a comment if you liked the article, and… happy coding!