您的位置：首页 > Web前端 > JavaScript

js 性能优化整理之 惰性载入

2015-06-02 11:02 555 查看

跨检查浏览器特性，解决不同浏览器的兼容问题。例如，我们最常见的为dom节点添加事件的函数

functionaddEvent(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false) }elseif(element.attacheEvent){//attacheEvent element.attachEven('on'+type,function(){ handler.apply(element,arguments);//attachEvent方法中，修复this指针问题 }); }else{ element['on'+type]=handler; } }

每次调用addEvent函数的时候，它都要对浏览器所支持的能力进行检查，首先检查是否支持addEventListener方法，如果不支持，再检查是否支持attachEvent方法，如果还不支持，就用dom0级的方法添加事件。这个过程，在addEvent函数每次调用的时候都要走一遍，其实，如果浏览器支持其中的一种方法，那么他就会一直支持了，就没有必要再进行其他分支的检测了，也就是说，if语句不必每次都执行，代码可以运行的更快一些。

解决方法：惰性载入

functionaddEvent(element,type,handler){
if(element.addEventListener){
addEvent=function(element,type,handler){
element.addEventListener(type,handler,false);
}
}
elseif(element.attachEvent){
addEvent=function(element,type,handler){
element.attachEvent('on'+type,function(){
handler.apply(element,arguments);//attachEvent方法中，修复this指针问题
});
}
}
else{
addEvent=function(element,type,handler){
element['on'+type]=handler;
}
}
returnaddEvent(element,type,handler);
}

函数声明时就指定适当的函数。这样在第一次调用函数时就不会损失性能了，只在代码加载时会损失一点性能。

varaddEvent=(function(){
if(document.addEventListener){
returnfunction(type,element,handler){
element.addEventListener(type,handler,false);
}
}
elseif(document.attachEvent){
returnfunction(type,element,handler){
element.attachEvent('on'+type,function(){
handler.apply(element,arguments);//attachEvent方法中，修复this指针问题
});
}
}
else{
returnfunction(type,element,handler){
element['on'+type]=handler;
}
}
})();
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航