随笔

js 循环性能测试

简单测试一下js常用三个循环的性能情况

测试代码如下，分别在不同内存情况、不同循环次数下的执行耗时情况。
执行环境为 Mac M3芯片的 nodejs 环境。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const max = 100000000
const timeTestForIn = () => {
  let str = ''
  let arr = new Array(max).fill(1)
  let start = Date.now();
  for (let i = 0; i<arr.length;i++) {
    str += '1';
  }
  let end = Date.now();
  console.log('forin:', end - start, str.length)
}
const timeTestMap = () => {
  let str = ''
  let arr = new Array(max).fill(1)
  let start = Date.now();
  arr.map(i => str += 'i')
  let end = Date.now();
  console.log('map: ', end - start, str.length)
}
const timeTestForEach = () => {
  let str = ''
  let arr = new Array(max).fill(1)
  let start = Date.now();
  arr.forEach(i => str += 'i')
  let end = Date.now();
  console.log('foreach: ', end - start, str.length)
}
/*
执行的时候可能会爆内存溢出，需手动指定内存使用量
node --max-old-space-size=10240
*/
timeTestForIn(); // 7852ms
timeTestForEach(); // 7598ms
timeTestMap(); // 7212ms

1、一亿次循环结果比较

测试结果1

当内存为10G的时候，循环耗时 map < foreach < forin
当内存为5G的时候，循环耗时 foreach < forin < map
其中最后使用3072M内存的时候直接内存溢出了，没有结果

2、一千万次循环结果比较

测试结果2

当内存为10G的时候，循环耗时 forin < foreach < map
当内存为5G的时候，循环耗时 forin < foreach < map
当内存为3G的时候，循环耗时 forin < foreach < map

可以看出此内存环境下，三者耗时情况一样

2、一百万次循环结果比较

测试结果3

当内存为10G的时候，循环耗时 foreach < forin < map
当内存为5G的时候，循环耗时 foreach < forin < map
当内存为3G的时候，循环耗时 foreach < forin < map

可以看出此内存环境下，三者耗时情况一样

2、十万次循环结果比较

测试结果4

当内存为10G的时候，循环耗时 foreach < map < forin
当内存为5G的时候，循环耗时 foreach = map < forin
当内存为3G的时候，循环耗时 foreach = map < forin

此环境下耗时成了个位数了，foreach和map差不多，forin耗时稍微大一点。

结论

forin、foreach、map 三个循环耗时在数据量不大的时候大体来说相差不是很多。
数据量非常大的时候耗时又跟内存情况有关系，这个还真不好下结论。

不过对于日常开发来说也用不到那么大量的循环，个人感觉怎么方便怎么来吧，易读性和可维护性比这点性能更加重要。