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

前端开发不可避免的会有跨浏览器的需求，为了兼容各浏览器，绝大时候我们的处理方式都是用几个if...else或者try...catch语句来做功能检测。

举个我们工程院前端线下考试性能优化中的一个例子——事件绑定。说到事件绑定，我猜99%的同学脑中会跳出这么一段代码：

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

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

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

我们使用惰性加载的方式来重写我们熟悉的addEvent函数。

第一种方法，在函数被调用时再处理函数：

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

第二种方法，在声明函数时就指定适当函数：

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判断）结果指定函数体，当然，既然是一个立即执行函数，我们得注意使用场合。

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