Introduction to the implementation of lazy loading of JavaScript functions and its advantages

Introduction to the implementation of lazy loading of JavaScript functions and its advantages_javascript skills

WBOY

Release： 2016-05-16 17:25:58

Original

1109 people have browsed it

I have learned a lot from advanced JavaScript programming recently. I will write some reading notes in the next few days. I wrote an essay on preliminary understanding of Ajax before. There is a function in it to create an XmlHttpRequest object. Due to browser compatibility, the written code uses a large number of if judgments or try and catch statements to guide the function to the correct code.

Copy code The code is as follows:

Every time you call this function, you must first check the browser capabilities. First, check whether the browser supports the built-in XMLHyypRequest object. , if it is not supported, then check each version of ActiveX-based XMLHttpRequest. This is the case every time this function is called. In fact, after the first execution, if the browser supports a specific XMLHttpRequest object, then this support will be supported the next time it is executed. The property will not change. There is no need to perform side-by-side detection. Even if there is only one if statement, the execution will definitely be slower than none. If we can make the if statement unnecessary to execute every time, then the execution speed can be improved in the case of frequent calls. . The solution is a technique called lazy loading.

Lazy loading

Lazy loading means that the branch of function execution will only be executed when the function is used for the first time. During the first call, The function will be overwritten with another function that is executed in an appropriate manner so that any call to the original function does not have to go through the branch of execution. The createXHR function can be rewritten as this
var xhr=null;

if(typeof XMLHttpRequest !='undefined'){ xhr = new XMLHttpRequest(); createXHR=function(){ return new XMLHttpRequest(); } }else{ try {

xhr = new ActiveXObject("Msxml2.XMLHTTP");

createXHR=function(){ 
return new ActiveXObject("Msxml2.XMLHTTP") "); 
} 
} 
catch (e) { 
try { 
xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
createXHR=function(){ 
return new ActiveXObject("Microsoft.XMLHTTP"); 
} 
} 
catch (e) { 
createXHR=function(){ 
return null; 
} 
 } 
} 
} 
return xhr; 
} 

 
When this lazy-loaded createXHR is executed for the first time, each branch will reassign createXHR , overwrite the original function and return the xhr object, and the rewritten function will be directly called during the second execution, so that there is no need to execute each branch and re-detect it. 


Advantages
 

Lazy loading functions have two main advantages. The first is the obvious efficiency issue, although the function will mean assignment when it is executed for the first time. The execution is slower, but subsequent calls will be faster because of the avoidance of repeated detection; the second is that the appropriate code to be executed is only executed when the function is actually called. Many JavaScript libraries differ according to the browser when loading. Execute many branches, get everything set up, and the lazy loading function will calculate the delay without affecting the execution time of the initial script.