浏览器探测时的性能优化

 

浏览器探测时的性能优化

---

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

 

1. function addHandler(ele,eventType,hadler){
2. if(ele.addEventListener){
3. ele.addEventListener(eventType,handler,false);
4. }else { //IE
5. ele.attachEvent('on'+eventType,handler);
6. }
7. }

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

 

1. function addHandler(ele,eventType,hadler){
2. if(ele.addEventListener){
3. addHandler=(ele,eventType,hadler){ //覆盖现有的事件绑定函数
4. ele.addEventListener(eventType,handler,false);
5. }；
6. }else if(ele.attachEvent){ //IE8及以下
7. addHandler=(ele,eventType,hadler){
8. ele.attachEvent('on'+eventType,handler);
9. }；
10. }else{
11. ele['on'+eventType]=handler;
12. }
13. addHandler(ele,eventType,hadler)； //调用新函数（重写后）
14. }

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

 

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

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