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，usingPromises中的console.log应该打印与usingAwait中的结果类似的结果。但实际上，我得到了：

总计（承诺）：0.25毫秒

总计（等待）：2.065毫秒

此外，在页面加载后，如果我点击'usingPromises'或'usingAwait'按钮，我会得到类似的结果。（单独跑步时都很快）

总计（承诺）：0.060000000026775524 ms

总计（等待）：0.08999999999650754毫秒

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

我有一个真正的应用程序在初始化时运行许多promises / async-await函数，我发现将一些async-await函数替换为它们的“相等”promises版本可以节省大量的加载时间（~200ms）。

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

在Mac上的chrome 62上运行

由于

Answer 1

使用按钮Both运行时，您的第一个结果会产生误导。承诺解决方案在微任务事件队列中排序：因此可以在另一个之前使用console.log打印，但是console.log会给第二个带来额外的延迟，因为它发生在创建之间第二个承诺和解决方案的处理。

如果您将runBoth定义为：

，那将会有所改进

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

现在两个承诺都将在微任务中创建，第一个承诺将在第二个承诺创建之前得到解决和处理。这将导致更公平的比较，其中console.log未在任何时间进行衡量。

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

1 个答案: