javascript - 如何改进 Edge 上递归 promise 的执行时间？在 chrome 上，100000 条记录几乎是瞬间的

Question

在下面的代码片段中，promise 在其自身完成后被递归调用。我在 Edge 和 Chrome 上运行了以下代码片段，发现执行时间有明显差异。我做错了什么吗？如何改进 Edge 上的执行时间？

请忽略 promise “反模式”。只是为了模拟一个异步方法。

Chrome 结果 -计数 - 99999开始 1512416096194最后更新 1512416096509结束 1512416096577recursiveFnReturnsPromise 完成

执行时间 - 397 毫秒

边缘结果-计数 - 99999开始 1512415183349最后更新 1512415508413结束 1512415907219recursiveFnReturnsPromise 完成

开始和结束之间的执行时间 - 723870ms

最后一次 DOM 更新和结束之间的执行时间 - 398806ms

//large array
let aValues = Array(100000);

//utility function
function writeln(text) {
  let p = document.createElement('div');
  p.innerText = text;
  document.getElementById('v1').appendChild(p);
}


writeln('Start ' +Date.now()); //note start recursion time

recursiveFnReturnsPromiseV1(aValues, 1).then(function() {
  writeln('End ' +Date.now());//note end recursion time
  writeln('recursiveFnReturnsPromise finished');
}, function() {
  writeln('End' +Date.now());
  writeln('recursiveFnReturnsPromise failed');
})

//the recursive functions which returns a promise
function recursiveFnReturnsPromiseV1(pValues, ix) {
  if (pValues.length <= ix)
    return Promise.resolve();

  return new Promise(function(c, e) {
    document.getElementById('output').innerText = ix;
    if(ix==99999) writeln('last update ' +Date.now());
    c();
  }).then(function() {
    return recursiveFnReturnsPromiseV1(pValues, ++ix);
  })
}

Count - <span id='output'></span>
<div id='v1'></div>

注意 - 对于任何有兴趣尝试正确执行 promise 递归的人，请参阅相关帖子 - What is the difference in following pattern to call recursive JavaScript function which returns a promise?

Answer 1

即使不与 DOM 交互，Promise 在 Firefox 中的运行速度也非常慢。

(async()=>{
  let start = Date.now();
  for (let i = 0; i < 1e6; i++) await Promise.resolve();
  let end = Date.now();
  console.log(end-start, 'ms');
})();

在我的机器上，Node.js 在 0.25 秒内完成，Chrome 6 秒，Firefox 16 秒。 (我没有 Edge)。

我会避免迭代过多的 Promise。它应该是可行的——在任何实际代码中，大部分挂钟时间都将花在浏览器中呈现更新或等待异步调用完成，只有一小部分时间用于实际执行异步调用本身。如果是这种情况，请同步执行更多工作。

由于某些原因，这稍微快一些:

(async()=>{
  let start = Date.now();
  await Promise.all(Array(1e6).fill(Promise.resolve()));
  let end = Date.now();
  console.log(end-start, 'ms');
})();

在 Node.js 中为 1 秒，在 Chrome 中为 2.5 秒，在 Firefox 中为 4 秒。 (事实上​​，大部分工作是实际构建数组，如果我将它移到计时部分之外，我得到 <1 秒。)

使用 Promise.all 可能会更快，因为脚本会一次性生成所有工作，但等待它完成不会进入解释器(非常粗略的近似)。如果 Promises 不像 V8 那样快，这可能是一个很好的解决方法。