Use lazy loading of functions to improve JavaScript code execution efficiency_javascript tips

In JavaScript code, due to differences in behavior between browsers, we often include a large number of if statements in functions to check browser characteristics and solve compatibility issues with different browsers. For example, our most common function for adding events to dom nodes:

Copy code The code is as follows:

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;
}
}

Every time the addEvent function is called, it will check the capabilities supported by the browser. First, check whether the addEventListener method is supported. If not, then check whether the attachEvent method is supported. If it is not supported yet, then Add events using dom level 0 methods. This process must be done every time the addEvent function is called. In fact, if the browser supports one of the methods, it will always support it, and there is no need to detect other branches. That is to say , the if statement does not have to be executed every time, and the code can run faster.

The solution is a technique called lazy loading.

The so-called lazy loading means that the if branch of the function will only be executed once, and when the function is called later, it will directly enter the supported branch code. There are two ways to implement lazy loading. The first is that when the function is called for the first time, the function itself is processed twice. The function will be overwritten as a function that meets the branch conditions, so that the call to the original function does not need to be After passing the execution branch, we can rewrite addEvent() using lazy loading in the following way.

Copy code The code is as follows:

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 lazy-loaded addEvent(), each branch of the if statement assigns a value to the addEvent variable, effectively overwriting the original function. The last step is to call the new assignment function. The next time addEvent() is called, the newly assigned function will be called directly, so there is no need to execute the if statement.

The second way to implement lazy loading is to specify the appropriate function when declaring the function. In this way, there will be no performance loss when the function is called for the first time, but only a small performance loss when the code is loaded. The following is addEvent() rewritten according to this idea.

Copy code The code is as follows:

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;
}
}
})();

Tips used in this example It creates an anonymous self-executing function and uses different branches to determine which function should be used. The actual logic is the same. The difference is the use of function expressions (using var to define functions) and the addition of an anonymous function. function, and each branch returns a correct function and immediately assigns it to the variable addEvent.

The advantage of lazy loading function is that it only executes the if branch once, which avoids executing the if branch and unnecessary code every time the function is executed, thus improving the code performance. As for which method is more suitable, just It depends on your needs.