javascript最重要也最根本的性能优化标准之一是避免工作，避免工作又包括两点，第一，不做不必要的工作，第二，不做重复的已经完成的工作。第一部分可以通过代码重构完成，第二部分不做重复的工作有时候难以确定，很多工作可能因为各种原因不可避免的被重复，但我们仍可以通过对业务和技术场景的分析减少重复工作进而提升javascript的效率。下面是web前端开发中经常用到的浏览器检测的一个示例。

 

一、浏览器检测

优化前代码示例

<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>

 

解决方式：

1、延迟加载

<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>

 

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