1. 首页

【前端基础】JavaScript 引擎运行原理


JavaScript 很酷,但是 JS 引擎是如何才能理解我们编写的代码呢?作为 JS 开发人员,我们通常不需要自己处理编译器。然而,了解 JS 引擎的基础知识并了解它如何处理JS代码,并将其转换成机器能够理解的东西,绝对是个有益无害的事情。

注意:本文主要基于 Node.js 和基于 Chrome 的浏览器使用的 V8 引擎。

HTML解析器遇到带有源代码的script标签。 来自此源的代码从网络,缓存或已安装的服务工作程序中加载。 响应是将请求的脚本作为字节流,由字节流解码器负责。字节流解码器在下载字节流时对其进行解码。

JS中文网 码农进阶题库;每天一道面试题 or Js小知识

字节流解码器从已解码的字节流中创建令牌。例如,0066解码为f, 0075u, 006en, 0063c, 0074t, 0069i, 006fo, 006en,后面跟一个空格。就像JS中的function,这是 JS 中的一个保留关键字,它会创建一个标记,并将其发送给解析器。对于字节流的其余部分也是如此。

JS中文网 码农进阶题库;每天一道面试题 or Js小知识

该引擎使用两个解析器:预解析器(pre-parser)解析器(parser)。预解析器只提前检查标记,以查看是否有语法错误。这可以减少发现代码中的错误所需的时间,否则解析器稍后就会发现这些错误。

如果没有错误,解析器将根据从字节流解码器接收到的标记创建节点。使用这些节点,它创建了一个抽象语法树,即AST

JS中文网 码农进阶题库;每天一道面试题 or Js小知识

接下来,轮到解释器(interpreter)了。遍历AST并根据AST包含的信息生成字节码的解释器。一旦字节码完全生成,AST就会被删除,从而清除内存空间。最后,生成的机器码就可以在电脑上运行了。

JS中文网 码农进阶题库;每天一道面试题 or Js小知识

虽然字节码很快,但它可以更快。当这个字节码运行时,将生成信息。它可以检测某些行为是否经常发生,以及所使用数据的类型。也许已经调用一个函数几十次了:现在是时候优化它了,这样它会运行得更快!

字节码与生成的类型反馈一起发送到优化编译器(ptimizing compiler)。 优化的编译器接收字节码和类型反馈,并根据这些信息生成高度优化的机器码。

JS中文网 码农进阶题库;每天一道面试题 or Js小知识

JS 是一种动态类型语言,这意味着数据类型可以不断变化。如果 JS引擎每次都要检查某个值的数据类型,那么速度会非常慢。

相反,JS 引擎使用一种称为内联缓存(inline caching)的技术。它将代码缓存在内存中,希望将来它会以相同的行为返回相同的值.假设某个函数被调用100次,并且到目前为止总是返回相同的值。它将假设在第101次调用它时也会返回这个值。

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

Js中文网 · 前端进阶资源教程 www.javascriptc.com

执行结果为 3。 下次调用它时,它将假定我们再次使用两个相同数字对其进行调用。

如果假投,那么就不需要动态查找,只需要使用存储在特定内存槽中的结果,该槽已经有一个引用。否则,如果假设不正确,它将反优化代码并恢复到原始字节码,而不是优化后的机器码。

例如,下一次调用它时,我们传递的是字符串而不是数字。因为 JS 是动态类型的,所以这样做不会有任何错误。

Js中文网 · 前端进阶资源教程 www.javascriptc.com

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

我希望这篇文章对你有用!当然,在这篇文章中还没有涉及到引擎的更多部分(JS堆,调用堆栈,等等),后续会继续分享。如果你对 JS 的内部机制感兴趣,强烈建议自己可以做一些研究,V8 是开源的,并且有一些很棒的文档说明它是如何工作的。


[https://dev.to/lydiahallie/ja…][1]


交流

干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。

作者:前端小智
链接:https://dev.to/lydiahallie/javascript-visualized-the-javascript-engine-4cdf

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:【前端基础】JavaScript 引擎运行原理

链接:https://www.javascriptc.com/3561.html

« 百度 App 网络深度优化系列(三):弱网优化
让开发效率“飞起”的 5 个 VS Code 插件»
Flutter 中文教程资源

相关推荐

QR code