Take advantage of lazy loading of functions to improve the efficiency of javascript code execution

In javascript code, because of the differences in behavior between browsers, we often include a large number of if statements in our functions to check browser features and resolve compatibility issues between different browsers. For example, our most common function for adding events to dom nodes:

 
function addEvent (type, element, fun) { 
if (element.addEventListener) { 
element.addEventListener(type, fun, false); 
} 
else if(element.attachEvent){ 
element.attachEvent('on' + type, fun); 
} 
else{ 
element['on' + type] = fun; 
} 
} 

Each time the addEvent function is called, it checks the capabilities supported by the browser to see if the addEventListener method is supported, if not, then the attachEvent method is supported, and if not, the dom 0-level method is used to add events. This process is repeated every time the addEvent function is called. In fact, if the browser supports one of these methods, it will always support it, so there is no need to do other branch detection, that is, the if statement does not have to be executed every time, the code can run faster.

The solution is a technique called lazy loading.

Lazy loading means that the if branch of a function is executed only once, and then when the function is called, it goes directly to the supported branch code. There are two ways to implement lazy loading. The first way is that when the function is called for the first time, the function itself is processed twice, and the function is overwritten as a branch function, so that the call to the original function does not have to go through the executing branch. We can rewrite addEvent() using lazy loading in the following way.

 
function addEvent (type, element, fun) { 
if (element.addEventListener) { 
addEvent = function (type, element, fun) { 
element.addEventListener(type, fun, false); 
} 
} 
else if(element.attachEvent){ 
addEvent = function (type, element, fun) { 
element.attachEvent('on' + type, fun); 
} 
} 
else{ 
addEvent = function (type, element, fun) { 
element['on' + type] = fun; 
} 
} 
return addEvent(type, element, fun); 
} 

In this lazily loaded addEvent(), each branch of the if statement assigns a value to the addEvent variable, effectively overwriting the function. The last step is to call the new assignment. The next time addEvent() is called, the newly assigned function is called directly, eliminating the need to execute the if statement.

The second way to implement lazy loading is to specify the appropriate function when the function is declared. That way, you don't lose performance the first time you call a function, but only a little when the code loads. The following is addEvent() rewritten along these lines.

 
var addEvent = (function () { 
if (document.addEventListener) { 
return function (type, element, fun) { 
element.addEventListener(type, fun, false); 
} 
} 
else if (document.attachEvent) { 
return function (type, element, fun) { 
element.attachEvent('on' + type, fun); 
} 
} 
else { 
return function (type, element, fun) { 
element['on' + type] = fun; 
} 
} 
})(); 

Technique is used in this example to create an anonymous since the implementation of function, through different branches should be used to determine the function realization, the actual logic is the same, different is the use of the function expression (var was used to define function), and an anonymous function has been added, and each branch return a correct function, immediately the addEvent assigned to variables.

The advantage of lazy loading functions is that they execute the if branch only once, eliminating the need to execute the if branch every time the function executes and unnecessary code, thus improving code performance, which is more appropriate depending on your needs.