Improving the Initial Entry Speed of an Application

Published 2014-10-27 | (Compatible with SDK 2.5,3.5,4.5,5.0,5.1 and 2011,2012,2013,2014 models)

Some tips and trick to make your applications load and start faster

Contents

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:

  1. Generate background of the initial page.
  2. 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();
}