Lazy Loading#

Lazy loading is about reducing the repetitive branching judgment of the code on the external environment, to improve the performance of code execution. The lazy loading mode is not part of the generally defined category of 23 design patterns, but is usually considered as a broadly skilled design pattern.

Description#

Lazy loading is achieved by redefining the object to shield the branching judgments in the original object. Our implementation approach is also very simple. Since a certain external environment is certain and no longer needs to be judged, as long as the environment is judged, redefine this method to only return the code logic under a specific branch.

Lazy loading has a wide range of applications, especially in today's diverse browser types. Many functions are implemented differently in different browsers, leading to bloated and redundant code with numerous branching judgments for different browsers, such as event handling and the creation of XMLHttpRequest objects. Lazy loading can solve this problem and improve code execution efficiency.

For the above requirements, we have two ways to improve:

• Return different strategies for different situations, which takes time to load but not to call.
• Explicitly define for the same situation, then execute. Loading for the first time does not consume performance, and the first call consumes performance.

Implementation#

Two implementation approaches of lazy loading are provided for different browser event registration methods.

const event = {};

event.addEvent = function(dom, type, fn) {
    if(dom.addEventListener) dom.addEventListener(type, fn, false);
    else if(dom.attachEvent) dom.attachEvent("on" + type, fn);
    else dom["on" + type] = fn;
}

Load on Execution#

When the JavaScript file is loaded, the method is redefined through closure execution, which consumes some resources when the page is loaded.

const event = {};

event.addEvent = function(dom, type, fn) {
    if(dom.addEventListener) {
        return function(dom, type, fn) {
            dom.addEventListener(type, fn, false);
        }
    }else if(dom.attachEvent) {
        return function(dom, type, fn) {
            dom.attachEvent("on" + type, fn);
        }
    }else{
        return function(dom, type, fn) {
            dom["on" + type] = fn;
        }
    }
}();

Lazy Execution#

When the function is executed for the first time, it is explicitly rewritten inside the function, and the last call completes the first method call. Unlike loading on execution, after the JavaScript file is loaded, the lazily executed function has not been redefined yet. It is only when the function is called for the first time that it is redefined. Both lazy loading methods avoid redundant branching judgments.

const event = {};

event.addEvent = function(dom, type, fn) {
    if(dom.addEventListener) {
        event.addEvent = function(dom, type, fn) {
            dom.addEventListener(type, fn, false);
        }
    }else if(dom.attachEvent) {
        event.addEvent = function(dom, type, fn) {
            dom.attachEvent("on" + type, fn);
        }
    }else{
        event.addEvent = function(dom, type, fn) {
            dom["on" + type] = fn;
        }
    }
    event.addEvent(dom, type, fn);
};

Daily Question#

References#