有关js性能的总结(二)

2.选择正确的方法
2)优化循环
减值迭代:
很多的循环都是从0开始,循环到特定的值结束;很多情况下,从最大值开始,在循环中不断减值的迭代器更高效。
简化终止条件:
由于每次循环都会计算终止条件,所以要避免属性查找或其他O(n)的操作
简化循环体:
循环体是执行最多的,要确保它被最大限度的优化,确保没有某些可以被很容易移出循环体的密集计算。
使用后测试循环:
for,while都是前测试循环,do-while属于后测试循环,可以避免最终终止条件的计算,运行会更快。
3)展开循环
如果处理的是大数据集,可以使用,ps:高设670
4)性能的其他注意事项
原生方法较快:
尽量使用原生方法而不是自己用js重写一个,尤其是Math对象中的一些方法
switch语句较快:
如果有一系列的if-else语句,可以转换成单个的switch语句可以运行更快;
还可以把case语句按照最可能到最不可能的顺序进行排列,进一步优化switch语句
位运算符较快:
进行数学运算的时候,位运算比任何其他布尔运算或算数运算更快。
例如:取模,逻辑与逻辑或都可以考虑用位运算来替换。
3.最小化语句数
1)多个变量声明
var a,b,c;
2)插入迭代值

可以合并为一句

3)使用数组和对象字面量
除非必要,否则尽量使用数组和对象的字面量表达方式来消除不必要的语句

4.优化DOM交互
1)最小化现场更新
一旦需要访问的DOM部分是已经显示的页面的一部分,就是在进行一个现场更新。
推荐使用文档树来构建DOM结构,在把它添加到页面已有的元素中,这样可以避免现场更新和页面闪烁问题。

一旦需要更新DOM,先考虑使用文档片段来构建DOM结构,然后再把它添加到现存的文档中。
2)使用innerHTML
对于大的DOM更改,使用innerHTML要比使用标准DOM方法创建同样的DOM结构快很多,使用innerHTML的关键在于:最小化调用它的次数。
调用innerHTML,实际上就是一次现场更新,构建好一个字符串然后一次性调用innerHTML要比调用innerHTML多次快很多。
3)使用事件代理
页面上的事件处理程序的数量和页面响应用户交互的速度之间有个负相关,最好用事件代理(事件冒泡)
4)注意HTMLCollection
优化HTMLCollection访问最重要的地方就是循环

这里的关键在于长度length存入了len变量,而不是每次都去访问HTMLCollection的length属性。当在循环中使用HTMLCollection的时候,下一步应该是获取要使用的项目的引用,以便避免在循环体内多次调用HTMLCollection

上面的代码添加了image,保存了当前的图像,这之后,在循环体内就没有理由再访问images的HTMLCollection了。

编写js的时候,一定要知道何时返回HTMLCollection对象,这样就可以最小化对它们的访问,发生以下情况会返回HTMLCollection对象:
进行了对getElementsByTagName()的调用
获取了元素的childNodes属性
获取了元素的attributes属性
访问了特殊的集合,eg:document.forms,document.images等

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复