在 JavaScript 中，异步编程已经成为了必不可少的一部分。Promise 和 async/await 是两种流行的异步编程技术，它们可以让我们更好地管理异步代码和避免回调地狱。然而，我们也需要对它们的性能做出合理的评估，以便在实际开发中选择更合适的技术。
Promise
Promise 是一种非常简单的异步编程模式，它可以减少回调地狱的问题，并更好地管理异步代码。在 Promise 中，我们可以使用 Promise.resolve() 和 Promise.reject() 来创建 Promise 对象，并使用 .then() 和 .catch() 方法来处理 Promise 的状态。
例如，我们可以使用 Promise 来实现一个简单的异步延时效果：
-- -------------------- ---- ------- -------- ----------- - ------ --- ----------------- ------- -- - ------------- -- - ---------- -- ------ --- - --------------------- ------------------- -- - ------------------- ---展开代码
在上面的代码中，我们创建了一个 delay() 函数，用于实现延时效果。在函数中，我们返回一个 Promise 对象，并在 setTimeout() 中调用 resolve() 方法来标记 Promise 的状态为已解决。最后，在 .then() 中处理 Promise 已解决的状态并执行后续代码。
async/await
async/await 是 ES2017 引入的一种语法糖，它可以更简单地编写异步代码，但实际上它是基于 Promise 的。在 async/await 中，我们使用 async 关键字来声明一个异步函数，并在其中使用 await 关键字等待 Promise 的解决。
例如，我们可以使用 async/await 来实现一个与上面相同的延时效果：
-- -------------------- ---- ------- ----- -------- ----------- - ------ --- ----------------- ------- -- - ------------- -- - ---------- -- ------ --- - ----- -------- ------ - --------------------- ----- ------------ ------------------- - -------展开代码
在上面的代码中，我们创建了一个 delay() 异步函数，并将其声明为 async。在 test() 函数中，我们在 await 关键字后等待 delay() 函数返回的 Promise 对象，并在执行到 await 后暂停函数执行。在 delay() 函数的 Promise 对象被解决后，test() 函数继续执行。
性能比较
虽然 async/await 是 Promise 的语法糖，但它们之间的性能仍然存在差异。在实际开发中，我们应该根据实际情况选择使用哪种技术。
Promise 性能
在 Promise 中，我们需要额外地创建一个 Promise 对象来封装一个异步操作。因此，Promise 会在性能上略逊于 async/await。
下面是一个计时的示例，用于比较 Promise 和 async/await 的性能：
-- -------------------- ---- ------- -------- ----------- - ------ --- ----------------- ------- -- - ------------- -- - ---------- -- ------ --- - -------- ------------- - ---------------------------- ------------- ------------ ------------ ------------ ------------ ------------ ---------- -- - ------------------------------- --- - --------------展开代码
在上面的代码中，我们使用 Promise.all() 方法将多个 Promise 对象组合成一个，以便在它们都被解决后执行后续代码并计时。在 testPromise() 函数中，我们使用 console.time() 和 console.timeEnd() 方法来计时 Promise 的性能。
async/await 性能
相比之下，async/await 会比 Promise 更快，因为它可以减少 Promise 对象的创建，并将异步代码的逻辑更好地组织在一起。在实际开发中，我们应该尽量使用 async/await 来提高性能。
下面是一个与上面相同的计时示例，但这次使用 async/await：
-- -------------------- ---- ------- ----- -------- ----------- - -------------------------- ----- ------------- ------------ ------------ ------------ ------------ ------------ --- ----------------------------- - ------------展开代码
在上面的代码中，我们使用 await 和 Promise.all() 将异步代码串联在一起，并计时它们的性能。我们可以发现，使用 async/await 会比 Promise 更快。
指导意义
在实际开发中，我们应该在 Promise 和 async/await 中选择更合适的技术。如果我们需要处理复杂的异步逻辑，或者需要处理多个异步操作，那么使用 async/await 会更为便捷和高效。但如果我们只需要处理简单的异步操作，那么使用 Promise 也是一种不错的选择。
无论选择哪种技术，我们都应该避免过多地创建 Promise 对象，并尽量将异步逻辑都组织在同一个异步函数中，以提高代码的可读性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b7e7bd306f20b3a653614f
