函数组合比多次迭代更慢？Node环境Map性能疑惑

我最近在学习函数组合和Array.map的性能差异时，写了一段基础测试代码，但结果和我的预期完全相反，实在搞不懂原因，还请大家帮忙解惑！

我的测试代码如下（运行环境是Node.js v10）：

const doubleIt = (x) => x*2 
const render = (x) => `<li>${x}</li>` 
const composeRenderAndDouble = function (x) { 
  return render(doubleIt(x)); 
} 
const arr = Array(1000).fill(0) 

const mergeArraysAndFunctionalManyMaps = (arr) => arr.map(doubleIt).map(render) 
const mergeArraysAndFunctionalOneMap = (arr) => arr.map(composeRenderAndDouble) 

mergeArraysAndFunctionalManyMaps(arr)// 执行时间约0.788ms 
mergeArraysAndFunctionalOneMap(arr)// 执行时间约1.184ms 

我原本以为，对同一个数组进行两次迭代（两次map）会比一次迭代（单次map里调用组合后的函数）更慢，但多次运行测试后，每次都是多次map的执行速度更快。这到底是为什么呢？

解答：这主要和Node.js v10的V8引擎优化策略有关 #

首先，你的直觉其实在理论上是对的：单次迭代遍历数组应该比两次迭代更高效，因为减少了一次数组遍历的开销（比如数组长度检查、索引递增等）。但实际性能表现被V8引擎的即时编译（JIT）优化给影响了，具体原因可以拆解为以下几点：

1. 简单函数的内联优化
   doubleIt和render都是非常简单的箭头函数，V8引擎很容易对它们进行函数内联优化——也就是把函数的代码直接嵌入到调用它的地方，消除函数调用的开销。当你用两次map时，每个map的回调都是这些简单函数，V8可以分别对每个map的循环做深度优化，甚至可能把整个map循环的逻辑都内联展开，运行起来几乎没有额外开销。

   而composeRenderAndDouble是一个嵌套调用的函数：它内部要先调用doubleIt，再把结果传给render。虽然逻辑一样，但V8在处理这种嵌套函数调用时，内联优化的难度会更高——尤其是在Node.js v10这个相对较老的版本中，V8的内联策略可能还没那么智能，无法完全消除composeRenderAndDouble本身的调用开销，也没法把整个嵌套调用链都完美内联到map的循环里。

2. 函数类型与优化缓存
   V8会根据函数的类型（比如箭头函数、普通函数）和调用方式缓存优化后的代码。doubleIt和render是独立的箭头函数，它们的调用模式非常固定，V8能快速生成并缓存优化后的版本。而composeRenderAndDouble是一个普通函数表达式，它的内部调用了另外两个函数，这种多层调用的模式可能会让V8的优化缓存命中率降低，或者生成的优化代码效率不如前者。

3. 测试规模的影响
   你测试用的数组长度只有1000，这个规模很小，两次遍历的额外开销（比如数组长度读取、索引移动）几乎可以忽略不计。而函数调用的优化差异反而成为了影响性能的主要因素。如果把数组规模放大到10万甚至100万，你可能会看到结果反转：单次map的性能会超过两次map，因为此时数组遍历的开销会盖过函数调用的优化差异。

验证建议 #

• 试试把composeRenderAndDouble改成箭头函数：const composeRenderAndDouble = x => render(doubleIt(x))，看看V8的优化会不会有变化；
• 升级到Node.js 14+的版本测试，新版本的V8引擎（比如V8 8.x及以上）对嵌套函数的内联优化能力更强，可能会让单次map的性能反超；
• 增大数组规模（比如Array(100000).fill(0)），观察性能趋势的变化。

内容的提问来源于stack exchange，提问作者mfilimonov