揭开使用 V8 作为目标引擎🔬的 JavaScript 代码处理的神秘面纱

简介: 揭开使用 V8 作为目标引擎🔬的 JavaScript 代码处理的神秘面纱

第 1 阶段:编写 Js 代码

你写你的 Js 代码,例如:

function checkIsAValidObject(obj){
    return typeof obj == "object" && !Array.isArray(obj)
  }
复制代码

第 2 阶段:主机环境设置

您将代码带到JavaScript host-env,例如浏览器/节点。主机将执行我们所说的“初始时间分支”,在初始时间分支期间,它获得运行JavaScript代码所需的组件,例如核心V8引擎,API(例如DOM API,libuv API)。

第 3 阶段:编译

  • 您的JavaScript代码被编译为AST(抽象语法树)。 它是我们的ISA(指令集架构)机器/引擎可以处理的格式,这个想法类似于你想使用Theo-design-token-engine从一个样式模型编译到另一个样式模型,例如从CSSXML样式,这意味着你必须在一个theo理解的模型中编写。如果您希望查看 AST 的实际应用,这里有一个链接:单击我

到 AST 的 Js 代码示例

网络异常,图片无法展示
|

  • 将代码转换为 AST 后,接下来就是提升表达式和语句。

阶段 4:从 AST 代码生成可执行字节码

在这个阶段,JavaScript引擎采用AST代码并按照指令集架构生成一个字节码。对于 v8 引擎,我们使用 ARMV8,它是一个框架(我称之为框架,因为它专注于特定的机器和特定的指令架构类型),它实现了精简的指令集。这些可执行字节是 CPU 理解和解码的指令(将其视为一种语言)。注意,CPU不能执行这条指令(它们通常是十六进制格式0-f),CPU所做的是从内存中拉出我们的指令并将其解码为0-1(这是CPU理解的语言)。因此,在您的脑海中,在 CPU 将其解码/转换为 0-1 的机器代码之前,CPU 无法理解简化或复杂的指令。

为 Js 代码生成可执行字节码

我将使用 macOS 进行采样:

brew install v8

run: d8 --print-bytecode your-js-file-absolute-path.js

如何为 Js 代码生成可执行字节码的示例

Js 代码

网络异常,图片无法展示
|

安装 v8

网络异常,图片无法展示
|

生成字节码

网络异常,图片无法展示
|

第 5 阶段:解释和执行

这是我们一直在等待的阶段。这就是编译语言和可解释语言的区别。当你听到一种可解释的语言时,这并不意味着你的程序没有被编译为指令,而是意味着你编写了你的程序,把它发送到你的语言运行时,语言引擎在执行时为你做编译。另一方面,编译后的语言需要编译为指令,然后发送到需要它的机器上(例如发送Java Jar可执行文件以在android OS上运行)。

在这个阶段,JavaScript引擎通过逐行运行每个指令来执行可执行文件,例如它发送一条指令,说**创建一个名为name的原始变量并为其分配值“Emmanuel”。 **计算机将执行指令,简单来说,这意味着告诉计算机做你想做的事(我可以写一篇关于现代计算机如何构建来处理指令的详细文章。如果文章对您有用,请随时在下面的部分中发表评论)。

第 6 阶段:热优化阶段

这个阶段更多的是优化,缓存常用的字节码。Js 引擎将存储经常解释的结果,因此计算机不需要重新处理它。bytecode

总结

  • 你写 Js 代码
  • JavaScript 引擎将你的 Js 代码转换为字节码指令(0-f)
  • 计算机CPU(通常是控制单元)将字节码指令转换为机器码(0-1)
  • 然后计算机执行机器代码
  • 然后你得到执行的结果


相关文章
|
1月前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
120 58
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
240 2
|
19天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
35 3
原生js炫酷随机抽奖中奖效果代码
|
23天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
216 4
|
25天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
77 6
|
21天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
50 1
|
1月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
37 2
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
84 2
|
1月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理、应用与代码演示
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理、应用与代码演示
下一篇
无影云桌面