编程实践

避免双重求值

其实就是字符类型的js代码被运行时所产生的第二次运行求值

我们都知道eval()方法是可以将字符类型的js代码运行的,但是除了它还有其他三种方法也支持。

  1. new Function()
  2. setTimeout()
  3. setInterval()

这三个方法也都支持传入一个字符串类型的js代码,然后当这个函数运行后会识别这个字符并运行传入的js。

这样就会产生两次求值,其中eval和Function这两种方法用的很少,甚至不使用了,而定时器确是比较常用的手段,所以为了规避这个问题,定时器里面第一个参数不要传字符,而是用函数封装。

避免重复的工作

在事件函数上,我们要做两个判断,要判断这个浏览器是支持dom 2级的事件还是ie的事件,所以要做判断,常用的方式如下:

function addEvent(element,type,fn) {
    if(element.addEventListener) {
        element.addEventListener(type,fn,false);
    }else {
        element.attachEvent('on'+type,fn);
    }
}

function removeEvent(element,type,fn) {
    if(element.removeEventListener) {
        element.removeEventListener(type,fn,false);
    }else {
        element.detachEvent('on'+type,fn);
    }
}

这样写好像已经优化的很好了,自动判断浏览器支持,但是,事实上当我们每次运行一次addEvent函数时,都会if判断一次,然而事实上并不需要每次运行判断一次,因为用户不可能中途突然更改浏览器,所以,这个判断只需要运行一次即可。

延迟加载

function addEvent(element,type,fn) {
    if(element.addEventListener) {
        addEvent = function(element,type,fn){
            element.addEventListener(type,fn,false);
        }
    }else {
        addEvent = function(element,type,fn){
             element.attachEvent('on'+type,fn);
        }
    } 
   addEvent(element,type,fn);    
}

function removeEvent(element,type,fn) {
    if(element.removeEventListener) {
        removeEvent = function(element,type,fn){
            element.removeEventListener(type,fn,false);
        }
    }else {
        removeEvent = function(element,type,fn){
            element.detachEvent('on'+type,fn);
        }    
    }
    removeEvent(element,type,fn);
}

第一次判断完重写整个函数,然后再次调用,下一次运行的时候已经是判断好的函数了,这里就可以加快运行速度。

使用这种方法会在第一次调用函数时消耗较长的时间,还有另一种方式可以更快的运行。

条件预加载

var addEvent = document.body.addEventListener ? function(element,type,fn) { element.addEventListener(type,fn,false); 
  } : function(element,type,fn){                element.attachEvent('on'+type,fn);
  };

var removeEvent = document.body.removeEventListener ? function(element,type,fn){
 element.removeEventListener(type,fn,false);
    } : function(element,type,fn){
 element.detachEvent('on'+type,fn);
    };   

我们知道,当js代码被下载完毕后是会被自动执行一次的,那么在这个自动执行的时候执行了三元运算,此时将判断好的函数赋值给实例,从而第一调用时就是正确的函数,没有了第一次判断所用的耗时。

0
  • 本文分类:javascript高性能
  • 本文标签:事件
  • 流行热度:已超过 54 人围观了本文
  • 发布日期:2019年06月17日 - 13时08分22秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。
微信收款码
微信收款码