《优化JavaScript脚本的性能总结》由会员分享，可在线阅读，更多相关《优化JavaScript脚本的性能总结（5页珍藏版）》请在金锄头文库上搜索。
1、优化 JavaScript 脚本的性能总结JavaScript 性能优化重要吗？当然，如果你的JavaScript 只是做一些简单的表单验证，你几乎可以忽略。但是，如果你是构建一个复杂的基于JavaScript 的程序，例如webgame，富客户端，那么优化JavaScript 程序的性能就很重要了。瓶颈在哪里？如果你是急匆匆的搜索到这篇文章，觉得你的js 太缓慢了，可以先看看下面几个tips，或许对你有帮助：IE6，7 的 JavaScript 解释器非常差，比起firefox ，opera，chrome，safari 等浏览器，差距是数量级的。相反，这几个浏览器的JavaScript 效率
2、都非常的高，如果你的js 在这几个浏览器下面也很慢，才真正有问题。而事实上，对JavaScript 做优化，目前而言都是在对 IE6，7 做优化，而IE8 的 js 效率已经提升了很多，跟firefox 等没有数量级上的差距了，但是性能还是落后的。检查你代码里面的循环，递归调用等地方的代码，是否存在逻辑问题？或者说业务本身就这么复杂需要长时间的js 执行？检查代码里面的字符串拼接操作，IE6，7 的字符串拼接，应该说是其JavaScript 解释器的错误实现，导致IE6，7 在处理字符串拼接上存在严重的效率问题，具体的解决方法可以参看下面的详细介绍。检查页面DOM 元素的数量。页面DOM 元素
3、过多 ,会导致浏览器JS 运行和 DOM 渲染效率降低，这往往是一个根本性的原因，采用ext 做出来的系统，很多情况下会出现这个问题，而这个问题，目前而言并没有什么最佳的解决方案。如果ext 是选定的架构，那么应该在DOM 元素数量的控制上下一番功能。以下我们来具体的分析优化的具体实现。以上提到的几个tips 往往是解决的关键，除此之外的， 很多优化往往是需要到一个很高的数量级才会有明显的效果，所以在此顺便点评了优化指数，即做这个优化的必要性，5 星最高， 3 星程度就是基本一定要做的了。语言层次方面1)循环循环是很常用的一个控制结构，大部分东西要依靠它来完成，在JavaScript 中，我们
4、可以使用for(;),while(),for(in) 三种循环，事实上，这三种循环中for(in) 的效率极差，因为他需要查询散列键，只要可以就应该尽量少用。for(;) 和 while 循环的性能应该说基本（平时使用时）等价。而事实上， 如何使用这两个循环，则有很大讲究。 我在测试中有些很有意思的情况，见附录。最后得出的结论是：如果是循环变量递增或递减，不要单独对循环变量赋值，应该在它最后一次读取的时候使用嵌套的+或操作符。如果要与数组的长度作比较，应该事先把数组的length 属性放入一个局部变量中，减少查询次数。举例，假设arr 是一个数组，最佳的遍历元素方式为：for(var i=0,
5、 len = arr.length;i0;i-).优化指数： 1 星。除非你循环的次数达到万以上的数量级， 否则这样的优化并不能带来明显的收益，不过养成这样的写法是个好习惯。 for(in) 的效率有多差这个曹力没给出测试结果，但是我认为该怎么用还是怎么用，前提还是循环的次数，在jQuery 之类的框架源码里面都有很多的for(in) 的使用。2)局部变量和全局变量局部变量的速度要比全局变量的访问速度更快，因为全局变量其实是全局对象的成员，而局部变量是放在函数的栈当中的。优化指数： 2 星。将全局变量改成局部变量提高的性能也并不明显，但是合理设计程序的结构， 减少全局变量的使用是比较良好的编程
6、习惯，可以避免一些无意中带来的错误或者 bug。3)不使用 Eval 使用 eval 相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间。这时候使用JavaScript 所支持的闭包可以实现函数模版（关于闭包的内容请参考函数式编程的有关内容）优化指数： 3 星。关于 eval 我还没有进行过深入的测试，不过根据多个资料的介绍，eval确实会消耗大量时间，不适宜在程序中多使用。此外，with 语句也一样， 不适宜多使用。4)减少对象查找因为 JavaScript 的解释性，所以a.b.c.d.e，需要进行至少4 次查询操作，先检查a 再检查 a 中的 b，再检查b 中的 c，如此往下
7、。所以如果这样的表达式重复出现，只要可能， 应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。这一点可以和循环结合起来，因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var len=a.length，则就少了一次查询。优化指数： 1 星。 一样，减少对象查找这样提升的效率也很不明显，一样还是要到一个数量级才行。比如YUI 这样的，重度的命名空间，都是XX.XX.XX.XX，但它一样应用得很广泛。5)字符串连接如果是追加字符串，最好使用s+=anotherStr 操作，而不是要使用s=
8、s+anotherStr。如果要连接多个字符串，应该少使用+=，如s+=a; s+=b; s+=c;应该写成s+=a + b + c；而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用JavaScript 数组来收集，最后使用join 方法连接起来，如下 : var buf = new Array(); for(var i = 0; i String() .toString() new String()这条其实和下面的“直接量” 有点类似， 尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。String()属于内部函数，所以速度很快，而.t
9、oString() 要查询原型中的函数，所以速度逊色一些，new String()用于返回一个精确的副本。浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor() 或者 Math.round() 。Math 是内部对象，所以Math.floor() 其实并没有多少查询方法和调用的时间，速度是最快的。对于自定义的对象，如果定义了toString() 方法来进行类型转换的话，推荐显式调用 toString() ，因为内部的操作在尝试所有可能性之后，会尝试对象的toStr
10、ing() 方法尝试能否转化为String，所以直接调用这个方法效率会更高优化指数： 2.5 星。 这些优化一样是没办法得到多大的提升的，但是养成这样的写法与做法确实很有必要的。很多新手与老手的差距也都体现在对细节的处理上面。7)使用直接量其实这个影响倒比较小，可以忽略。什么叫使用直接量，比如，JavaScript 支持使用 param,param,param,. 来 直 接 表 达 一 个 数 组 ， 以 往 我 们 都 使 用new Array(param,param,)，使用前者是引擎直接解释的，后者要调用一个Array 内部构造器，所以要略微快一点点。同样， var foo = 的方式
11、也比var foo = new Object(); 快， var reg = /; 要比 var reg=new RegExp()快。优化指数： 1 星。使用直接量是现在很流行的做法，建议写法上养成一样的习惯，代码看起来会更清晰。8)字符串遍历操作对字符串进行循环操作，譬如替换、 查找，应使用正则表达式，因为本身JavaScript的循环速度就比较慢，而正则表达式的操作是用C 写成的语言的API，性能很好。优化指数： 1.5 星。优化是有前提的，看你需要操作的字符串有多大，普通的字符串，该用什么方式还是用什么方式。9)高级对象自定义高级对象和Date、RegExp 对象在构造时都会消耗大量时间
12、。如果可以复用，应采用缓存的方式。优化指数： 2 星。DOM 相关1)插入 HTML 很多人喜欢在JavaScript 中使用 document.write 来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML ，可以找一个容器元素，比如指定一个div 或 者span，并设置他们的innerHTML来将自己的HTML 代码插入到页面中。优化指数： 3 星。 document.write 虽然方便，但是不仅效率较低，同样也带来一些维护上困难。在你经常需要设置innerHTML的情况下，那就更不要去使用document.write 。2)对象查询使用 “ 查询要比.items() 更快
13、，这和前面的减少对象查找的思路是一样的，调用.items()增加了一次查询和函数的调用。优化指数： 2 星。使用 “ 提升的性能可以忽略，不过我觉得“ 的写法会更加清晰，此外， item()这个的方法只有IE 下才能用， firefox 下面是不行的。3)创建 DOM 节点通常我们可能会使用字符串直接写HTML来创建节点，其实这样做1.无法保证代码的有效性2.字符串操作效率低所以应该是用document.createElement()方法，而如果文档中存在现成的样板节点，应该是用 cloneNode() 方法， 因为使用createElement()方法之后， 你需要设置多次元素的属性，使用c
14、loneNode()则可以减少属性的设置次数同样如果需要创建很多元素，应该先准备一个样板节点。优化指数：2 星。同样的，直接用HTML方式来创建节点还是很多便利的，而createElement()的方式则要写不少代码。这性能跟便利之间，取舍其实完全在你自己了。4)定时器如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。setTimeout 每次要重新设置一个定时器。优化指数： 1 星。本身这2 个定时器使用的场合就不太一样。很多setTimeout 的场合用setInterval 并不适合。其他1)脚本引擎据测试 Microsoft 的 JScrip
15、t 的效率较Mozilla 的 Spidermonkey 要差很多， 无论是执行速度还是内存管理上，因为JScript 现在基本也不更新了。但SpiderMonkey不能使用ActiveXObject 2)文件优化文件优化也是一个很有效的手段，删除所有的空格和注释，把代码放入一行内，可以加快下载的速度，注意，是下载的速度而不是解析的速度，如果是本地， 注释和空格并不会影响解释和执行速度。优化指数： 5 星。产品化的代码， 用压缩工具处理后再放出是必须的。可用的工具很多，比如 YUI Compressor ，JS min。虽然它并不是提高程序的性能，但是JavaScript 作为客户端执行的程序
16、，更快下载到客户端就能更早得到执行，这个时间往往比你费尽心思的优化提高得多得多。想象一下，如果extjs 没有压缩，那么客户端需要多么漫长的等待才能看到界面。总结本文总结了在JavaScript 编程中所找到的提高JavaScript 运行性能的一些方法，其实这些经验都基于几条原则：1)直接拿手头现成的东西比较快，如局部变量比全局变量快，直接量比运行时构造对象快等等。2)尽可能少地减少执行次数，比如先缓存需要多次查询的。3)尽可能使用语言内置的功能，比如串链接。4)尽可能使用系统提供的API ，因为这些API 是编译好的二进制代码，执行效率很高。同时，一些基本的算法上的优化，同样可以用在JavaScript 中，比如运算结构的调整， 这里就不再赘述了。但是由于 JavaScript 是解释型的， 一般不会在运行时对字节码进行优化，所以这些优化仍然是很重要的。
