JavaScript?可视化：js引擎 _js引擎

今天我们来聊聊js引擎
JAVAScript很酷，但是机器如何才能真正理解您编写的代码？作为JavaScript开发人员，我们通常不必自己处理编译器。但是，一定要了解JavaScript引擎的基础知识，看看它如何处理我们人类友好的JS代码，并将其转变为机器可以理解的东西！
|注意: 实现基于Node.js和基于Chromium的浏览器使用的V8引擎。
html解析器遇到script带有源的标记。来自script的代码从网络，缓存或已安装的service worker中加载。请求脚本作为一个字节流被响应，该字节流被字节流解码器处理！字节流解码器对字节流进行解码，一旦它被下载。

文章插图

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

文章插图

引擎使用两个解析器：预解析器和解析器。预解析器仅及早检查token，以查看是否存在语法错误? 。这样可以减少发现代码中错误的数量，否则解析器稍后会发现错误！
如果没有错误，则解析器根据从字节流解码器接收的token创建节点。使用这些节点，它会创建一个抽象语法树或AST 。

文章插图

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

文章插图

尽管字节码很快，但是可以更快。运行此字节码时，将生成信息。它可以检测某些行为是否经常发生，以及所使用的数据类型。也许您已经调用了数十次函数：是时候对其进行优化，使其运行得更快了！♀‍♀?
字节码与生成的类型反馈一起被发送到优化编译器(optimizing compiler) 。优化编译器获取字节码和类型反馈，并从中生成高度优化的机器码。

文章插图

JavaScript是一种动态类型化的语言，这意味着数据类型可以不断变化。如果JavaScript引擎每次必须检查某个值具有哪种数据类型，那将非常慢。
相反，引擎使用一种称为内联缓存(inline caching)的技术。它将代码缓存在内存中，以期将来返回具有相同行为的相同值！假设某个函数被调用了100次，并且到目前为止一直返回相同的值。它将假定它也会在您第101次调用它时返回该值。
假设我们有以下函数sum，到目前为止，每次都使用数值作为参数来调用它：

文章插图

这将返回数字3！下次调用它时，它将假定我们再次使用两个数值调用它。
【JavaScript?可视化：js引擎】如果是这样，则不需要动态查找，它可以使用存储在已引用的特定内存插槽中的结果。否则，如果假设不正确，它将不会对代码进行优化，并且恢复为原始字节代码，而不是优化后的机器代码。
例如，下一次调用它时，我们传递的是字符串而不是数字。由于JavaScript是动态类型的，因此我们可以做到这一点而没有任何错误！

文章插图

这意味着该数字2将被强制转换为字符串，而该函数将返回该字符串 "12" 。返回执行解释的字节码并更新类型反馈。
希望这篇文章对您有用！当然，我在这篇文章中没有涉及引擎的许多部分（JS堆，调用堆栈等），如果您对JavaScript的内部结构感兴趣，我绝对鼓励您自己开始做一些研究，V8是开源的，并且有一些很好的文档说明了它的幕后工作方式！
欢迎各位道友留言评论！！！