利用函數的惰性載入提高javascript代碼性能
在 javascript 代碼中，因為各瀏覽器之間的行為的差異，我們經常會在函數中包含了大量的 if 語句，以檢查瀏覽器特性，解決不同瀏覽器的兼容問題。
例如，我們最常見的為 dom 節(jié)點添加事件的函數：
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;
}
}
每次調用 addEvent 函數的時候，它都要對瀏覽器所支持的能力進行檢查，首先檢查是否支持 addEventListener 方法，如果不支持，再檢查是否支持 attachEvent 方法，如果還不支持，就用 dom 0 級的方法添加事件。
這個過程，在 addEvent 函數每次調用的時候都要走一遍，其實，如果瀏覽器支持其中的一種方法，那么他就會一直支持了，就沒有必要再進行其他分支的檢測了，
也就是說，if 語句不必每次都執(zhí)行，代碼可以運行的更快一些。
解決的方案就是稱之為惰性載入的技巧。
所謂惰性載入，就是說函數的if分支只會執(zhí)行一次，之后調用函數時，直接進入所支持的分支代碼。
有兩種實現惰性載入的方式，第一種事函數在第一次調用時，對函數本身進行二次處理，該函數會被覆蓋為符合分支條件的函數，這樣對原函數的調用就不用再經過執(zhí)行的分支了，
我們可以用下面的方式使用惰性載入重寫 addEvent()。
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);
}
在這個惰性載入的 addEvent() 中，if 語句的每個分支都會為 addEvent 變量賦值，有效覆蓋了原函數。
最后一步便是調用了新賦函數。下一次調用 addEvent() 的時候，便會直接調用新賦值的函數，這樣就不用再執(zhí)行 if 語句了。
第二種實現惰性載入的方式是在聲明函數時就指定適當的函數。
這樣在第一次調用函數時就不會損失性能了，只在代碼加載時會損失一點性能。
一下就是按照這一思路重寫的 addEvent()。
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;
}
}
})();
這個例子中使用的技巧是創(chuàng)建一個匿名的自執(zhí)行函數，通過不同的分支以確定應該使用那個函數實現，實際的邏輯都一樣，
不一樣的地方就是使用了函數表達式（使用了 var 定義函數）和新增了一個匿名函數，另外每個分支都返回一個正確的函數，并立即將其賦值給變量 addEvent。
惰性載入函數的優(yōu)點只執(zhí)行一次 if 分支，避免了函數每次執(zhí)行時候都要執(zhí)行 if 分支和不必要的代碼，因此提升了代碼性能，至于那種方式更合適，就要看您的需求而定了。
注
本文為轉載文章，原文：“利用函數的惰性載入提高javascript代碼性能”
更多建議：