[译]JavaScript️可视化：js引擎

时间 2020-01-20

原文原文链接

本系列

正文

JavaScript很酷（不要@我），可是机器如何才能真正理解您编写的代码？做为JavaScript开发人员，咱们一般没必要本身处理编译器。可是，必定要了解JavaScript引擎的基础知识，看看它如何处理咱们人类友好的JS代码，并将其转变为机器能够理解的东西！🥳javascript

| 注意: 这篇文章主要基于Node.js和基于Chromium的浏览器使用的V8引擎。java

HTML解析器遇到script带有源的标记。来自script的代码从网络，缓存或已安装的service worker中加载。请求脚本做为一个字节流被响应，该字节流被字节流解码器处理！字节流解码器对字节流进行解码，一旦它被下载。git

字节流解码器从解码的字节流中建立token。例如，0066解码为f， 0075解码为u， 006e解码为n，0063解码为c， 0074解码为t，0069解码为i， 006f解码为o和 006e解码为n后跟一个空格。好像你写function同样！这是JavaScript中的保留关键字，建立token并将其发送到解析器（和pre-parser，我没有在gif中介绍，但稍后会进行解释）。其他字节流也会发生一样的状况。github

引擎使用两个解析器：预解析器和解析器。预解析器仅及早检查token，以查看是否存在语法错误❌。这样能够减小发现代码中错误的数量，不然解析器稍后会发现错误！浏览器

若是没有错误，则解析器根据从字节流解码器接收的token建立节点。使用这些节点，它会建立一个抽象语法树或AST。🌳缓存

接下来，是时候翻译了！翻译器(interpreter)遍历AST，并根据AST包含的信息生成字节码。字节代码生成完毕后，将删除AST，以清除内存空间。最后，咱们有一些机器能够使用的东西！🎉网络

尽管字节码很快，可是能够更快。运行此字节码时，将生成信息。它能够检测某些行为是否常常发生，以及所使用的数据类型。也许您已经调用了数十次函数：是时候对其进行优化，使其运行得更快了！♀‍♀️函数

字节码与生成的类型反馈一块儿被发送到优化编译器(optimizing compiler)。优化编译器获取字节码和类型反馈，并从中生成高度优化的机器码。🚀oop

JavaScript是一种动态类型化的语言，这意味着数据类型能够不断变化。若是JavaScript引擎每次必须检查某个值具备哪一种数据类型，那将很是慢。post

相反，引擎使用一种称为内联缓存(inline caching)的技术。它将代码缓存在内存中，以期未来返回具备相同行为的相同值！假设某个函数被调用了100次，而且到目前为止一直返回相同的值。它将假定它也会在您第101次调用它时返回该值。

假设咱们有如下函数sum，到目前为止，每次都使用数值做为参数来调用它：

这将返回数字3！下次调用它时，它将假定咱们再次使用两个数值调用它。

若是是这样，则不须要动态查找，它能够使用存储在已引用的特定内存插槽中的结果。不然，若是假设不正确，它将不会对代码进行优化，而且恢复为原始字节代码，而不是优化后的机器代码。

例如，下一次调用它时，咱们传递的是字符串而不是数字。因为JavaScript是动态类型的，所以咱们能够作到这一点而没有任何错误！

这意味着该数字2将被强制转换为字符串，而该函数将返回该字符串 "12"。返回执行解释的字节码并更新类型反馈。

但愿这篇文章对您有用！😊固然，我在这篇文章中没有涉及引擎的许多部分（JS堆，调用堆栈等），我稍后可能会涉及！若是您对JavaScript的内部结构感兴趣，我绝对鼓励您本身开始作一些研究，V8是开源的，而且有一些很好的文档说明了它的幕后工做方式！🤖

V8文件 || V8 Github || Chrome University 2018：脚本人生

原文

本系列包括6篇文章

我的博客

github.com/abc-club/fr…