JavaScript 性能优化之惰性加载函数

在实际开发中，我们编写的大多数JavaScript代码包含大量的 if…else语句或者 try… catch 语句来做功能检测。
举一个简单的例子：事件的绑定，我们会首先想到下列的代码

		var addHandler= function(element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                } else {
                    element["on" + type] = handler;
                }
            }

分析以上代码，为了兼容不同浏览器，每次执行 addHandler 时我们会去做功能检测，逐一去走 addHandler 中的if，获取到可以兼容的代码块。无可厚非，我们通过这两三个判断保证了每次都能使用到兼容浏览器的代码，注意到，我用了“每次”这个词。是的，以上代码每次调用 addHandler 都要做功能检测，而我们知道，当我们用某个浏览器打开网页时，其实就已经确定了哪个if/try可用了，完全没必要每次调用都检测。因此，我们引入了惰性加载函数的概念。

惰性加载表示函数执行的分支仅会发生一次。有两种实现惰性加载的方式：在函数被调用时再处理函数；在声明函数时就指定适当函数。

我们来优化一下addHandler 函数：

1、在函数被调用时再处理函数

		var addHandler= function(element, type, handler) {
                if (element.addEventListener) {
                    addHandler = function(element, type, handler) {
                        element.addEventListener(type, handler, false);
                    };
                } else if (element.attachEvent) {
                    addHandler = function(element, type, handler) {
                        element.attachEvent("on" + type, handler);
                    }

                } else {
                    addHandler = function(element, type, handler) {
                        element["on" + type] = handler;
                    }

                }
                return addHandler(element, type, handler);
            },

if语句中的每一个分支都会给addHandler 变量赋值，有效覆盖了原有的函数，最后一步就是调用新赋的函数。下一次就会直接调用新赋的函数。

2、在声明函数时就指定适当的函数：

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

我们发现第二种方法在此例中并不适用，因为它是一个立即执行函数，带参显然并不合适（各种undefined），那么我们可以用 JavaScript高级程序设计 中的一个例子：

let createXHR = ( () => {
    if (typeof XMLHttpRequest != 'undefined'){
        return () => {
            ...
        }
    } else if (typeof ActiveXobject != 'undefined') {
        return () => {
            ...
        }
    } else {
        return () => {
            ...
        }
    }
})();

总结：

可以总结到，所谓在声明函数时就指定适当函数，即声明函数为匿名、立即执行函数，根据功能检测（if/try判断）结果指定函数体，当然，既然是一个立即执行函数，我们得注意使用场合。

以上两种方式都只在第一次执行函数时做了性能检测，省去了后续调用时多余的操作，优化了性能。




愿你的坚持终有收获。