从JS引擎明白Await b()与Promise.then(b)的客栈处置惩罚

2019年8月22日 262次阅读 来源: Fundebug

译者按： Async/Await真的只是简朴的语法糖吗？No！

为了保证可读性，本文采纳意译而非直译。别的，本文版权归原作者一切，翻译仅用于进修。

与直接运用Promise比拟，运用Async/Await不仅能够进步代码的可读性，同时也能够优化JavaScript引擎的实行体式格局。这篇博客将引见Async/Await是怎样优化JavaScript引擎对客栈信息的处置惩罚。

Async/Await与Promise最大区分在于：await b()会停息地点的async函数的实行；而Promise.then(b)将b函数到场回调链中以后，会继承实行当前函数。关于客栈来讲，这个差别点异常症结。

当一个Promise链抛出一个未处置惩罚的毛病时，不管我们运用await b()照样Promise.then(b)，JavaScript引擎都须要打印毛病信息及其客栈。关于JavaScript引擎来讲，二者猎取客栈的体式格局是差别的。

Promise.then(b)

示例代码中，函数c()会在异步函数b()胜利resolve以后实行：

const a = () => {
    b().then(() => c());
};

当挪用a()函数时，这些事变同步发作：

  • b()函数被挪用，它会返回一个Promise，这个Promise会在将来的某个时刻resolve。
  • .then()回调函数(现实挪用了c()函数)被添加到回调链。

如许，a()函数内的代码就实行完了。a()函数不会被停息，因而在异步函数b()resolve时，a()函数的作用域已不存在了。假定b()或许c()抛出了一个毛病，则客栈信息中应当包括a()函数，由于它们都是在a()函数内被挪用。对a()函数的任何援用都不存在了，要怎样天生包括a()的客栈信息呢？

为了处理这个题目，JavaScript引擎须要做一些分外的事情：它会及时纪录而且保留客栈信息。关于V8引擎来讲，客栈信息附加在了b()函数所返回的Promise并在Promise链中通报，如许c()函数也能在须要的时刻猎取客栈信息。

纪录客栈信息须要时候，如许会下降机能；而保留客栈信息须要占用分外的内存。

运用Fundebug, 能够及时监控线上运用的毛病，并猎取完全的客栈信息。

Await b()

我们能够运用Async/Await完成一样的代码，同步函数c()会比及异步函数b()实行完毕以后再实行：

const a = async () => {
    await b();
    c();
};

运用await时，无需存储当前的客栈信息，由于存储b()到a()的指针就足够了。当守候b()函数实行时，a()函数被停息了，因而a()函数的作用域还在内存能够接见。假如b()函数抛出一个毛病，客栈信息能够经由过程指针敏捷天生。假如c()函数抛出一个毛病，客栈信息也能够像同步函数一样天生，由于c()函数是在a()函数中实行的。不论是b()照样c()，我们都不须要去存储客栈信息，由于客栈信息能够在须要的时刻马上天生。而存储指针，明显比存储客栈越发节约内存。

发起

许多ECMAScript语法特征看起来都只是语法糖，实在并非如此，最少Async/Await毫不仅仅只是语法糖。

为了让JavaScript引擎处置惩罚客栈的体式格局机能更高而且越发节约内存，请遵照这些发起：

  • 运用Async/Await，而不是直接运用Promise
  • 运用babel-preset-env，防止Babel没必要要地转换Async/Await

只管V8引擎还没有完成这些优化，请遵照这些发起。当我们为V8完成这些优化的时刻，你的顺序能够保证最好的机能。(作者是V8引擎的开发者)

一般来讲，只管不要去运用Babel转码器。一切支撑Service Workers的浏览器都支撑Async/Await，因而没有必要去对Async/Await转码。这一点关于JavaScript modules via script tag一样实用。关于这一点，人人能够参考Deploying ES2015+ Code in Production Today。

关于Fundebug

Fundebug专注于JavaScript、微信小顺序、微信小游戏、支付宝小顺序、React Native、Node.js和Java及时BUG监控。 自从2016年双十一正式上线，Fundebug累计处置惩罚了6亿+毛病事宜，得到了Google、360、金山软件等浩瀚着名用户的承认。迎接免费试用！

《从JS引擎明白Await b()与Promise.then(b)的客栈处置惩罚》

版权声明

转载时请说明作者Fundebug以及本文地点：
https://blog.fundebug.com/2018/07/18/javascript-engine-await-promise/

    原文作者：Fundebug
    原文地址: https://segmentfault.com/a/1190000015926251
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞