利用函數的惰性載入提高 javascript 代碼性能

在 javascript 代碼中,因爲各瀏覽器之間的行爲的差異,我們經常會在函數中包含了大量的 if 語句,以檢查瀏覽器特性,解決不同瀏覽器的兼容問題。例如,我們最常見的爲 dom 節點添加事件的函數:

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 語句不必每次都執行,代碼可以運行的更快一些。

解決的方案就是稱之爲惰性載入的技巧。

所謂惰性載入,就是說函數的 if 分支只會執行一次,之後調用函數時,直接進入所支持的分支代碼。有兩種實現惰性載入的方式,第一種事函數在第一次調用時,對函數本身進行二次處理,該函數會被覆蓋爲符合分支條件的函數,這樣對原函數的調用就不用再經過執行的分支了,我們可以用下面的方式使用惰性載入重寫 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() 的時候,便會直接調用新賦值的函數,這樣就不用再執行 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;
        }
    }
})();

這個例子中使用的技巧是創建一個匿名的自執行函數,通過不同的分支以確定應該使用那個函數實現,實際的邏輯都一樣,不一樣的地方就是使用了函數表達式(使用了 var 定義函數)和新增了一個匿名函數,另外每個分支都返回一個正確的函數,並立即將其賦值給變量 addEvent

惰性載入函數的優點只執行一次 if 分支,避免了函數每次執行時候都要執行 if 分支和不必要的代碼,因此提升了代碼性能,至於那種方式更合適,就要看您的需求而定了。

相關閱讀

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章