正在加载中

最后更新于 2019年06月17日

避免双重求值

其实就是字符类型的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代码被下载完毕后是会被自动执行一次的,那么在这个自动执行的时候执行了三元运算,此时将判断好的函数赋值给实例,从而第一调用时就是正确的函数,没有了第一次判断所用的耗时。

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao

登录