Improving the Initial Entry Speed of an Application
Some tips and trick to make your applications load and start faster
Loading JavaScript On-Demand
You can save JavaScript loading time by minimizing JavaScript in the initial page. To do this use on-demand JavaScript loading to download JavaScript only when it is required.
If you divide large JavaScript file into several smaller files, only some of those files are needed to generate the initial page. Later, you can load other JavaScript files by inserting script element as follows:
Main.onLoad = function() {
var widgetAPI = new Common.API.Widget();
widgetAPI.sendReadyEvent();
setTimeout('IncludeJavascript()', 0);
}
function IncludeJavaScript() {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script'); //script tag creation.
script.type = 'text/javascript';
script.src = 'test.js';
script.onload = function () {
//your code here - will be run when your js file is loaded
};
head.appendChild(script); //inject a new script element into page
}
Loading CSS Background Image On-Demand
The browser loads an image for an element’s background style when its background style matching is invoked. Deleting background style of some elements which are not necessary in the initial page can reduce the application loading time.
Later, when it is required, you can apply an element’s background style as follows:
function loadBackgroundImage(eid, url) {
document.getElementById(eid).style.backgroundImage = "url("+url+")";
}
function loadCSSImage() {
loadBackgroundImage("Full1", "img/Full_1.png");
loadBackgroundImage("Full2", "img/Full_2.png");
loadBackgroundImage("Full3", "img/Full_3.png");
}
For more information about working with your CSS, see UI.
Separating Main.onLoad functions
If you use the setTimeout function properly, a background of the initial page displays more quickly. As illustrated in the following code snippet, separate the Main.onLoad function into two steps:
- Generate background of the initial page.
- Perform any other work required after the initial page.
Main.onLoad = function () {
// generate background here...
var widgetAPI = new Common.API.Widget();
widgetAPI.sendReadyEvent();
setTimeout('Main_onLoad2()',0);
}
function Main_onload2(){
IncludeJavaScript(); // refer to "Loading JavaScript On-Demand"
generateDetailPage();
}