JavaScript Selective Loading Technique

JavaScript optimization should always be the goal of developers while building an Ajax based application. Without optimization, the application will not work as expected which could lead to frustrated users. In a business setting, a non-working or non-performing online application could mean a loss of thousands of dollars per minute.

Latency in an Ajax based application is highly likely because the applications launched through the browsers are very intensive with data and user interaction is very heavy. Without optimization, the application will simply lag behind other competing online applications.

One of the most practiced JavaScript optimization techniques is to be selective on initial loading. Through selective loading, developers will be able to efficiently load the Ajax or JavaScript application without letting users wait for a long time. Basically, selective loading refers to the technique of some developers in loading only the important functions when the application is called.

By default, the important functions in an Ajax based application are loaded first. But since the coding suggests that it will also load other non-essential functions, the browser will have to queue those functions. The browser blocks other functions from being loaded. This means users will still have to wait until the browser has fully loaded the application.

This form of loading is not necessary in an application. As already indicated, there are functions in the application that does not have to be loaded immediately. The reason why browsers block other functions is that the browser wants to lay down the essential functions first.

Although this method will not necessarily increase the speed of loading of essential functions, it can optimize the application since the user will not have to wait longer. Users will immediately interact with the application as everything will be in place fast.

To be able to do this, developers has to check the “onload” function for JavaScript. This function tells the browser to automatically load the functions whenever the website is enabled. This function can be considered as a "shortcut" for many developers since everything will be available for the user to use. But the user will have to wait for a while before they can be completely used. For an impatient user, waiting for the online application is not worth it when there are other applications that provide better online interaction.

Here are two options for developers to optimize JavaScript and Ajax through selective loading:

1. Focus on action scripts - there are other action scripts aside from onload. Use interaction from users to call the function they need. Instead of loading the function at the start of the page, using the available resources to load a small function is a better option.

2. Use external sources for increased non-essential functions - the magic number for this optimization tip is 25. If you have more than 25 functions that are not essential on the initial load, it would be better to place those functions in another source. Functions more than 25 should have a separate resource in order to act effectively with the original application.