JavaScript性能优化

1. 代码简洁

x=x+1；在不影响功能的情况下可以简写成x++；

2. 变量名和方法名在不影响寓意的情况下简单（可以选用首字母命名）

定义数组的长度可以取名为：ArrLen而不需要取为ArrayLength

3. 关于JS循环

（1）for(;;)：推荐使用，变量递增或递减应该使用嵌套的++或--，而不单独对循环变量赋值

（2）for(i)：效率最差，因为它需要查询Hash值，因此应该尽量少用；

（3）while()：性能与for(;;)持平。

4. 遍历数组时应该先将数组长度缓存，放入局部变量，避免多次查询数组长度

var len=arr.length

5. 尽量使用局部变量而不是全局变量

局部变量的访问速度比全局变量更快，全局变量其实是window对象的成员，而局部变量是放在函数栈里的。

6. 尽量少用eval

7. 字符串连接

如果是追加字符串，最好使用s+=anotherStr，而不是使用s=s+anotherStr。

如果要连接多个字符串，应该少使用+=，如s+=a; s+=b; s+=c，应该写成s+=a+b+c；

如果是手机字符串，最好使用数组的方式进行缓存，最后再使用join拼接。如下：

var arr=new Array(); 

for (var i=0; i<100; i++){

  arr.push(i.toString());

}

var str=arr.join('');

8. 类型转换

1. 把数字转换成字符串，用''+1最快，性能上来说：

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

尽量使用编译时就能使用的内部操作，这要比运行时使用的用户操作要快。

String()属于内部函数，所以速度很快，而.toString()要查询原型中的函数，所以速度逊色，new String()用于返回一个精确的副本。

2. 浮点数转换成整数型

其实parseInt()是用于将字符串转换成数字的，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。Math是内部对象，速度很快。

3. 对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显示调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转换成String()，所以直接调用这个方法效率会更高。

9. 尽量使用JSON格式来创建对象，而不是var obj=new Object()方法

前者属于直接复制，而后者需要调用构造器，因此前者性能更好。

10. 尽量使用JSON格式使用数组

使用JSON格式定义数组：[a1, a2, a3]而不是采用new Array(a1, a2, a3)这种语法。这一点和上一点类似，后者会调用Array的构造器。

11. 对字符串进行循环操作，例如替代、查找，就使用正则表达式

因为JS的循环速度比较慢，而正则表达式的操作是用C写成的API，性能比较好。

12. 插入HTML

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

13. 对象查询

使用[""]查询比.items()更快。

14. 定时器

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

15. 尽量减少DOM调用

在Web开发中，DOM的操作会导致浏览器执行回流(reflow)操作。我们应该尽可能减少DOM操作。

回流操作主要发生在几种情况下：

（1）改变窗体大小

（2）更改字体

（3）添加移除stylesheet块

（4）内容改变哪怕是输入框输入文字

（5）CSS虚类被触发如：hover

（6）更改元素的className

（7）当对DOM节点执行新增或者删除操作或者内容更改时

（8）动态设置一个style样式是（比如element.style.width="10px"）

（9）当获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值

解决问题的关键，就是限制通过DOM操作所引发回流的次数：

（1）在对当前DOM进行操作之前，尽可能多的做一些准备工作，保证N次创建，1次写入

（2）在对DOM操作之前，把要操作的元素，先从当前DOM结构中删除：

1）通过removeChild()或者replaceChild()实现真正意义上的删除；

2）设置该元素的display样式为“none”

（3）CSS部分

另外一个经常引起回流操作的情况是通过style属性对元素的外观进行修改，解决方法：

1）使用更改className的方式替换style.xxx=xxx；

2）使用style.cssText='';一次写入样式；

3）避免设置过多的行内样式；

4）添加的结构外元素尽量设置它们的位置为fixed或absolute

5）避免使用表格来布局

6）避免在CSS中使用JavaScript expression

（4）将获取的DOM数据进行缓存

（5）当对HTMLCollection对象操作时，应该将访问的次数尽可能的降至最低，最简单，你可以将length属性缓存在一个本地变量中，这样就能大幅度的提高循环效率。

16. 重构<script></script>调用方式或者合并JS文件来优化请求次数。

17. 对于大的JS对象，因为创建时的时间和空间的开销比较大，因此应该尽量考虑采用缓存。

18. 将JS脚本放在底部

19. 出去JS中的空白区域