javascript性能優化之避免重複工做

時間 2019-12-17

原文原文鏈接

javascript最重要也最根本的性能優化標準之一是避免工做，避免工做又包括兩點，第一，不作沒必要要的工做，第二，不作重複的已經完成的工做。第一部分能夠經過代碼重構完成，第二部分不作重複的工做有時候難以肯定，不少工做可能由於各類緣由不可避免的被重複，但咱們仍能夠經過對業務和技術場景的分析減小重複工做進而提高javascript的效率。下面是web前端開發中常常用到的瀏覽器檢測的一個示例。javascript

瀏覽器檢測html

優化前代碼示例前端

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>
<body>
<script>
//綁定事件函數各瀏覽器兼容版
function addHandler(target,eventType,handler){
if(target.addEventListener){
target.addEventListener(eventType,handler,false);
}else{
target.attachEvent("on"+eventType,handler);
}
};
function removeHandler(target,eventType,handler){
//DOM2 Events
if(target.removeEventListener){
target.removeEventListener(eventType,handler,false);
}else{//IE
target.detachEvent("on"+eventType,handler);
}
}
window.onload = function(){
var showButton = document.getElementById("showMessage");
addHandler(showButton,"click",function(){
console.log("show Message success.");
});

}
</script>
<button id="showMessage">提示信息</button>
</body>
</html>

分析代碼可知優化前代碼每次調用addHandler函數都要進行瀏覽器的功能檢測，咱們能夠經過如下方式進行優化java

1 - 延遲加載web

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>延遲加載函數示例</title>
</head>
<body>
<script>
//使用延遲加載函數示例
function addHandler(target,eventType,handler){
if(target.addEventListener){//DOM2 Events
addHandler = function(target,eventType,handler){
target.addEventListener(eventType,handler,false);
}
}else{
addHandler = function(target,eventType,handler){
target.attachEvent("on"+eventType,handler);
}
}
addHandler(target,eventType,handler);
}
function removeHandler(target,eventType,handler){
if(target.removeEventListener){//DOM2 Events
removeHandler = function(target,eventType,handler){
target.removeEventListener(eventType,handler,false);
}

}else{//IE
removeHandler = function(target,eventType,handler){
target.detachEvent("on"+eventType,handler);
}
}
removeHandler(target,eventType,handler);
}
window.onload=function(){
var showButton = document.getElementById("showMessage");
addHandler(showButton,"click",function(){
console.log("showButton success.");
})
}
</script>
<button id="showMessage">提示信息</button>
</body>
</html>

調用延遲加載函數老是在第一次使用較長時間，由於他必須運行檢測而後調用另外一個函數以完成任務。可是，後續調用同一個函數將會快不少，由於不在執行檢測邏輯。延遲加載適用於函數不會在頁面上當即被用到的場合瀏覽器

2 - 條件預加載性能優化

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>延遲加載函數示例</title>
</head>
<body>
<script>
var addHandler = document.body.addEventListener?function(target,eventType,handler){
target.addEventListener(eventType,handler,false);
}:function(target,eventType,handler){
target.attachEvent("on"+eventType,handler);
};

var removeHandler = document.removeEventListener?function(target,eventType,handler){
if(handler == null|| typeof(handler)=="undefined"){
target.removeEventListener(eventType,handler,false);
return;
}
target.removeEventListener(eventType,handler,false);
}:function(target,eventType,handler){
if(handler == null|| typeof(handler)=="undefined"){
target.detachEvent("on"+eventType);
return;
}
target.detachEvent("on"+eventType,handler);
};
function alertInfo(){
console.log("alertInfo success!");
};
window.onload = function(){
var showButton = document.getElementById("showMessage");
addHandler(showButton,"click",function(){
console.log("showMessage success!");
});
addHandler(showButton,"click",alertInfo);
removeHandler(showButton,"click",alertInfo);
}
</script>
<button id="showMessage">提示信息</button>
</body>
</html>

條件預加載在腳本加載以前提早進行檢查，而不等待函數調用，這樣作雖然仍舊只檢測一次，但檢測過程來的更早。條件預加載在腳本加載時進行檢測，適用於一個函數立刻就會被用到並且在整個頁面的生命週期中反覆用到的場合
函數