39｜源码解读：V8执行JS代码的全过程

最新推荐文章于 2024-09-07 09:21:40 发布

源码头

最新推荐文章于 2024-09-07 09:21:40 发布

阅读量1.9k

点赞数 4

分类专栏：计算机文章标签： javascript xcode 开发语言

本文链接：https://blog.csdn.net/sucaiwa/article/details/129342095

版权

计算机专栏收录该内容

41 篇文章 102 订阅

订阅专栏

39｜源码解读：V8 执行 JS 代码的全过程

你好，我是LMOS。

前面我们学习了现代浏览器架构，也大致了解了浏览器内核的工作原理。在浏览器的内核中，V8 是一个绕不开的话题。在浏览器中，Chrome 的重要地位不用赘述，而V8不仅是 Chrome 的核心组件，还是 node.js 等众多软件的核心组件，所以，V8的重要程度亦不用多言。

不过，V8涉及到的技术十分广泛，包括操作系统、编译技术、计算机体系结构等多方面知识，为了带你先从宏观角度系统学习和了解V8项目，这节课我会从源码理解讲起，带你了解了V8 执行 JS 代码的全过程。

如何阅读 V8 源码和搭建 V8 开发环境

前面两节课，我带你简单了解了 Chromium 和 Webkit 项目的目录结构，在这里我们继续看一下如何学习 V8 源码。

Chromium 项目中包含了可运行的 V8 源码，但是从调试的角度看，我们一般使用 depot_tools 来编译调试 V8 源码，它是V8的编译工具链，下载和编译代码都需要用到它，你可以直接点击 depot_tools bundle 下载。

解压后，我们需要将 depot_tools 工具添加到环境变量，注意这些操作需要你保证本机可以访问 Google 浏览器。

我们以 Mac 系统为例，添加到环境变量的代码命令如下：

export PATH=`pwd`/depot_tools:"$PATH"

然后，你可以在命令行中测试 depot_tools 是否可以使用：

gclient sync

下载完 depot_tools 后，我们就可以下载 V8 代码进行编译调试了“

mkdir v8
cd v8
fetch v8
cd v8/src

下载好 V8 源码后，我们需要使用 GN 来配置工程文件。下面是我们用到的几个编译的参数：

  is_component_build = true  // 编译成动态链接库以减少体积
  is_debug = true  // 开启调试
  v8_optimized_debug = true // 关闭一些代码优化
  symbol_level = 0 将所有的debug符号放在一起，加速二次编译和链接过程;
  ide=vs2022 /  ide=xcode // 选择编译 IDE

我们这节课就不展开讲解 gn 命令了，如果你有兴趣了解更多内容，可以自行查阅资料。说回正题，我们继续聊配置工作。

Windows 的配置情况如下：

gn gen out.gn/x64.release --args='is_debug=true target_cpu="x64" v8_target_cpu="arm64" use_goma=true is_component_build=true v8_optimized_debug = true symbol_level = 0'

我们再来看看 Mac 下的情况，Mac 下我们需要更新 xcode 依赖，代码如下：

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
gn gen out/gn --ide=xcode

执行完成后，我们可以通过 IDE 进入相应的工程文件下，后面是我的操作截图，供你参考：

在这里插入图片描述

我们看到，在工程文件下有一个名为 samples 的目录，上图中打开的文件 hello-world.cc 也是这个目录下的一个文件，它是 V8 项目中的一个实例文件，我们后面的学习也会从hello-world.cc文件入手。

我们来看一下这个文件的具体代码：

int main(int argc, char* argv[]) {
  // Initialize V8.
  v8::V8::InitializeICUDefaultLocation(argv[0]);
  v8::V8::InitializeExternalStartupData(argv[0]);
  std::unique_ptr<v8::Platform> platform = v8::platform::NewDefaultPlatform();
  v8::V8::InitializePlatform(platform.get());
  v8::V8::Initialize();
  // Create a new Isolate and make it the current one.
  v8::Isolate::CreateParams create_params;
  create_params.array_buffer_allocator =
      v8::ArrayBuffer::Allocator::NewDefaultAllocator();
  v8::Isolate* isolate = v8::Isolate::New(create_params);
  {
    v8::Isolate::Scope isolate_scope(isolate);
    // Create a stack-allocated handle scope.
    v8::HandleScope handle_scope(isolate);
    // Create a new context.
    v8::Local<v8::Context> context = v8::Context::New(isolate);
    // Enter the context for compiling and running the hello world script.
    v8::Context::Scope context_scope(context);
    {
      // Create a string containing the JavaScript source code.
      v8::Local<v8::String> source =
          v8::String::NewFromUtf8Literal(isolate, "'Hello' + ', World!'");
      // Compile the source code.
      v8::Local<v8::Script> script =
          v8::Script::Compile(context, source).ToLocalChecked();
      // Run the script to get the result.
      v8::Local<v8::Value> result = script->Run(context).ToLocalChecked();
      // Convert the result to an UTF8 string and print it.
      v8::String::Utf8Value utf8(isolate, result);
      printf("%s\n", *utf8);

我们简单看看 hello-world.cc 这个文件，它是用 C++ 程序编写的，主要做了下面几件事：

1.初始化了 V8 程序；

2.运行了一段基于 JavaScript 语言程序的 “hello world” 并输出；

3.运行了一段基于 JavaScript 语言程序的加法运算并输出；

4.执行完成后卸载了 V8。

上节课我们有提到，V8 是一个 JS 的执行引擎，在这个 helloworld 的代码中，除去运行JS 代码的两部分，其它的代码都是为 JS 代码运行提供的准备工作。

我们现在就看一下运行时都做了哪些基本的准备工作。

V8 在运行时的表现

上面代码是 hello-world 代码的主函数，也是核心的部分。我们梳理一下关键过程有哪些：首先hello- world代码的主函数调用了 v8::V8::Initialize() 方法对 V8 进行初始化；然后，调用了 v8::Isolate::New 来创建 Isolate；接着，创建完成后调用了 v8::Script::Compile 来进行编译；最后，调用 script->Run 用来执行 JS 代码。

我们后面会围绕上述关键过程做分析。你可以结合下面这张图，看看 hello-world.cc 的执行过程，还有这个过程里涉及到的核心方法和重要数据结构。

在这里插入图片描述

好，让我们进入具体分析环节，先从内存申请开始说起。

V8启动时的内存申请

申请内存从 InitReservation 方法开始，它主要处理的操作就是为 V8 引擎向 OS 申请内存，代码在 src/utils/allocation.cc 这个目录中：

      // Reserve a region of twice the size so that there is an aligned address
      // within it that's usable as the cage base.
      VirtualMemory padded_reservation(params.page_allocator,
                                       params.reservation_size * 2,
                                       reinterpret_cast<void*>(hint));
      if (!padded_reservation.IsReserved()) return false;

      // Find properly aligned sub-region inside the reservation.
      Address address =
          VirtualMemoryCageStart(padded_reservation.address(), params);
      CHECK(padded_reservation.InVM(address, params.reservation_size));

申请内存的时候，InitReservation 会先申请两倍的内存，保证内存对齐，再从两倍内存中找到一个适合对齐地址，这是 V8 真正使用的内存地址。这块申请出来的内存后面的工作里用得上。完成申请后，还会再调用 padded_reservation.Free() 方法，将刚开始申请的内存释放掉。

下面我带你看看 VirtualMemoryCage 数据结构，它是 V8 内存管理的主要数据结构。V8的内存方式采用的段页式，和 OS 的内存数据结构比较类似，但区别是 V8 只有一个段，OS 会有多段，但是 V8 会有很多页。

VirtualMemeoryCage 的数据结构位于allocation.h 文件中，如下所示：

// +------------+-----------+-----------  ~~~  -+
// |     ...    |    ...    |   ...             |
// +------------+-----------+------------ ~~~  -+
// ^            ^           ^
// start        cage base   allocatable base
//
// <------------>           <------------------->
// base bias size              allocatable size
// <-------------------------------------------->
//             reservation size

reservation size 是 V8 实际申请的内存，start 是内存基址，cage base 是页表的位置，allocatable 是 V8 可分配内存的开始，用来创建 Isolate。

Isolate

Isolate是一个完整的V8实例，有着完整的堆和栈。V8是虚拟机，Isolate才是运行JavaScript的宿主。一个Isolate是一个独立的运行环境，包括但不限于堆管理器（heap）、垃圾回收器（GC）等。

在同一个时间，有且只有一个线程能在Isolate中运行代码，也就是说同一时刻，只有一个线程能进入Iisolate，而多个线程可以通过切换来共享同一个Isolate。

Isolate 对外的接口是 V8_EXPORT ，定义在 include/v8.h 文件中，其他程序可以调用它。这个接口也可以理解为JavaScript的运行单元，多个线程也就是多个任务，它们可以共享一个运行单元，主要涉及到几个 V8 的概念：

Context：上下文，所有的JS代码都是在某个V8 Context中运行的。
Handle：一个指定JS对象的索引，它指向此JS对象在V8堆中的位置。
Handle Scope：包含很多handle的集合，用来统一管理多个handle，当Scope被移出堆时，它所管理的handle集合也会被移除。

Isolate 还有一个对内的数据结构 V8_EXPORT_PRIVATE，也是一个核心的数据结构，内部的很多重要的结构都会用到它，后面编译流程我还会讲到。

编译

V8 的编译流程也是 V8 的核心流程，我们先简单看下编译的大概流程：

tokenize （分词）：将 JS 代码解析为 Token 流，Token 是语法上的不可拆分的最小单位；
parse （解析）：语法分析，将上一步生成的 token 流转化为 AST 结构，AST 被称为抽象语法树；
ignite （解释）：通过解释器，生成字节码。

接着，我们再看看这个过程的关键数据结构 V8_EXPORT_PRIVATE ParseInfo，代码在 src/parsing/parse-info.cc 目录下：

ParseInfo 这个数据结构就是JS 代码生成token，再生成 AST 的过程，AST 的数据结构位置在 src/ast/ast.h。

生成 AST后，解释器会根据 AST生成字节码，并解释执行字节码。字节码是介入 AST和机器码之间的一种数据结构，你先留个印象，我们后面再详细说。

代码执行

经过编译，最终生成了字节码。我们继续来看 Exectuion 这个数据结构，这个结构承载着 JS 代码运行过程前后的相关信息：

  class Execution final : public AllStatic {
 public:
  // Whether to report pending messages, or keep them pending on the isolate.
  enum class MessageHandling { kReport, kKeepPending };
  enum class Target { kCallable, kRunMicrotasks };

  // Call a function, the caller supplies a receiver and an array
  // of arguments.
  //
  // When the function called is not in strict mode, receiver is
  // converted to an object.
  //
  V8_EXPORT_PRIVATE V8_WARN_UNUSED_RESULT static MaybeHandle<Object> Call(
      Isolate* isolate, Handle<Object> callable, Handle<Object> receiver,
      int argc, Handle<Object> argv[]);

通过前面关键过程和数据结构的讲解，相信你已经基本了解了 V8 运行时的核心流程，下面我们从宏观层面看一下这个过程。

V8 编译 —— V8 执行 JS 的过程

JS代码是给人看的，并不能由机器直接运行，需要很多中间步骤的转换，执行这些步骤的就是JS解析器。

主要过程是这样：首先对JS源代码进行词法分析，将源代码拆分成一个个简单的词语（即Token）；然后，以这些Token为输入流进行语法分析，形成一棵抽象语法树（即AST），并检查其语法上的错误；最后，由语法树生成字节码，由JS解析器运行。下面我们分别讨论这几个步骤。

词法分析

词法分析是将 JS 代码拆分成对应的 Token，Token 是能拆分的最小单位，固定 type 表述类型/属性，value 表示对应的值，如下图 Token。

在这里插入图片描述

[{
  "type": "Keyword",
  "value": "let"
}, {
  "type": "Identifier",
  "value": "name"
}, {
  "type": "Punctuator",
  "value": "="
}, {
  "type": "string",
  "value": "LMOS"
}]

语法分析

在进行词法分析转为 Token 之后，解析器会继续根据生成的 Token 生成对应的 AST。说起AST，相信前端同学并不陌生，也是热词之一，无论是在 Vue、React 中表示虚拟 DOM ，或者表示 Babel 对 JS 的转译，都需要先将其转化为对应的 AST。

字节码

在解析器（Parser）将 JS 代码解析成 AST 之后， 解释器（Ignition）根据 AST 来生成字节码（也称中间码）。前文提到 CPU 只能识别机器码，对字节码是识别不了的，这里就衍生出一个问题，如果 CPU 识别不了字节码，那为什么还要在中间插一步来耗费资源转成字节码呢？效率不是很低吗？

在计算机学科里聊效率，都逃避不了时间和空间这两个概念，绝大部分的优化都是空间换时间或时间换空间，两者的平衡，效率如何达到最高，是一个很值得深入研究的问题。

拿之前版本的 V8 引擎执行 JS 来说，是没有转字节码这一步骤的，而是直接从 AST 转成机器码，这个过程称为编译过程，所以每次拿到 JS 文件的时候，首先都会编译，而这个过程还是比较浪费时间的，这是一件比较头疼的事情，需要一个解决办法。