javascript性能优化

javascript性能优化

一、DOM

1、减少访问DOM的次数，把运算量尽量留在ECMAscript端处理（因为访问dom的次数越多，代码运行速度越慢）；

2、HTML集合

它是包含了dom节点引用的类数组对象（没有数组对象特有的方法：eg：push()、slice()等，但提供了类似数组的length属性，同时也能以数字索引的方式访问列表中元素）

document.getElementsByName();
document.getElementsByClassName();
document.getElementsByTagName();

等方法的返回值都是html集合，

此外，document.images,document.links,document.forms,document.forms[0].elements,childNodes等属性的返回值均为html集合；

注：导致html集合低效的因素：html集合是以一种“假定时态”实时存在，而且一直与文档保持连续，所以当你每次需要最新信息时（刷新），都会重复执行查询的过程；

所以，在循环的条件控制语句中并不推荐读取数组的length属性的做法，推荐应该将length存在一个局部变量中，然后再在循环语句中使用（读取一个集合的length比读取普通数组的length要慢很多（因为每次都要重新查询））

建议：在循环中使用局部变量存储集合引用和集合元素

3、DOM元素

（1）在所有浏览器中children都比childNodes快（特别是IE）

（2）使用选择器API代替getElementsByTagName()获取dom节点会提升访问速度

选择器API与getElementsByTagName区别，详解请参考：点击打开链接





eg:

var elements = document.querySelectorAll('#navi a')

;返回一个引用列表NodeList（包含着匹配节点的类数组对象不是html集合不会对应实时文档结构，避免了html集合引起的性能）

4、最小化重绘和重排

二、算法和流程控制

1、在for循环中初始化var语句创建的都是函数级变量，而不是循环级；

2、建议不要使用for-in循环遍历数组成员，在js的四种循环中，for-in循环最慢吗，其他三种都差不多

当需要便利一个属性数量未知的对象时才使用for-in循环

① for(){

};
② while(){

};
③ do{

}while();

注：当所要执行的效果与数组（类数组）的顺序无关时，可以通过颠倒顺序来提高循环性能

3、优化if-else

（1）将最可能出现的条件放在首位

（2）把if-else组织成一系列嵌套的if-else语句

4、在判断条件较多时，使用查找表比if-else 、switch快

5、当遇到栈溢出错误时，可将方法改为迭代算法，或使用Memoization来避免重复计算

详解Memoization点击打开链接