javascript - 使用函数式 Javascript 与 "procedural"的性能影响

Question

有没有人做过基准测试，或者可以链接到关于这个主题的文章？对 IE 结果特别感兴趣，因为通常 JS 性能在其他浏览器中不是问题。

我想知道做这样的事情要慢多少:

var numbers = [1, 2, 3, 4, 5, 6, 7];
var results = numbers.map(function() { 
  // do some stuff
});

而不是典型的:

var numbers = [1, 2, 3, 4, 5, 6, 7];
var results = [];

for (var i = 0; i < numbers.length; i++) {
  var number = numbers[i];
  var result;
  // do some stuff
  results.push(result);
}

我显然更喜欢函数式风格，但我认为为每个项目调用额外函数的额外开销可能会减慢大集合的速度。

谢谢!

Answer 1

TL;DR:语法越老，速度越快。在优化速度时避免函数式编程。

我决定提出一个基准，其中包括您可能会使用函数式编程执行的常见操作，这只会产生一些聚合。生成的基准可以在这里运行。以下结果是 2020 年末的结果，但在您阅读本文时，也许已经进行了一些优化或其他操作，您可以使用此链接重新测试它，但如果该链接已失效，代码也会粘贴在下面.我使用了 Chrome 的结果，但虽然有些浏览器运行速度比其他浏览器快，但它们都保持相同的性能顺序。事实证明，在撰写本文时，Firefox 的速度要慢得多，例如，Chrome 比 Firefox 快 5 倍。 Edge 与 Chrome 一样快。 Safari 也和 Chrome 一样快。 Node 也和 Chrome 一样快。由于 Chrome、Safari 和 node 都在 v8 引擎上运行，我怀疑它们的速度总是相同的:

https://jsbench.me/dvkgymlimu/1

第一个函数“aggregate_functional”使用了所有最新的语法、展开运算符、reduce 等。它是迄今为止最慢的函数，运行速度约为 10M ops/sec。鉴于这是最慢的，但仍然每秒疯狂地运行 1000 万次，我认为这证明除了最极端的情况外，该论点对所有情况都没有实际意义。如果每秒 1000 万次对您来说还不够快，请继续阅读。

下一个函数使用“of”循环，比函数式版本快四倍。我真的没想到会有这种水平的性能提升。

最后一个函数“aggregate_imperative_idx”，使用“旧的”JavaScript 东西，没有扩展运算符，没有“of”循环，只有一个索引循环。如果没有“let”和“const”关键字，它应该可以在 Netscape Navigator 上运行。我很高兴地发现使用“var”并没有提高性能。那会让我难过。它最终比功能实现快 8.2 倍，达到 82M ops/sec。

function aggregate_functional (numbers) {
  if (numbers.length == 0) {
    throw new Error("aggregate() requires at least one number")
  }
  const sum = numbers.reduce((s, n) => s += n)
  let min = Math.min(...numbers)
  let max = Math.max(...numbers)
  const average = sum / numbers.length
  return {
    sum,
    average,
    min,
    max,
  }
}

function aggregate_imperative (numbers) {
  if (numbers.length == 0) {
    throw new Error("aggregate() requires at least one number")
  }
  let sum = 0
  let min = numbers[0]
  let max = numbers[0]
  for (const val of numbers) {
    if (val < min) min = val
    if (val > max) max = val
    sum += val
  }
  const average = sum / numbers.length
  return {
    sum,
    average,
    min,
    max,
  }
}

function aggregate_imperative_idx (numbers) {
  if (numbers.length == 0) {
    throw new Error("aggregate() requires at least one number")
  }
  let sum = 0
  let min = numbers[0]
  let max = numbers[0]
  for (let i = 0; i < numbers.length; i++) {
    const val = numbers[i]
    if (val < min) min = val
    if (val > max) max = val
    sum += val
  }
  const average = sum / numbers.length
  return {
    sum,
    average,
    min,
    max,
  }
}