1.数组循环遍历方法

javascript传统的数组遍历有for循环,while循环,以及for-in。
本篇文章要比较的是以下几种循环遍历方法:

遍历方式 备注
正向for循环  
逆向for循环 减少一次控制条件比较,性能理论上比正向for循环稍好
while循环  
for-in循环 理论性能最差
for-each循环  
duff's device 循环 利用并发,理论性能最好wiki 介绍

2.代码:

var number = 100000;//array大小
var iteranum = 100;//迭代次数
var array = [];
for(let i=0;i<number;i++)
{
array[i] = i+1;
} //test cicle
var len = array.length;
//正常for循环
console.time('normal for');
for(let k=0;k<iteranum;k++)
{
for(let i=0;i<len;i++)
{
array[i]+1;
}
} console.timeEnd('normal for'); //倒序for循环
console.time('reverse for');
for(let k=0;k<iteranum;k++)
{
for(let i=len-1;i--;)
{
array[i]+1;
}
}
console.timeEnd('reverse for'); //while循环
console.time('while');
for(let k=0;k<iteranum;k++)
{
let i=0;
while(i<len)
{
array[i]+1;
i++;
}
}
console.timeEnd('while'); //for-in循环
console.time('for-in');
for(let k=0;k<iteranum;k++)
{
for(let i in array)
{
array[i]+1;
}
}
console.timeEnd('for-in'); //for each 循环
console.time("for each");
for(let k=0;k<iteranum;k++)
{
array.forEach(function(e){
e+1;
});
}
console.timeEnd("for each"); //duff's device 循环
console.time("device's device");
for(let k=0;k<iteranum;k++)
{
let j = len % 8;
let templen = len-1;
while(j){
j--;
array[templen--]+1;
} j = Math.floor(len / 8); while(j){
j--;
array[templen--]+1;
array[templen--]+1;
array[templen--]+1;
array[templen--]+1;
array[templen--]+1;
array[templen--]+1;
array[templen--]+1;
array[templen--]+1;
}
}
console.timeEnd("device's device");

3.实验步骤

  • 实验环境 ,操作系统 windows server 2016, node 8.0,cpu E5-1630 v3 @ 3.7GHz ,内存16G
  • 数组内的数据操作很简单,就是将每一个元素加1,但是不覆盖原先的数据
  • 实验将采取多点采样,数组样本大小分别设置为:1000,10000,100000,1000000(1000次以下性能差距不大)
  • 对每种方式分别进行100次仿真叠加,最后取100次的仿真结果平均数,作为该实验数据的最终结果。
  • 将结果以折线图的形式展示

4.实验结果

(1)结果表格(单位:微秒)

遍历方式/Item数量 1000 10000 100000 1000000
正向for循环 43 456 3840 35679
逆向for循环 37 378 3604 33488
while循环 66 296 2294 20576
for-in循环 87 958 32443 401017
for-each循环 64 395 4272 32435
duff's device 循环 20 235 2137 16364

(2)结果直方图

为了结果展示方便,将所有数据都进行了log转换

几种数组循环的性能对比

横向为数组元素大小,纵向为运行时间(微秒)的log值。
上图可见,duff's device方式执行效率一直很高,而for-in方式的效率一直很低,正向for和逆向for效率相差不大,逆向for稍微占优势。

5.总结

    • 总体来说for循环和for-each性能相当,在小数据量时也与while性能相当。for-in性能最差,duff's device性能最好。大数据量时,while性能优于for循环和for-each循环。
    • 对于数据量不大的循环(<1000),不用考虑使用哪一种性能更好,可读性是第一位
    • 对于有较大数据量的循环和遍历,如果性能不是瓶颈,那么普通的for循环(或者while,do-while,for-each)就可以了,毕竟可读性强。
    • 对于较大的数据量,如果array的循环操作已经成为瓶颈,或者性能非常重要,那么可以采用duff's device方案。
    • 任何时候都不建议使用for-in,除非必须要用

javascript循环性能比较的更多相关文章

  1. JavaScript 循环性能比较

    有一句话叫做 没有什么事是一个循环解决不了的,如果真有,那就再来一个循环. 循环的种类有很多 正向for循环,逆向for循环,while循环,for-in循环(理论上性能最差),for-each循环, ...

  2. Javascript注意事项四【提高循环性能的策略】

    for(var i = item.length;i--){ process(item[i]); } 1.通过倒叙循环 2.最小化属性查询 3.尽量不要使用函数迭代(forEach)

  3. JavaScript性能优化

    如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...

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

    前言 上一篇探讨了达夫设备对于代码性能的影响,本文主要探讨并且测试各种常见的循环语句的性能以及流程控制中常见的优化. 循环语句 众所周知,常用的循环语句有for.while.do-while以及for ...

  5. 高性能JavaScript笔记二(算法和流程控制、快速响应用户界面、Ajax)

    循环 在javaScript中的四种循环中(for.for-in.while.do-while),只有for-in循环比其它几种明显要慢,另外三种速度区别不大 有一点需要注意的是,javascript ...

  6. Javascript与当前项目的思考

      主体 分为以下三部分,能力.经验有限,欢迎拍砖. 1.低效的代码 2.面向对象的重构重复利用代码 3.调试的经验总结 第一部分 日常中低效的代码 加载和运行 <html> <he ...

  7. 【读书笔记】读《高性能JavaScript》

    这本<高性能JavaScript>讲述了有关JavaScript性能优化的方方面面,主要围绕以下几个方面: 1> 加载顺序 2> 数据访问(如怎样的数据类型访问最快,怎样的作用 ...

  8. 《高性能Javascript》读书笔记-4

    第四章 算法和流程控制 代码组织结构和解决具体问题的思路是影响代码性能的主要因素 循环处理是最常见的编程模式之一,也是提高性能的关注点之一 循环分四种:标准for循环 ; i < Things. ...

  9. 《高性能javascript》学习总结

    本文是学习<高性能javascript>(Nichols C. Zakes著)的一些总结,虽然书比较过时,里面的知识点也有很多用不上了,但是毕竟是前人一步步探索过来的,记录着javascr ...

随机推荐

  1. MVC layout 命名空间引用问题

    虽然用MVC做了很多项目,但是都是在别人搭好的框架上实现 今天碰到一个很简单的命名空间引用问题 如图所示,Scripts和Styles 都没有引用命名空间 解决方法一: 直接使用 System.Web ...

  2. 重温CSS之基础

    在HTML中插入样式表: 内联式:直接在HTML标签中插入样式 <p style="color:red"></p> 2. 嵌入式: <style ty ...

  3. spring各个版本源码

    各版本源码下载地址 http://maven.springframework.org/release/org/springframework/spring/

  4. Java Scanner Readable

    通过implements(实现)Readbale interface(接口)的 read() method(方法) 实现自己添加字符到buffer里,然后读取 //策略模式package object ...

  5. 一步一步学习IdentityServer3 (2)

    下面就来做一个例子:IdentityServer3服务端的配置 VS2015创建一个MVC项目 IdrOAuth 用来授权的认证的站点

  6. maven 配置阿里云仓库

    <mirror>     <id>nexus-aliyun</id>     <mirrorOf>*</mirrorOf>     < ...

  7. Linux命令执行顺序— ||和&&和; 比较

    Linux命令执行顺序— ||和&&和; command1 && command2: &&左边的command1执行成功(返回0表示成功)后,& ...

  8. 上海高校金马五校赛 J - 小Y写文章

    题目大意: 给你n个数字, 定义不连贯值为, max(abs(a[ i ] - b[ i ])) ,现在让你把m个新的数字插入n + 1 个空位中,使得不连贯值最小. 思路:二分不连贯值, 每次进行二 ...

  9. 恢复spark挂掉的节点

    背景: 某个Worker节点挂掉了,我们需要将Worker进行启动恢复,同时可以恢复streaming中的executor 解决办法: 其实很简单,去worker节点中执行sbin/start-sla ...

  10. The web application [ ] registered the JDBC driver [net.sourceforge.jtds.jdbc.Driver] but failed to unregister it when the web application was stopped. To prevent a memory leak, the JDBC Driver

    出现以下错误时,我找了很多方法,都未解决,网上有很多,最后我实在无奈,怀疑会不会是Tomcat的原因,更换了一个版本之后就好了.The web application [ ] registered t ...