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

绝地灬酷狼 2023-02-14 15:47 8阅读 0赞

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

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

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

我们来优化一下addHandler 函数：

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

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

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

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

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

总结：

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

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