JavaScript 脚本性能优化实战指南

引言：JavaScript 性能优化的背景与目标

随着网络带宽和硬件性能的不断提升，现代网站广泛采用富客户端技术，其中 Ajax 是最为流行的实现方式之一。由于 JavaScript 属于解释型语言，其执行效率通常低于 C 或 Java 等编译型语言，这在一定程度上限制了客户端能够处理的任务复杂度。为了改善这一状况，本文将基于过往对 JavaScript 进行的多项性能测试，分享优化脚本性能的实际经验，旨在协助开发者提升代码执行效率。

语言层面的基础优化策略

语言层面的优化策略

循环结构的选择与实现细节

循环结构的选择与优化

循环是 JavaScript 中最基础的控制结构，绝大多数逻辑处理都依赖于此。在 JavaScript 中，主要存在 for(;;)、while() 和 for(in) 三种循环方式。测试表明，for(in) 的效率极低，因为它需要查询对象的散列键，因此应尽量避免使用。相比之下，for(;;) 和 while() 在常规使用场景下的性能基本相当。

然而，循环的具体实现方式对性能有显著影响。在相关测试中观察到一些有趣的现象（详见附录），最终得出以下结论：

当循环变量进行递增或递减操作时，应避免单独对循环变量赋值，而应在最后一次读取时使用嵌套的 ++ 或 -- 操作符。

若循环条件涉及数组长度比较，应预先将数组的 length 属性赋值给一个局部变量，以减少重复查询带来的性能损耗。

变量作用域对访问速度的影响

局部变量与全局变量的访问差异

局部变量的访问速度显著快于全局变量。这是因为全局变量实际上是全局对象的成员，访问时需要经过作用域链查找；而局部变量直接存储在函数的栈空间中，访问路径更短。

避免 Eval 与减少对象查找

避免使用 Eval

使用 eval() 函数会导致解释引擎在运行时重新解析并执行代码字符串，这一过程消耗大量时间。建议利用 JavaScript 支持的闭包特性来实现函数模板（关于闭包的详细信息可参考函数式编程相关资料）。

减少对象属性查找次数

由于 JavaScript 的解释执行特性，表达式 a.b.c.d.e 至少需要进行 4 次属性查找：先查找 a，再查找 a 中的 b，接着是 b 中的 c，依此类推。如果此类表达式频繁出现，应尽可能简化，可通过局部变量将中间结果缓存，从而减少查找次数。

此优化策略可与循环结合使用。在遍历字符串或数组时，其长度通常保持不变。每次循环中查询 a.length 都会产生额外开销，因此建议预先定义 var len = a.length，从而避免重复查询。

字符串连接与类型转换技巧

字符串连接的优化技巧

在追加单个字符串时，推荐使用 s += anotherStr 语法，而非 s = s + anotherStr，前者在语义上更简洁且效率略高。

当需要连接多个字符串时，应减少连续使用 += 操作符的次数。例如：

s += a; s += b; s += c;

应改写为：

s += a + b + c;

对于需要多次拼接字符串的场景（如收集大量字符串），建议使用数组作为缓冲区。具体做法是使用 JavaScript 数组收集字符串，最后通过 join() 方法一次性连接，示例如下：

var buf = new Array(); for(var i = 0; i < 100; i++){ buf.push(i.toString()); } var all = buf.join("");

类型转换的性能考量

类型转换是 JavaScript 开发者常犯的错误之一。由于 JavaScript 是动态类型语言，变量类型无法在声明时指定。

使用 "" + 1 进行类型转换虽然代码可读性稍差，但执行效率最高。从性能角度来看：

("" +) > String() > .toString() > new String()

这一原则与使用直接量类似：尽量使用编译时即可确定的内部操作，而非运行时的用户自定义操作，以获得更高的执行速度。

String() 属于内部函数，执行速度较快；.toString() 需要查询原型链中的方法，速度稍慢；new String() 用于返回对象的精确副本，开销最大。

在浮点数转整型时，许多人习惯使用 parseInt()，但这主要用于将字符串转换为数字，而非处理浮点数与整型之间的转换。推荐使用 Math.floor() 或 Math.round()。

与对象属性查找不同，Math 是 JavaScript 的内部对象，因此 Math.floor() 的查询和调用开销极小，执行速度最快。

如果自定义对象定义了 toString() 方法用于类型转换，推荐显式调用该方法。因为内部机制在尝试所有可能性后，会尝试调用对象的 toString() 方法以转换为 String，直接调用此方法效率更高。

使用直接量与高级对象缓存

使用直接量（Literals）

虽然影响较小，但使用直接量仍优于构造函数。例如，JavaScript 支持使用 [param, param, ...] 直接定义数组，而以往需使用 new Array(param, ...)。前者由引擎直接解释，后者需调用 Array 内部构造器，因此直接量方式略快。

同理，var foo = {} 比 var foo = new Object(); 更快，var reg = /../; 比 var reg = new RegExp(); 更快。

对字符串进行循环操作（如替换、查找）时，应优先使用正则表达式。由于 JavaScript 本身的循环速度较慢，而正则表达式的底层实现由 C 语言编写，性能更为优越。

高级对象的构建与复用

自定义高级对象以及 Date、RegExp 对象在构造时均会消耗大量时间。如果这些对象可以被复用，应采用缓存策略以避免重复创建。

DOM 操作与定时器优化

DOM 操作优化

HTML 插入策略

许多开发者习惯在 JavaScript 中使用 document.write 生成页面内容，但这种方式效率较低。若需直接插入 HTML，建议选择一个容器元素（如 div 或 span），并通过设置其 innerHTML 属性来插入 HTML 代码。

对象查询优化

使用 [""] 方式查询属性比调用 .items() 更快，这与减少对象查找的思路一致，因为调用 .items() 会增加一次属性查找和函数调用的开销。

创建 DOM 节点的最佳实践

通常，开发者可能倾向于使用字符串直接编写 HTML 来创建节点，但这样做存在以下问题：

无法保证代码的有效性和安全性。

字符串操作的效率较低。

因此，推荐使用 document.createElement() 方法创建节点。如果文档中已存在现成的样板节点，应使用 cloneNode() 方法，因为使用 createElement() 需要多次设置元素属性，而 cloneNode() 可减少属性设置次数——同样，若需创建大量元素，应预先准备一个样板节点。

脚本引擎差异与文件优化

定时器的使用建议

对于需要持续运行的代码，应使用 setInterval 而非 setTimeout。因为 setTimeout 每次执行后都需要重新设置定时器，增加了额外开销。

其他影响因素

脚本引擎的差异

根据测试，Microsoft 的 JScript 引擎在效率和内存管理上均显著落后于 Mozilla 的 SpiderMonkey 引擎，且 JScript 目前已基本停止更新。需要注意的是，SpiderMonkey 不支持 ActiveXObject。

文件体积优化

文件优化是提升性能的有效手段。删除所有空格和注释，并将代码压缩至单行，可以加快下载速度。需注意，这影响的是下载速度而非解析速度；在本地环境中，空格和注释不会影响解释和执行速度。

总结与参考资料

总结

本文总结了在 JavaScript 编程中提升运行性能的一些方法，这些经验主要基于以下几条原则：

优先使用现成的资源，例如局部变量比全局变量快，直接量比运行时构造的对象快。

尽可能减少执行次数，例如预先缓存需要多次查询的数据。

尽可能使用语言内置的功能，如字符串连接操作。

尽可能使用系统提供的 API，因为这些 API 是编译好的二进制代码，执行效率极高。

同时，一些基本的算法优化（如调整运算结构）同样适用于 JavaScript。由于 JavaScript 是解释型语言，通常不会在运行时对字节码进行优化，因此这些手动优化显得尤为重要。

当然，部分技巧同样适用于其他解释型语言，可供参考。

参考资料

http://www.umsu.de/jsperf/ 各种浏览器的测试对比

http://home.earthlink.net/~kendrasg/info/js_opt/

附录 1

由于部分早期测试代码已遗失，现补充部分测试代码如下：

var print;

if(typeof document != "undefined" ){

print = function(){

document.write(arguments[0]);

}else if(typeof WScript != "undefined" ){

print = function(){

WScript.Echo(arguments[0],arguments[1],arguments[2]);

function empty(){

function benchmark(f){

var i = 0;

var start = (new Date()).getTime();

while(i < pressure){

f(i++);

var end = (new Date()).getTime();

WScript.Echo(end-start);

i=0

start = (new Date()).getTime();

while(i < 60000){

c = [i,i,i,i,i,i,i,i,i,i];

i++;

end = (new Date()).getTime();

WScript.Echo(end-start);

i=0

start = (new Date()).getTime();

while(i < 60000){

c = new Array(i,i,i,i,i,i,i,i,i,i);

i++;

var end = (new Date()).getTime();

WScript.Echo(end-start);