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>

条件预加载在脚本加载以前提早进行检查，而不等待函数调用，这样作虽然仍旧只检测一次，但检测过程来的更早。条件预加载在脚本加载时进行检测，适用于一个函数立刻就会被用到并且在整个页面的生命周期中反复用到的场合
函数