Optimizing DOM for Better Ajax Functions

One of the biggest challenges for JavaScript and Ajax based developers is on using DOM for various browsers. This is not only based on browser incompatibility but also on the ability of the application to load faster in the client side. If the application will not load as expected, users might stay away from the application which lowers the feasibility or usefulness of the application.

Loading problem for developers often stem from the fact that the entire webpage has to load first before JavaScript function is executed. Developers execute window.onload=function () so that the function will check if the webpage is fully loaded first.

Although this function is very feasible at first glance, streaming your application in a client side that has low bandwidth is difficult. Since JavaScript and Ajax based functions still need to wait for the webpage to load, it could take time before the webpage is fully loaded. Although window.onload=function () is recognized by most browsers, the fact that the user has a very slow internet connection cuts off usability in great lengths.

Using the DOM Tree

Instead of using the window.onload=function () before function execution, developers can opt to load DOM Tree before the webpage is complete. Instead of using a specific function to sniff if the webpage has been completely loaded, developers can opt to sniff the DOM Tree. This specific part of the JavaScript application loads along with the webpage but they are completely loaded long before the webpage is loaded completely.

But implementing this function is not uniform in all browsers. Mozilla and the rest of the major browsers have the same functions while IE requires a different trick.

Implementing DOM Tree Monitor in Mozilla

As expected, monitoring DOM Tree in Mozilla before loading additional JavaScript application is relatively easy. Instead of window.onload=function (), developers could use the DOMContentLoaded. As the name suggests, this function monitors if the DOM content is already completely loaded in the client side.

Implementing DOM Tree Monitor in IE

On the other hand, implementing the monitoring function in IE is a little bit challenging. The DOMContentLoaded cannot be recognized by IE so pushing this function will only result to a null response. What developers need to do is to add functionality in the content loading function which will call the JavaScript function. Instead of waiting for the onload to proceed in calling JavaScript functions, the completed content will automatically call on the JavaScript functions.

Advantage of Options

Document loading monitoring is actually not an assured option to ensure that the application works faster. There are times that DOM Tree will load a lot slower compared to window.onload=function ().

This means developers still have to add the window.onload=function in their Ajax and JavaScript based application. This is considered as Plan B for the browser so that the first function that will be fully loaded will be used by the application. It could be additional work for the developers but this is essential so that their application will load faster in any given situation.