关于 async/await 与 Promises 和事件循环的性能问题

Question

简介

我和我的一位同事一直在讨论浏览器中 JavaScript 的异步特性，并想知道有哪些技术优势。我们知道 async/await 是 Promises 的语法糖，但很想知道使用其中一个是否有任何其他性能优势。例如：

1. 事件循环对 async/await 和 Promises 的处理是否相同？
2. 它们都被视为微任务吗？
3. 使用一个比另一个有任何延迟执行的好处（例如，同步调用 Promise 执行器中的代码，但在异步函数中呢）？
4. 根据 MDN，async 函数返回一个 AsyncFunction 对象，但在 Promise 文档中没有讨论 - AsyncFunction 有什么好处？
5. 性能优势是否相同（如果有）？

示例场景

是

await JSON.parse('json string');

和

new Promise((resolve, reject) => resolve(JSON.parse('json string')));

被事件循环以同样的方式对待（我的语法可能略有偏差）？

参考文献

• Understanding Asynchronous JavaScript - Sukhjinder Arora (13 Nov 2018)
• Tasks, microtasks, queues and schedules - Jake Archibald (17 Aug 2015)
• async function - MDN
• Promise - MDN

Answer 1

事件循环对 async/await 和 Promises 的处理是否相同？

事件循环只是处理事件，我不会说它对待事物的方式完全不同。解决一个承诺将导致一个事件被推送到循环中，然后在下一个滴答声中调用所有.then 处理程序，因为异步函数也返回一个承诺并解决它，你会得到相同的行为。

它们都被认为是微任务吗？

“微任务”这个名称是用来解释浏览器的常见行为的，规范和 NodeJS 都没有使用它，所以我永远不会说“xy 是 JavaScript 中的微任务”。但是，如果您调用解决“微任务”，那么从异步函数返回也是一个“微任务”，因为它解决了底层的承诺。

使用其中之一是否有任何延迟执行的好处（例如，Promise 执行器中的代码被同步调用，但在异步函数中呢？

代码总是同步执行，JS 中的异步意味着外部事件（网络请求、计时器）在某个时候到达事件队列，因此通过回调附加到它的代码在某个时候被调用，但是它随后以同步方式执行。

根据 MDN，async 函数返回一个 AsyncFunction 对象，但在 Promise 文档中没有讨论 - AsyncFunction 有什么好处？

不，它返回一个承诺，async function 本身就是一个 AsyncFunction 对象，这只是意味着它是一个具有内部值的 FunctionObject 表示它的异步。

 const asyncFunctionObject = new AsyncFunction("return await stuff();");

 async function functionObject() { return await stuff(); }

性能优势是否相同（如果有的话）？

也许吧。这始终取决于您的确切用例，因此如果您想确定它，请测试性能。但是，如果您查看以下两个示例：

 // 1
 a().then(() => b()).then(() => c())

// 2
(async function() {
  await a();
  await b();
  await c();
})();

那么在第一种情况下，如果 a、b 和 c 是 Promise，将有 5 个 Promise（.then(...) 返回一个新的 Promise），而第二个示例只需要 4 个（由 async 函数返回一个）。对于循环，比率会变得更好。

Answer 2

如果我理解正确，引擎可以优化 async/await 更多。参见 V8 开发者的this explanation，尤其是最后的这个结论：

偏爱异步函数并等待手写的承诺代码