提高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                        265ms                       1250ms

第九次：          437ms                       219ms                         1281ms

第十次：          406ms                        219ms                         1250ms

 

FireFox下：

                           test1()                       test2()                      test3()

第一次：           229ms                     156ms                      -

第二次：           226ms                      184ms                     -

第三次：            248ms                    181ms                      -

第四次：            184ms                     159ms                     -

第五次：             215ms                     180ms                    -

第六次：            210ms                      177ms                    -

第七次：            196ms                       169ms                   -

第八次：            202ms                        175ms                  -

第九次：             192ms                        175ms                 -

第十次：             202ms                        175ms                 -

从上面的测试数据可以得出比较重要的结论：

1，FireFox在dom的操作效率上确实比IE要快了许多，这点毫无疑问的。

2，在一个函数的执行过程中，如果对dom存在多次的引用，可以通过缓存成函数的局部变量来缩短搜索scopechain的开销，加快函数调用的执行效率，但这里也要考虑局部变量赋值的开销情况。

3，在IE6下发现缓存document.getElementById或者document.getElementsByTagName，然后进行调用的执行效率更差，并且该缓存的方法在Firefox和chrome下无法执行，出现类型错误等，具体原因主要是Firefox等跟IE对host object的实现不一样导致的，而ECMA对host object没有明确的规定，经过测试发现：

IE下：

var fn = document.getElementsByTagName;

fn('divid'); //可以正常进行调用

alert(typeof fn); //输出object类型，而不是function类型

fn.call(document, 'divid');//无法调用，提示没有call方法

fn.apply(document, ['divid']);//无法调用，提示没有apply方法

 

Firefox下：

var fn = document.getElementsByTagName;

fn('divid'); //无法进行调用，但下面的方法可以：

//主要原因是把document的方法作为一个引用保持到一个全局变量导致this指针变成了global对象，因此进行调用的时候

//提示非法类型错误

fn.call(document, 'divid');

 

alert(typeof fn); //输出function类型，而不是object类型

fn.call(document, 'divid'); //可以正常使用

fn.apply(document, ['divid']); //可以正常使用

 

4：对函数进行引用保存后再调用的时候，要主要可能导致内部的this指针“漂移”的问题，特别是之前是一个对象的方法，而后保存成一个全局的变量，而后者进行调用的时候，实际上this指针跟之前的已经不一样了。

5，对dom中的方法，IE和Firefox等存在较多的差异，Firefox相对更加标准，IE对dom的方法和属性的类型均是object，对应的方法也可能不存在对应的call和apply方法。（注意：ECMA－262规范对host object的类型等没有明确的规定）