JS程式設計實踐指導

weixin_34253539發表於2017-02-15
JS程式設計

避免雙重求值

eval()、Function()建構函式、setTimeout()、setInterval()。每個方法允許你傳入一個javascript程式碼字串並執行它。
例如：`setTimeout("sum=num1+num2",100);`
當你在javascript程式碼中執行另一段javascript程式碼時，每次呼叫都會建立一個新的直譯器/編譯器例項，非常消耗效能，程式碼執行速度會慢許多。

避免重複工作

最常見的重複工作：瀏覽器探測。
反例：
function addHandler(target,eventType,handler){
    if(target.addEventListerner){//DOM2 Events
        target.addEventListener(eventType,handler,false);
    }else{//IE9以下
        target.attachEvent("on"+eventType,handler);
    }
}
該例子乍一看似乎已經優化了，隱藏的效能問題在於每次函式呼叫時都做了重複工作。因為每次的檢查過程都是相同的，看看指定方法是否存在。但是其實檢查一次就夠了。
解決方案：
1.延遲載入（Lazy Loading）
function addHandler(target,eventType,handler){
    if(targrt.addEventListerner){
        addHandler=function(target,eventType,handler){
            target.addEventListerner(eventType,handler,false);
        };
    }else{
        addHandler=function(target,eventType,handler){
            target.attachEvent("on"+eventType,handler);
        };
    }
}
//以上方法會在函式第一次呼叫時，檢查並決定使用哪種方法去繫結事件處理器。然後原始函式被包含正確操作的新函式覆蓋。
2.條件預載入（Conditional Advance Loading）
條件預載入會在指令碼載入期間提前檢測，而不會等到函式被呼叫時。
var addHandler=document.body.addEventListerner ? 
    function(target,eventType,handler){
        targrt.addEventListerner(eventType,handler,false);
    }:
    function(target,eventType,handler){
        target.attachEvent("on"+eventType,handler);
    };

相關文章