muliminty note

js：JavaScript引擎编译的过程

15分钟阅读

JavaScript 引擎的编译过程

JavaScript 引擎是用于解释和执行 JavaScript 代码的程序。它负责将我们编写的 JavaScript 代码转换为机器能够理解和执行的指令。现代的 JavaScript 引擎大多数使用 即时编译（JIT） 技术，在执行时将 JavaScript 代码编译成高效的机器代码。

JavaScript 编译过程大致可以分为以下几个阶段：

1. 词法分析（Lexical Analysis）

词法分析的过程，也叫做 扫描，是将原始的 JavaScript 代码（源代码）拆分成一个个**记号（Token）**的过程。每个记号代表了源代码中的一个最小的单元，例如关键字、操作符、标识符等。

过程：

  • 输入：源代码字符串。
  • 输出：记号的列表（词法单元）。例如，let x = 10; 会被拆分成以下记号：
    • let → 关键字
    • x → 标识符
    • = → 赋值操作符
    • 10 → 数字常量
    • ; → 语句分隔符

2. 语法分析（Syntax Analysis）

语法分析阶段，也叫做 解析（Parsing），是将词法分析得到的记号序列转换为抽象语法树（Abstract Syntax Tree，AST）的过程。

  • AST（抽象语法树）：是 JavaScript 代码的结构化表示，描述了代码中各个元素的层次关系。例如，let x = 10; 的 AST 可能长这样：

    VariableDeclaration
  ├── let
  ├── Identifier (x)
  └── Literal (10)

过程：

  • 输入：记号序列（Token Stream）。
  • 输出：抽象语法树（AST）。这棵树展示了代码结构，描述了代码中的表达式、语句和控制流等。

3. 生成字节码（Bytecode Generation）

现代的 JavaScript 引擎，如 V8 引擎，通常会将 AST 编译成 字节码，这是一种中间表示，它比源代码更接近机器代码，但仍然是跨平台的，具有良好的执行效率。

字节码 是一种低级的中间代码，它能够被虚拟机（V8 引擎的虚拟机）执行，而不需要直接编译成平台特定的机器码。字节码的优势是执行速度较快，并且不依赖于特定的硬件平台。

过程：

  • 输入：AST。
  • 输出：字节码。字节码是 JavaScript 引擎能理解并执行的格式。

4. 执行与优化（Execution & Optimization）

当字节码准备好后，JavaScript 引擎开始执行代码。如果代码的执行频率较高，JavaScript 引擎会对这些频繁执行的代码进行进一步的优化。

  1. 即时编译（JIT Compilation）：

    • JavaScript 引擎采用 即时编译（JIT） 技术，这意味着代码并不是一次性完全编译的，而是根据运行时的需要，逐步将热点代码（经常执行的代码）编译成机器代码。
    • 热路径（Hot Path）：引擎会检测哪些代码路径是高频执行的（如循环体内的代码），然后针对这些路径进行优化，生成机器代码，这些机器代码将直接在 CPU 上执行，而不是通过虚拟机执行字节码。

  2. 优化阶段：

    • 内联缓存（Inline Caching, IC）：为了加快属性访问速度，JavaScript 引擎会通过内联缓存记录属性查找的结果。
    • 类型优化：JavaScript 是动态类型语言，意味着一个变量可以在不同时间持有不同类型的值。为了提升执行速度，引擎会对变量类型进行优化，假设某个变量的类型保持一致，就可以为该变量生成针对该类型优化的机器代码。
    • 逃逸分析（Escape Analysis）：通过分析哪些对象的生命周期可以局限于函数内，避免创建不必要的对象，从而优化内存管理。

过程：

  • 输入：字节码。
  • 输出：机器码。这个机器码能直接由 CPU 执行，并能比字节码更高效地执行。

5. 垃圾回收（Garbage Collection）

JavaScript 引擎会自动进行内存管理，主要通过垃圾回收（GC）来管理内存。垃圾回收的目标是自动回收不再使用的内存，以避免内存泄漏。

  • 标记-清除算法：大多数引擎使用标记-清除算法来识别并清除无用对象。通过标记活动对象，垃圾回收器会清理掉不再使用的对象，释放内存。

6. 执行引擎与事件循环（Event Loop）

JavaScript 是单线程执行的，这意味着一次只能执行一个任务。为了处理异步操作（如事件、HTTP 请求等），JavaScript 引擎使用 事件循环（Event Loop） 来调度任务。

  • 执行栈（Call Stack）：存储正在执行的函数。
  • 任务队列（Task Queue）：存储所有待执行的任务。
  • 事件循环（Event Loop）：循环监控执行栈和任务队列，执行栈为空时从任务队列中取任务并执行。

过程：

  • 输入：待执行的任务和回调。
  • 输出：任务按顺序执行。

V8 引擎的执行流程

V8 引擎是 Google Chrome 和 Node.js 中使用的 JavaScript 引擎，它实现了上述的编译和优化过程。V8 引擎在执行 JavaScript 代码时，会经历以下几个步骤：

  1. 解析源代码：V8 首先将 JavaScript 代码解析成 AST。
  2. 生成字节码：然后生成字节码，这个字节码可以直接由虚拟机执行。
  3. 执行字节码：引擎开始执行字节码，并使用 JIT 编译器将热点代码编译成机器代码。
  4. 优化机器码：对频繁执行的代码进行进一步优化，以提高执行效率。
  5. 垃圾回收：自动清理不再使用的内存对象，避免内存泄漏。

总结

JavaScript 引擎的编译过程包括多个阶段：

  1. 词法分析（将源代码转为记号）。
  2. 语法分析（将记号转为抽象语法树）。
  3. 字节码生成（将 AST 转为字节码）。
  4. 执行与优化（将字节码编译成机器码，并进行优化）。
  5. 垃圾回收（自动清理不再使用的内存）。
  6. 事件循环（通过事件循环处理异步任务）。

现代 JavaScript 引擎通过 即时编译 和 优化技术 提高了 JavaScript 代码的执行效率，同时提供了内存管理和异步操作的支持。

执行上下文（Execution Context） 的创建是在 JavaScript 代码执行的过程中由引擎自动处理的，通常是在 代码执行阶段，具体来说，是在 执行栈 中管理函数调用时的关键步骤。

执行上下文的创建与执行过程

  1. 执行上下文的定义 执行上下文是 JavaScript 代码执行时的环境，它包含了代码在执行时所需的所有信息，包括变量、函数声明、作用域链、this 指向等。每当函数被调用，或每当全局代码被执行时，都会创建一个新的执行上下文。

  2. 执行上下文的创建步骤 执行上下文的创建通常分为以下几个步骤：

    • 创建变量环境（Variable Environment）：

      • 这是一个内部的环境，用于存储当前执行上下文中声明的变量、函数及其值。
      • 变量环境由 词法环境（Lexical Environment） 和 变量对象（Variable Object） 组成。

    • 设置作用域链（Scope Chain）：

      • 作用域链是指向当前执行上下文中所有外部执行上下文（函数嵌套）的引用链。它保证了当前上下文能够访问到所有外部作用域的变量。

    • 确定this指向：

      • 在执行上下文中，this 的指向会根据调用环境不同而变化（比如全局作用域、函数调用、构造函数等）。在函数执行时，this 会被动态绑定。

    • 创建 this：

      • this 的值依赖于函数调用的方式。例如，普通函数调用、对象方法调用、构造函数调用等都会影响 this 的值。

  3. 执行上下文的生命周期

    • 全局执行上下文（Global Execution Context）：
      • 当 JavaScript 代码在浏览器中执行时，首先会创建一个全局执行上下文，这个上下文代表了全局代码的执行环境。
      • 全局上下文只会创建一次，且在整个应用的生命周期中存在。
    • 函数执行上下文（Function Execution Context）：
      • 每次函数被调用时，都会创建一个新的函数执行上下文。函数上下文在栈中会依次压入和弹出。

  4. 创建执行上下文的顺序（具体步骤） 当执行 JavaScript 代码时，执行上下文会根据以下步骤创建：

    1. 准备阶段（Creation Phase）：

      • 在执行上下文被压入栈之前，JavaScript 引擎首先会进行 词法分析，并且会为当前执行上下文创建 变量环境（Variable Environment） 和 作用域链（Scope Chain）。
      • 这时，JavaScript 引擎会扫描所有的变量声明和函数声明，并且在内存中为这些变量分配空间，但不赋值。

      例如，以下代码的执行过程：

      var a = 10;
function foo() {
  var b = 20;
}
      • 执行上下文的创建阶段会首先扫描出 a 和 foo 的声明，并为它们分配内存空间。在这时，a 和 foo 会被初始化为 undefined（对于变量）或指向函数的引用（对于函数声明）。

    2. 执行阶段（Execution Phase）：

      • 在创建阶段完成后，执行阶段会开始，执行上下文会开始逐行执行代码。
      • 此时，变量 a 被赋值为 10，并且函数 foo 中的变量 b 被赋值为 20。

代码执行与执行上下文的关系

  • 全局执行上下文：当 JavaScript 代码首次执行时，全局执行上下文会被创建并压入执行栈。在全局执行上下文中，this 会指向全局对象（浏览器中的 window 或 Node.js 中的 global）。

  • 函数执行上下文：每当函数被调用时，JavaScript 引擎都会为该函数创建一个新的函数执行上下文，并将其压入栈中。这个函数执行上下文会有自己的作用域链和 this。

执行上下文栈（Execution Context Stack）

执行上下文栈是一个栈结构，用来存储当前执行过程中的所有执行上下文。栈中的第一个上下文是全局执行上下文，之后会根据函数调用顺序依次创建和压入函数执行上下文。

执行上下文栈的工作方式：

  • 初始时，栈中只有 全局执行上下文。
  • 每当一个新的函数被调用时，一个新的 函数执行上下文 会被创建并压入栈中。
  • 当前的执行上下文执行完成后，会从栈中弹出，执行控制权返回到栈中的下一个执行上下文。

例如：

function foo() {
  console.log('Inside foo');
}
 
function bar() {
  foo();
  console.log('Inside bar');
}
 
bar();
  • 执行顺序：
    1. 全局执行上下文被压入栈。
    2. bar() 被调用，bar 的执行上下文被压入栈。
    3. 在 bar 执行中，foo() 被调用，foo 的执行上下文被压入栈。
    4. foo 执行完毕，弹出栈，返回到 bar。
    5. bar 执行完毕，弹出栈，返回到全局上下文。

总结

执行上下文是 JavaScript 代码执行的基本环境，包含了变量环境、作用域链、this 指向等信息。它在代码执行过程中根据不同的执行场景（如全局执行、函数调用）动态创建，并通过执行上下文栈来管理。每次函数被调用时，都会创建一个新的执行上下文并压入栈中，执行完毕后弹出栈，从而保证了 JavaScript 代码的正确执行和作用域管理。

关系图谱