javascript for循环性能测试示例

当我们使用for循环来迭代一个数组或者对象时，我们经常会遇到性能问题。好在JavaScript 提供了一些可以优化循环性能的技术，如缓存循环长度、使用前置递增值等。

本文将介绍如何通过性能测试来比较 for 循环的类型，以及如何优化 for 循环的性能。

第一步：创建数组和循环

首先，我们创建一个包含 1000000 个随机数的数组。

let arr = [];
for (let i = 0; i < 1000000; i++) {
  arr.push(Math.floor(Math.random() * 100000));
}

然后，我们需要在 for 循环内迭代数组并计算总和。

示例一：普通 for 循环

首先，我们来看一下最简单的 for 循环版本的代码，如下所示：

let sum = 0;
for (let i = 0; i < arr.length; i++) {
  sum += arr[i];
}

这种方法很简单易懂，但是它的性能却很低。在本次测试中，它花费了 35ms 左右的时间。

示例二：缓存循环长度

第二个测试使用了一个循环长度的缓存。在循环之前，我们将数组的长度缓存，然后在循环过程中使用缓存的长度。这样做可以减少每一次迭代数组都需要访问数组长度的开销，从而提高循环的性能。

let sum = 0;
let length = arr.length;
for (let i = 0; i < length; i++) {
  sum += arr[i];
}

在这个示例中，我们得到了比第一个测试更快的结果：23ms 左右。

示例三：使用"i"前置递增值

在第三个测试中，我们使用了前置递增值操作符 "++i" 而不是后置递增值操作符 "i++"。这种操作的效果是先将 "i" 的值递增一次，然后再进入下一次迭代。这种方法在一定程度上减少了操作数组长度及循环变量的开销。

let sum = 0;
let length = arr.length;
for (let i = 0; i < length; ++i) {
  sum += arr[i];
}

该示例的结果稍微快一些，大约在 22ms 左右。

第二步：运行性能测试

在代码中加入一个性能测试器来测量三个测试方法的时间。

function calcTime(fn) {
  console.time("calcTime");
  fn();
  console.timeEnd("calcTime");
}

console.log("普通 for 循环：");
calcTime(function() {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) sum += arr[i];
});

console.log("缓存循环长度：");
calcTime(function() {
  let sum = 0;
  let length = arr.length;
  for (let i = 0; i < length; i++) sum += arr[i];
});

console.log("使用前置递增值：");
calcTime(function() {
  let sum = 0;
  let length = arr.length;
  for (let i = 0; i < length; ++i) sum += arr[i];
});

运行测试后，我们获得了以下结果：

普通 for 循环： calcTime: 36.409ms
缓存循环长度： calcTime: 26.891ms
使用前置递增值： calcTime: 23.254ms

从测试结果中我们可以看到，使用前置递增值的方法是最快的。其中，缓存长度的方法也比普通的 for 循环方式快了很多。

总结

在 JavaScript 中优化循环性能是一个极为常见的任务。遵循上述的方法，特别是对循环长度进行缓存和使用前置递增值，可以大幅提升代码的效率。