JavaScript Optimization

主要整理一下Js的一些优化技巧，有些技巧不仅在JS，在其它方面也有一定作用！按照条目方式列出，主要收录网上资料和图书资料，详见后。

1、循环

for(in)的效率极差，因为他需要查询散列键，for() while 差不多

如果要与数组的长度作比较，应该事先把数组的length属性放入一个局部变量中，减少查询次数
eg：arr是一个数组，最佳的遍历元素方式

for(var i=0, len = arr.length;i<len;i++){...}for(var i=arr.length;i>0;i--){...}//不考虑顺序情况下  

2、局部变量和全局变量
局部变量的速度要比全局变量的访问速度更快，因为全局变量其实是全局对象的成员，而局部变量是放在函数的栈当中的

3、不使用Eval
使用eval相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间。

4、减少对象查找
a.b.c.d.e，需要进行至少4次查询操作，如果程序中多次用到，最好用变量代替a.b，a.b.c等

5、字符串连接
如果是追加字符串，最好使用s+=anotherStr操作

如果要连接多个字符串，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("");

6、类型转换
数字转换成字符串("" + ) > String() > .toString() > new String()
浮点数转换成整型 Math.floor()或者Math.round()
说明：Math String都是内部对象，速度快点

7、字符串遍历操作
对字符串进行循环操作，譬如替换、查找，应使用正则表达式，因为本身JavaScript的循环速度就比较慢，而正则表达式的操作是用C写成的语言的API，性能很好。

8、高级对象
自定义高级对象和Date、RegExp对象在构造时都会消耗大量时间。如果可以复用，应采用缓存的方式。

9、插入HTML
很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他

们的innerHTML来将自己的HTML代码插入到页面中。

10、对象查询
使用[""]查询要比.items()更快，这和前面的减少对象查找的思路是一样的，调用.items()增加了一次查询和函数的调用。

11、创建DOM节点
通常我们可能会使用字符串直接写HTML来创建节点，其实这样做

无法保证代码的有效性

字符串操作效率低

所以应该是用document.createElement()方法，而如果文档中存在现成的样板节点，应该是用cloneNode()方法，因为使用createElement()方法之后，你需要设置多次元素的属性

，使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素，应该先准备一个样板节点。

12、定时器
如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。setTimeout每次要重新设置一个定时器。

13、文件优化
文件优化也是一个很有效的手段，删除所有的空格和注释，把代码放入一行内，可以加快下载的速度，注意，是下载的速度而不是解析的速度，如果是本地，注释和空格并不会影

响解释和执行速度。

14：If-Then-Else Structure
If you have a series of If-Then-Else statements, you should try your best to organize them from most likely to least likely. This way the program doesn't

have to traverse all the unlikely conditions to get to the likely ones, which will be called more often.

15、Limit Work Inside Loops

//Befor:with (Math) {for (var i=0;i<round(staticNum*(PI/12));i++) { testVar+=(2*log(6)) + (x/2); }}//After:with (Math) {var tester = round(staticNum*(PI/12));var valChange = (2*log(6)) + (x/2);}for (var i=0;i<tester;i++) { testVar+=valChange;}

16、The Unnecessary Variable Gotcha
If the code in newX is only used once, then all you have done* is waste time creating an extra variable.

18、IE create Index for dom object.So it faster use document.getElementsByTagName() or document.getElementById() than (var obj = document.getElementById()).

 

summarize

IE会对你的代码进行部分优化，还没弄清它的内部机制。

直接拿手头现成的东西比较快，如局部变量比全局变量快，直接量比运行时构造对象快等等。
尽可能少地减少执行次数，比如先缓存需要多次查询的。
尽可能使用语言内置的功能，比如串链接。
尽可能使用系统提供的API，因为这些API是编译好的二进制代码，执行效率很高

 

refrence：

http://home.earthlink.net/~kendrasg/info/js_opt/
http://blog.csdn.net/stefli/archive/2008/09/29/2994143.aspx
JavaScript王者归来