当前位置: 首页 > 网络学院 >

高性能JavaScript 循环语句和流程控制

新客网 XKER.COM 时间:2015-07-24 09:57:56来源:博客园  评论:

前言

上一篇探讨了达夫设备对于代码性能的影响,本文主要探讨并且测试各种常见的循环语句的性能以及流程控制中常见的优化。

高性能JavaScript 循环语句和流程控制_新客网

循环语句

众所周知,常用的循环语句有for、while、do-while以及for-in,forEach。除了for-in和forEach性能略 低外,平时我们对前三者的选择更多的是基于需求而非性能考虑,今天我们就对它们各自的性能做个测试,告诉我们最极端的情况下还能做哪些优化。

首先我们来谈谈为何for-in和forEach会比其他的慢。for-in一般是用在对象属性名的遍历上的,由于每次迭代操作会同时搜索实例 本身的属性以及原型链上的属性,所以效率肯定低下;而forEach是基于函数的迭代(需要特别注意的是所有版本的ie都不支持,如果需要可以用 JQuery等库),对每个数组项调用外部方法所带来的开销是速度慢的主要原因。

接着我们看看每次迭代中for、while以及do-while都做了什么。

  1. var length = items.length; 
  2. for(var i = 0; i < length; i++) 
  3.   process(items[i]); 
  4.  
  5. var j = 0
  6. while(j < length)  
  7.   process(items[j++]); 
  8.  
  9. var k = 0
  10. do { 
  11.   process(items[k++]); 
  12. } while(k < length); 

上面的每个循环中,每次运行循环体时都会产生这样的操作:

  1. 一次控制条件中的数值大小比较(i < length)

  2. 一次控制条件结果是否为true的比较(i < length === true)

  3. 一次自增操作(i++)

  4. 一次数组查找(items[i])

  5. 一次函数调用process(items[i])

我们可以通过颠倒数组的顺序来提高循环性能:

当数据量达到100w时,firefox和chrome下的结果都如人所愿,但是也略微有所不同。ff下的for-in表现地比for- each好,而chrome下for-in表现糟糕,直接提出了警告。而倒序迭代虽然性能略微有所提升,但是提升的不是很多,且降低了代码阅读性。

高性能JavaScript 循环语句和流程控制_新客网

高性能JavaScript 循环语句和流程控制_新客网

 小结:

  1. 倒序迭代确实能略微提升代码性能,但是牺牲了代码可读性,除非追求极端性能优化情况下不然没必要用

  2. 遍历数组能用普通的循环就不要用for-in和for-each

如果本文对您有帮助请分享给您的好友,也可按Ctrl+D收藏本页面,谢谢!感谢本文来源方:博客园

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)