Lazy loading functions are also known as dynamic function loading, where part of program is loaded into storage only on request.  For example, when a script has to be made cross functional, the code might have multiple if statements to check the conditions. Executing through if statements each and every time, slow down the running time compared to code with no if statements. The operation (i.e.detecting the browser's type)  has to be checked only for first time and in subsequent runs, if it is possible to execute code without checking in multiple if statements, can reduce the execution time in complex applications.  This can be achieved with lazy-loading functions.

In the example below, depending on the browser, the if statement branch is used to parse the XML ‘str’ to DOM. For IE, ActiveXObject is used to parse to DOM and for other major browsers DOMParser is used.  Calling such methods multiple times, will take a performance hit. 

Example of script's speed without lazy-loading

<!DOCTYPE html>
<html>

<body>    
<script>
    var str = "<note><to>Sandesh</to><from>Rosy</from><msg>Let's meet this weekend!</msg></note>";    
    function parsing(){        
    //Firefox, Chrome, opera …etc
        if(window.DOMParser){    
            var parser = new DOMParser();    
            var xmlDoc = parser.parseFromString(str, "text/xml"); 
            var error = xmlDoc.getElementsByTagName("parsererror");
            if (error.length > 0)
            {
              throw new Error("Parsing error!");
            }
            else{
                document.write("Note node: "  + xmlDoc.getElementsByTagName('note').length);                
            }
        }
    //Internet Explorer
        else{
            xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async=false;
            xmlDoc.loadXML(str);
            if (xmlDoc.parseError.errorCode != 0) 
            {
            alert("Error in line " + xmlDoc.parseError.line + " position " + xmlDoc.parseError.linePos + "\nError Code: " + xmlDoc.parseError.errorCode + "\nError Reason: " + xmlDoc.parseError.reason + "Error Line: " + xmlDoc.parseError.srcText);
            }
            else{
                document.write("Note node: "  + xmlDoc.getElementsByTagName('note').length);
            }
        }        
    }    
</script>
</body>

</html>

The above function can be made "lazy-loaded" as shown below. When the function is run for the first time in a browser, the branching in if (window.DOMParser) or else happens. The function parsing() is overwritten by function calls in the if/else branch, so that in subsequent runs the function is called directly instead of checking in if/else statements. At the end of if/else loop return parsing() is called to the newly assigned over-written function.

Advantage of lazy-loading

Lazy-loading reduces the loading time of the page giving rich browser experience without wasting bandwidth.

Disadvantage of Lazy Loading

Alternatively, if program is expected to use most of its dependent components, every function call to the lazy-load components will require extra instructions and time. This do not improve the performance.

 

›› go to examples ››