JS編程實踐指導(dǎo)

niceforbear 發(fā)布于2019-08-20 14:17 / 2539人閱讀

摘要：避免雙重求值構(gòu)造函數(shù)。例如當(dāng)你在代碼中執(zhí)行另一段代碼時，每次調(diào)用都會創(chuàng)建一個新的解釋器編譯器實例，非常消耗性能，代碼執(zhí)行速度會慢許多。避免重復(fù)工作最常見的重復(fù)工作瀏覽器探測。因為每次的檢查過程都是相同的，看看指定方法是否存在。

避免雙重求值

eval()、Function()構(gòu)造函數(shù)、setTimeout()、setInterval()。每個方法允許你傳入一個javascript代碼字符串并執(zhí)行它。
例如：`setTimeout("sum=num1+num2",100);`
當(dāng)你在javascript代碼中執(zhí)行另一段javascript代碼時，每次調(diào)用都會創(chuàng)建一個新的解釋器/編譯器實例，非常消耗性能，代碼執(zhí)行速度會慢許多。

避免重復(fù)工作

最常見的重復(fù)工作：瀏覽器探測。
反例：

function addHandler(target,eventType,handler){
    if(target.addEventListerner){//DOM2 Events
        target.addEventListener(eventType,handler,false);
    }else{//IE9以下
        target.attachEvent("on"+eventType,handler);
    }
}

該例子乍一看似乎已經(jīng)優(yōu)化了，隱藏的性能問題在于每次函數(shù)調(diào)用時都做了重復(fù)工作。因為每次的檢查過程都是相同的，看看指定方法是否存在。但是其實檢查一次就夠了。
解決方案：
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);
        };
    }
}
//以上方法會在函數(shù)第一次調(diào)用時，檢查并決定使用哪種方法去綁定事件處理器。然后原始函數(shù)被包含正確操作的新函數(shù)覆蓋。
2.條件預(yù)加載（Conditional Advance Loading）
條件預(yù)加載會在腳本加載期間提前檢測，而不會等到函數(shù)被調(diào)用時。
var addHandler=document.body.addEventListerner ? 
    function(target,eventType,handler){
        targrt.addEventListerner(eventType,handler,false);
    }:
    function(target,eventType,handler){
        target.attachEvent("on"+eventType,handler);
    };