JS  优化已经讨论了很多了，最近又看到  aimingoo  的一篇。大体上，aimingoo  的说法都是非常正确的。

除了像  aimingoo  做个案研究外，这里我想从更一般的角度总结在浏览器编程中  JS  优化的几个原则。

首先，与其他语言不同，JS  的效率很大程度是取决于  JS engine  的效率。除了引擎实现的优劣外，引擎自己也会为一些特殊的代码模式采取一些优化的策略。例如  FF、Opera  和  Safari  的  JS  引擎，都对字符串的拼接运算（+）做了特别优化。显然，要获得最大效率，就必须要了解引擎的脾气，尽量迎合引擎的口味。所以对于不同的引擎，所作的优化极有可能是背道而驰的。

而如果做跨浏览器的  web  编程，则最大的问题是在于  IE6（JScript 5.6）！因为在不打  hotfix的情况下，Jscript  引擎的垃圾回收的  bug，会导致其在真实应用中的  performance  跟其他浏览器根本不在一个数量级上。因此在这种场合做优化，实际上就是为  Jscript  做优化！

所以第一原则就是只需要为  IE6（未打补丁的  JScript 5.6或更早版本）做优化！

如果你的程序已经优化到在  IE6下可以接受的性能，那基本上在其他浏览器上性能就完全没有问题。

因此，注意我下面讲的许多问题在其他引擎上可能完全不同，例如在循环中进行字符串拼接，通常认为需要用  Array.join  的方式，但是由于  SpiderMonkey  等引擎对字符串的“+”运算做了优化，结果使用  Array.join  的效率反而不如直接用“+”！但是如果考虑  IE6，则其他浏览器上的这种效率的差别根本不值一提。

JS  优化与其他语言的优化也仍然有相同之处。比如说，不要一上来就急吼吼的做优化，那样毫无意义。优化的关键，仍然是要把精力放在最关键的地方，也就是瓶颈上。一般来说，瓶颈总是出现在大规模循环的地方。这倒不是说循环本身有性能问题，而是循环会迅速放大可能存在的性能问题。

所以第二原则就是以大规模循环体为最主要优化对象。

以下的优化原则，只在大规模循环中才有意义，在循环体之外做此类优化基本上是没有意义的。

目前绝大多数  JS  引擎都是解释执行的，而解释执行的情况下，在所有操作中，函数调用的效率是较低的。此外，过深的  prototype  继承链或者多级引用也会降低效率。Jscript  中，10级引用的开销大体是一次空函数调用开销的1/2。这两者的开销都远远大于简单操作（如四则运算）。

所以第三原则就是尽量避免过多的引用层级和不必要的多次方法调用。

特别要注意的是，有些情况下看似是属性访问，实际上是方法调用。例如所有  DOM  的属性，实际上都是方法。在遍历一个  NodeList  的时候，循环条件对于  nodes.length  的访问，看似属性读取，实际上是等价于函数调用的。而且  IE DOM  的实现上，childNodes.length  每次是要通过内部遍历重新计数的。（My god，但是这是真的！因为我测过，childNodes.length  的访问时间与  childNodes.length  的值成正比！）这非常耗费。所以预先把  nodes.length  保存到  js  变量，当然可以提高遍历的性能。

同样是函数调用，用户自定义函数的效率又远远低于语言内建函数，因为后者是对引擎本地方法的包装，而引擎通常是  c,c++,java  写的。进一步，同样的功能，语言内建构造的开销通常又比内建函数调用要效率高，因为前者在  JS  代码的  parse  阶段就可以确定和优化。

所以第四原则就是尽量使用语言本身的构造和内建函数。

这里有一个例子是高性能的  String.format  方法。String.format  传统的实现方式是用String.replace(regex, func)，在  pattern  包含  n  个占位符（包括重复的）时，自定义函数  func  就被调用  n  次。而这个高性能实现中，每次  format  调用所作的只是一次  Array.join  然后一次  String.replace(regex, string)的操作，两者都是引擎内建方法，而不会有任何自定义函数调用。两次内建方法调用和  n  次的自定义方法调用，这就是性能上的差别。

同样是内建特性，性能上也还是有差别的。例如在  Jscript  中对于  arguments  的访问性能就很差，几乎赶上一次函数调用了。因此如果一个可变参数的简单函数成为性能瓶颈的时候，可以将其内部做一些改变，不要访问  arguments，而是通过对参数的显式判断来处理。

比如：

代码

1.      function sum() {   

2.          var r = 0;   

3.          for (var i = 0; i < arguments.length; i++) {   

4.              r += arguments[i];   

5.          }   

6.          return r;   

7.      }   

这个  sum  通常调用的时候个数是较少的，我们希望改进它在参数较少时的性能。如果改成：

代码

1.      function sum() {   

2.          switch (arguments.length) {   

3.              case 1: return arguments[0];   

4.              case 2: return arguments[0] + arguments[1];   

5.              case 3: return arguments[0] + arguments[1] + arguments[2];   

6.              case 4: return arguments[0] + arguments[1] + arguments[2] + arguments[3];   

7.              default:   

8.                  var r = 0;   

9.                  for (var i = 0; i < arguments.length; i++) {   

10.                  r += arguments[i];   

11.              }   

12.              return r;   

13.      }   

14.  }   

其实并不会有多少提高，但是如果改成：

代码

1.      function sum(a, b, c, d, e, f, g) {   

2.          var r = a ? b ? c ? d ? e ? f ? a + b + c + d + e + f : a + b + c + d + e : a + b + c + d : a + b + c : a + b : a : 0;   

3.          if (g === undefined) return r;   

4.          for (var i = 6; i < arguments.length; i++) {   

5.              r += arguments[i];   

6.          }   

7.          return r;   

8.      }   

就会提高很多（至少快1倍）。

最后是第五原则，也往往是真实应用中最重要的性能障碍，那就是尽量减少不必要的对象创建。

本身创建对象是有一定的代价的，但是这个代价其实并不大。最根本的问题是由于  Jscript  愚蠢之极的垃圾回收调度算法，导致随着对象个数的增加，性能严重下降（据微软的人自己说复杂度是  O(n^2)）。

比如我们常见的字符串拼接问题，经过我的测试验证，单纯的多次创建字符串对象其实根本不是性能差的原因。要命的是在对象创建期间的无谓的垃圾回收的开销。而  Array.join  的方式，不会创建中间字符串对象，因此就减少了那该死的垃圾回收的开销。

因此，如果我们能把大规模对象创建转化为单一语句，则其性能会得到极大的提高！例如通过构造代码然后  eval——实际上  PIES  项目中正在根据这个想法来做一个专门的大规模对象产生器……

好了上面就是偶总结的  JS  优化五大原则。