<返回更多

JavaScript️可视化:js引擎

2020-06-18    
加入收藏

今天我们来聊聊js引擎

JAVAScript很酷,但是机器如何才能真正理解您编写的代码?作为JavaScript开发人员,我们通常不必自己处理编译器。但是,一定要了解JavaScript引擎的基础知识,看看它如何处理我们人类友好的JS代码,并将其转变为机器可以理解的东西!

|注意: 实现基于Node.js和基于Chromium的浏览器使用的V8引擎。

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

JavaScript️可视化:js引擎

 

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

JavaScript️可视化:js引擎

 

引擎使用两个解析器:预解析器和解析器。预解析器仅及早检查token,以查看是否存在语法错误❌。这样可以减少发现代码中错误的数量,否则解析器稍后会发现错误!

如果没有错误,则解析器根据从字节流解码器接收的token创建节点。使用这些节点,它会创建一个抽象语法树或AST。

JavaScript️可视化:js引擎

 

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

JavaScript️可视化:js引擎

 

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

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

JavaScript️可视化:js引擎

 

JavaScript是一种动态类型化的语言,这意味着数据类型可以不断变化。如果JavaScript引擎每次必须检查某个值具有哪种数据类型,那将非常慢。

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

假设我们有以下函数sum,到目前为止,每次都使用数值作为参数来调用它:

JavaScript️可视化:js引擎

 

这将返回数字3!下次调用它时,它将假定我们再次使用两个数值调用它。

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

例如,下一次调用它时,我们传递的是字符串而不是数字。由于JavaScript是动态类型的,因此我们可以做到这一点而没有任何错误!

JavaScript️可视化:js引擎

 

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

希望这篇文章对您有用!当然,我在这篇文章中没有涉及引擎的许多部分(JS堆,调用堆栈等),如果您对JavaScript的内部结构感兴趣,我绝对鼓励您自己开始做一些研究,V8是开源的,并且有一些很好的文档说明了它的幕后工作方式!

欢迎各位道友留言评论!!!

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>