首页 > 代码库 > 浏览器探测时的性能优化

浏览器探测时的性能优化

 

浏览器探测时的性能优化


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

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

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

浏览器探测时的性能优化