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

简介:
+关注继续查看

前言

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

高性能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])

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

本例中使用了倒序循环,并把减法操作整合在循环条件中。现在每个控制条件只是简单地与0比较。控制条件与true值比较,任何非零数会自动转换 为true,而零值等同于false。实际上,控制条件从两个比较(迭代数少于总数吗?它是true吗?)减少到一次比较(它是true吗?)。每次迭代 从两次比较减少到一次,进一步提高了循环速度。

性能测试:

那么事实真的如此吗?真金不怕浏览器验。测试代码很简单,针对不同的8种情况封装了8个函数(不加定时器firefox下无法打印profiles信息,原因不明):


  1. if (value == 0){ 
  2.     return result0; 
  3. else if (value == 1){ 
  4.     return result1; 
  5. else if (value == 2){ 
  6.     return result2; 
  7. else if (value == 3){ 
  8.     return result3; 
  9. else if (value == 4){ 
  10.     return result4; 
  11. else if (value == 5){ 
  12.     return result5; 
  13. else if (value == 6){ 
  14.     return result6; 
  15. else if (value == 7){ 
  16.     return result7; 
  17. else if (value == 8){ 
  18.     return result8; 
  19. else if (value == 9){ 
  20.     return result9; 
  21. else { 
  22.     return result10; 
  23. }

当数组长度为100时,我们发现firefox下的结果确实和预料的相似:for-each和for-in效率低下,倒序比正序效率略微提升。(chrome下的profiles由于时间太短不显示)

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

 小结:

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

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

来源:51CTO
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript的循环语句有哪些?
JavaScript的循环语句有哪些?
|
2月前
|
JavaScript 前端开发 索引
JavaScript丨循环语句
这里是`JavaScript`基础教程的第六期啦!上次讲了条件语句,同时也讲了`今天吃什么`的栗子,这一次就开始讲一讲`JavaScript`中的循环语句啦!
|
4月前
|
JavaScript 前端开发
JavaScript -- 条件语句和循环语句
JavaScript -- 条件语句和循环语句
|
4月前
|
JavaScript
js常用的循环语句有哪些?
js常用的循环语句有哪些?
|
5月前
|
JavaScript 前端开发
JS(第八课)循环语句中常用到的案例(一)
JS(第八课)循环语句中常用到的案例(一)
31 0
|
5月前
|
JavaScript
JS(第八课)循环语句中常用到的案例(二)
JS(第八课)循环语句中常用到的案例(二)
38 0
|
5月前
|
JavaScript
JS(第八课)循环语句中常用到的案例(三)
JS(第八课)循环语句中常用到的案例(三)
33 0
|
5月前
|
JavaScript 前端开发
JavaScript中的循环语句
for 循环语句是最常用的循环语句之一。for 循环通过设置循环计数器,重复执行一段代码块,直到计数器达到某个指定的值。
|
8月前
|
前端开发 JavaScript
web前端-JavaScript流程控制语句(条件判断,条件分支和循环语句)
web前端-JavaScript流程控制语句(条件判断,条件分支和循环语句)
90 0
|
11月前
|
JavaScript 前端开发
利用JavaScript的循环语句再页面中打印图形
利用JavaScript的循环语句再页面中打印图形 前面两篇博客我们讲解怎么使用for循环进行数学的简单计算,这篇博客主要是利用js的循环语句在网页中打印出各种图形。 1.利用js的循环语句打印矩形 // 利用循环语句在网页中打印十行十列的矩形 for (var j = 0; j &lt; 10; j++) { // 一行打印10个 @ for (var i = 0; i &lt; 10; i++) { document.write(&quot;@&quot;); } document.write(&quot;&lt;br/&gt;&quot;);
热门文章
最新文章
相关产品
云迁移中心
推荐文章
更多