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节点会提升访问速度
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