浏览器探测时的性能优化

摘要：在进行浏览器探测时，会基于浏览器的功能就行分支判断，导致做大量的重复工作。针对这类问题，可以有两种解决方案：延迟加载和预先加载。 基于浏览器功能的探测：function addHandler(ele,eventType,hadler){ if(ele.addEventListener){ ele.addEventListener(eventType,handler,false)

在进行浏览器探测时，会基于浏览器的功能就行分支判断，导致做大量的重复工作。针对这类问题，可以有两种解决方案：延迟加载和预先加载。 
基于浏览器功能的探测：

function addHandler(ele,eventType,hadler){
if(ele.addEventListener){
ele.addEventListener(eventType,handler,false);
}else { //IE
ele.attachEvent('on'+eventType,handler);
}
}

1、延迟加载 
延时加载，即在函数被调用前，不会对浏览器类型进行判断， 
在函数被调用时，再进行浏览器检测。

function addHandler(ele,eventType,hadler){
if(ele.addEventListener){
addHandler=(ele,eventType,hadler){ //覆盖现有的事件绑定函数
ele.addEventListener(eventType,handler,false);
}；
}else if(ele.attachEvent){ //IE8及以下
addHandler=(ele,eventType,hadler){
ele.attachEvent('on'+eventType,handler);
}；
}else{
ele['on'+eventType]=handler;
}
addHandler(ele,eventType,hadler)； //调用新函数（重写后）
}

调用延时加载函数时，只有在第一次调用时，会对浏览器进行探测，之后都会调用重写后的新函数，不再进行检测。因此，只有在第一次调用时，会消耗较长时间，之后都会很快。 
适用性：函数在页面中不会立即调用时，延迟加载是最好的选择。 
2、条件预加载 
在脚本加载期间进行浏览器检测，而不会等到函数被调用。检测操作依然只执行一次，只不过来得更早一些

var addHandler=document.body.addEventListener ? function(ele,eventType,hadler){ ele.addEventListener(eventType,handler,false);
} : function (ele,eventType,hadler){
ele.attachEvent('on'+eventType,handler);
}

适用性：一个函数马上要用到，并且在整个页面中频繁调用