为什么async-await比在一起运行它们时的promises慢得多

Question

我发现在某些情况下运行async-await会慢得多.

<html>
  <script>
    function makeAPromise() {
      return Promise.resolve(Math.random());
    }

    function usingPromises() {
      const before = window.performance.now();
      return makeAPromise().then((num) => {
        const after = window.performance.now();
        console.log('Total (promises): ', after-before, 'ms');
        return num;
      })
    }

    async function usingAwait() {
      const before = window.performance.now();
      const num = await makeAPromise();
      const after = window.performance.now();
      console.log('Total (await): ', after-before, 'ms');
      return num;
    }

    function runBoth() {
      usingAwait();
      usingPromises();
    }
    
    runBoth();

  </script>

  <button onclick="usingPromises()">usingPromises</button>
  <button onclick="usingAwait()">usingAwait</button>
  <button onclick="runBoth()">both</button>
</html>

IMO,console.log usingPromises应该打印出类似的结果usingAwait.但实际上,我得到:

总计(承诺):0.25毫秒

总计(等待):2.065毫秒

此外,在页面加载后,如果我点击'usingPromises'或'usingAwait'按钮,我会得到类似的结果.(单独跑步时速度都很快)

总计(承诺):0.060000000026775524毫秒

总计(等待):0.08999999999650754毫秒

但如果我点击'both'按钮,'await'版本比promises版本慢〜3-4倍.

我有很多运行的承诺/异步等待功能上initialisations实际应用中,我发现了一些替换的异步等待功能,以自己的"平等"的承诺版本可以刮胡子显著加载时间(200毫秒〜).

有人可以解释为什么会这样吗？async-await是否也使用与promises相同的作业队列(微任务)？是否应该使用promises而不是async-await,是否有最佳实践？

• 在mac上运行chrome 62

谢谢

Answer 1

使用按钮运行时,您的第一个结果Both会产生误导.诺分辨率测序在microtask事件队列:这样一个得到与打印console.log之前,其他的,但它是console.log带来额外延迟到第二,因为它创建了第二承诺及其分辨率的治疗之间发生.

如果你定义runBoth为:已经是一个改进:

Promise.resolve().then(usingAwait).then(usingPromises)

现在两个承诺都将在微任务中创建,第一个承诺将在创建第二个承诺之前得到解决和处理.这将导致更公平的比较,console.log而不是在任何时间测量.