日期:2014-05-16  浏览次数:20489 次

提高javascript函数的执行效率
为了测试javascript函数在执行的过程中,对局部变量的赋值开销以及缓存全局变量或者dom属性(方法)的开销,特别写了如下三个简单的测试函数:

函数一:正常使用,循环10000次调用document.getElementsByTagName
function test1(){
  for(var i=0;i<10000;i++){
  var el = document.getElementsByTagName('div');
  }
};

函数二:缓存document对象,作为减少函数调用中搜索作用域链的开销,但增加了一个局部变量的赋值开销

_d = document,循环的次数仍然是10000次。
function test2(){
  var el,_d = document;
  for(var i=0;i<10000;i++){
        el = _d.getElementsByTagName('div');
  }
};

函数三:缓存dom的方法进行调用在IE6下非常耗时,是三个函数中最慢的,并且在FF&chrome马上挂死掉.

function test3(){
  var el,_d = document.getElementsByTagName;
  for(var i=0;i<10000;i++){
  el = _d('div');
  }
};

下面是在IE6和FireFox3.0.14想进行测试的时间开销:

IE6下:

                           test1()                       test2()                      test3()

第一次:           406ms                      219ms                      1250ms

第二次:          516ms                       250ms                      1266ms

第三次:          469ms                       250ms                       1266ms

第四次:          453ms                       250ms                       1250ms

第五次:          422ms                       203ms                      1312ms

第六次:          437ms                       219ms                       1235ms

第七次:          422ms                       219ms                       1250ms

第八次:          454ms                &n