JavaScript执行效率与性能提升方案

JavaScript性能优化概述

在前端开发领域，提升JavaScript的执行效率与性能至关重要。本节将深入探讨如何在实际项目开发中有效优化JavaScript的性能与运行速度。

循环结构优化

循环是编程中常用的控制结构，许多功能依赖其实现。在JavaScript中，主要存在for(;;)、while()和for(in)三种循环方式。实际上，for(in)循环因需查询散列键，效率极低，应尽量避免使用。相比之下，for(;;)和while循环在常规使用场景下性能基本相当。

然而，如何正确使用这两种循环方式却大有讲究。经过分析，得出以下结论：

若循环变量为递增或递减，应避免单独对循环变量进行赋值，而应在最后一次读取时使用嵌套的++或--操作符。若需与数组长度进行比较，应预先将数组的length属性存入局部变量，以减少查询次数。例如，假设arr为一个数组，最佳遍历方式如下：

 
for(var i=0, len = arr.length;i

或者，若无需关注顺序：

 
for(var i=arr.length;i>0;i--){...}

变量作用域与访问速度

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

局部变量的访问速度快于全局变量，因为全局变量实质上是全局对象的成员，而局部变量存储于函数栈中。

避免使用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为动态类型语言，无法指定变量类型。

1.将数字转换为字符串，建议使用"""" + 1，虽然外观略显丑陋，但效率最高。性能对比如下：

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

此条与下述“直接量”类似，尽量使用编译时即可执行的内部操作，而非运行时用户操作，以提升速度。

String()属于内部函数，速度较快；.toString()需查询原型中的函数，速度稍逊；new String()用于返回精确副本。

2.浮点数转换为整型，此过程易出错。许多人喜欢使用parseInt()，但parseInt()用于将字符串转换为数字，而非浮点数与整型之间的转换。应使用Math.floor()或Math.round()。

此外，与第二节对象查找问题不同，Math为内部对象，因此Math.floor()并无过多查询与调用时间，速度最快。

3.对于自定义对象，若已定义toString()方法进行类型转换，推荐显式调用toString()。因为内部操作在尝试所有可能性后，会尝试对象的toString()方法以转化为String，直接调用此方法效率更高。

使用直接量与正则表达式

此影响较小，可忽略。所谓使用直接量，例如JavaScript支持使用[param,param,param,...]直接表达数组，以往均使用new Array(param,param,...)。前者由引擎直接解释，后者需调用Array内部构造器，因此前者略快。

同样，var foo = {}的方式比var foo = new Object();快，var reg = /../;比var reg=new RegExp()快。

对字符串进行循环操作，如替换、查找，应使用正则表达式。因为JavaScript循环速度较慢，而正则表达式操作由C语言编写的API实现，性能优异。

高级对象与DOM操作优化

自定义高级对象与Date、RegExp对象在构造时均消耗大量时间。若可复用，应采用缓存方式。

插入HTML

许多开发者喜欢在JavaScript中使用document.write生成页面内容。实际上，这种方式效率较低。若需直接插入HTML，可寻找容器元素，如指定div或span，并设置其innerHTML以将HTML代码插入页面。

使用[""""]查询比.items()更快，这与前文减少对象查找的思路一致，调用.items()增加了一次查询与函数调用。

通常，我们可能使用字符串直接编写HTML来创建节点，但这样做

无法保证代码有效性

字符串操作效率低

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

定时器与脚本引擎选择

若针对不断运行的代码，不应使用setTimeout，而应使用setInterval。因为setTimeout每次需重新设置定时器。

脚本引擎

据测试，Microsoft的JScript效率较Mozilla的Spidermonkey相差甚远，无论是执行速度还是内存管理，因为JScript已基本停止更新。但SpiderMonkey无法使用ActiveXObject。

文件优化与总结

文件优化也是有效手段，删除所有空格和注释，将代码放入一行内，可加快下载速度。注意，这是下载速度而非解析速度，若为本地文件，注释和空格不会影响解释与执行速度。

总结：直接使用手头现成资源更快，如局部变量比全局变量快，直接量比运行时构造对象快等。尽可能减少执行次数，例如预先缓存需多次查询的内容。尽可能使用语言内置功能，如字符串连接。尽可能使用系统提供的API，因为这些API为编译好的二进制代码，执行效率极高。同时，一些基本算法优化同样适用于JavaScript，如运算结构调整，此处不再赘述。

由于JavaScript为解释型语言，运行时一般不对字节码进行优化，因此这些优化仍非常重要。若对提升JavaScript运行速度感兴趣，还可查阅本网站其他提升JavaScript性能的文章。