WEB学习进阶之路-之性能优化一
本章探讨下关于js优化中,关于代码部分的问题。
js中最常见的的就是一些条件,循环语句,dom操作,事件绑定等,这些都是再优化中需要考虑的重中之重。
不过本章先讨论条件语句和循环语句的优化
if else 和 switch case
对于这两个条件表达式来说,性能几乎相差无几,虽然是无几,但还是有些区别的๑乛◡乛๑
当然上面的话都是有前提的,比如说条件语句不超过几十个,如果说有几百几千,那另当别论,在杠我发配你去工地ε=(・д・`*)ハァ…
下面举个例子说明下他们之间的优劣
有什么区别呢,当使用if else时,最差的情况是什么呢,就是a=4, js需要判断5次才能找到正确的分支,而switch是直接找到,只需一次,这里就不得不提下
跳跃表(jump table)了, 根据变量的值,跳转到对应的条件语句哪里,只需一次,就可以到达相应位置。
对于if else,随着条件的不同,第一次不需要跳转记为n0,第二次需要跳一次记为n1,第三次跳2次记为n2,第N次需要跳转n-1记为n(i-1),咱们假设每个条件出现的概率是相等的,那么通过可以得出公式
,当n=3时,刚好跳转的次数与switch相等,所以基本上就有了下面if else使用第一条的这个说法,或许还有其他想法呢,比如说:我想把
if() elseif() else()三种情况刚好用完呢,我就是这么强迫症,哈哈,你强迫正确了。
总结下用if else的情况
条件不大于3条,最多3条,注意这里,还要对代码进行人工优化,什么意思呢,就是说,将最可能的条件放到最上面,以上面的if else举例,比如a=4的时候最多,那么if (4 == a)放在第一条就是最优解。
条件是表达式,比如 a + b这种数学运算,再比如范围判断 3<a<10
条件是动态的,比如比较直是变量,或者运算或者请求返回值
总结下用switch case的情况
条件的值不连续,是离散的,比如, 1,3,4,9等等
条件是固定值
条件一般是数字或者字符串
条件是可以枚举的,不能是无限的
另外还有一个优化的方案,在一些特定场景中使用查找表也是一个不错的方法,
比如
var map1 = ['a', 'b', 'c', 'd']; console.log(map1[1]);
var map2 = ['a' : '中', 'b': '国', 'c': '你', 'd': '好']; console.log(map2['a']);
下来说下循环条件,还是一样,写测试代码,截图
多运行几次,取个平均值,咱们建个表,很直观的看下各个循环的执行效率’
1000000的数组,进行和累计,得出效率如下
for | for 长度计算单独列出 | for in | foreach | for of | while |
46ms | 19ms | 284ms | 27ms | 30ms | 29ms |
通过上表统计,结果是
最优方案: 使用for循环,并且长度单独计算
最差方案:for in
两者的效率差了15倍左右,为什么都循环一样的长度,都是同样的操作,差别这么大呢。
这是因为 for in 遍历对象的所有属性,不仅包括ownproperties,也包括了原型链上的所有属性。
综上所属,遍历推荐使用最快的for循环,特殊情况下才考虑for in,否则不推荐它。
本章用到的测试代码可以在附件下载。
本章内容就到这里,下一章讲解下dom操作和事件绑定的优化。
- 点赞
- 收藏
- 关注作者
评论(0)