1 概述

JavaScript 引擎是一个专门处理 JavaScript 脚本的虚拟机，它将我们编写的 JavaScript 代码转换为计算机可以理解和执行的机器码。这些引擎通常内置于网页浏览器中，但也被广泛应用于其他运行时环境，例如 Node.js，使得 JavaScript 能够在服务器端运行。JavaScript 引擎的出现极大地推动了 Web 技术的进步，使得网页从静态展示变为动态交互，并逐步拓展到桌面应用、移动应用乃至物联网等多个领域。

在 2008 年到 2009 年的第二次浏览器大战之前，JavaScript 引擎主要被视为简单的解释器。然而，随着 Web 应用的复杂性日益增加，对性能的需求也水涨船高。浏览器开发者们开始了一场关于开发更快 JavaScript 引擎的竞赛，引入了即时编译（JIT）等先进技术，显著提升了 JavaScript 代码的执行效率。

2 工作原理

JavaScript 引擎的工作流程通常可以分为以下几个核心阶段：

2.1 解析（Parsing）

当 JavaScript 代码被加载到引擎中时，首先会进入解析阶段。这个阶段主要包括词法分析（Lexical Analysis）和语法分析（Syntactic Analysis）。

• 词法分析：将代码分解成一系列的词法单元（Tokens），例如关键字、标识符、运算符等。
• 语法分析：将词法单元流转换成一个抽象语法树（Abstract Syntax Tree, AST）。AST 是代码结构的一种树状表示，它移除了所有不必要的语法细节，只保留了代码的结构信息。

例如，以下 JavaScript 代码：

function add(a, b) {
  return a + b
}

会被解析成一个表示其结构和逻辑的 AST。

2.2 解释与编译（Interpretation and Compilation）

AST 生成后，引擎会将其转换为可执行的代码。现代 JavaScript 引擎通常采用混合模式，结合了解释器和即时编译器（Just-In-Time Compiler, JIT）。

• 解释器：快速地将 AST 转换为字节码（Bytecode）并执行。字节码是一种比机器码更抽象的中间代码，执行速度比直接解释 AST 快，但不如机器码。
• 即时编译器（JIT）：在代码执行过程中，JIT 编译器会监控代码的运行情况。对于频繁执行的“热点”代码，JIT 会将其编译成高度优化的机器码，从而大幅提升执行速度。当代码不再是热点或优化假设失效时，JIT 可能会进行反优化，退回到字节码执行。

这种解释与编译的协同工作，使得 JavaScript 引擎既能快速启动执行，又能对长时间运行的代码进行深度优化。

2.3 内存管理（Memory Management）

JavaScript 引擎负责管理程序运行时的内存分配和回收。这主要通过以下两个组件实现：

• 内存堆（Memory Heap）：用于存储对象和函数等引用类型数据。当创建对象时，内存会在堆上分配。
• 调用栈（Call Stack）：用于存储函数调用的执行上下文。每当一个函数被调用，它的执行上下文就会被推入栈中；函数执行完毕后，其上下文会从栈中弹出。

JavaScript 引擎还内置了垃圾回收器（Garbage Collector），它会自动识别并回收不再被程序引用的内存，防止内存泄漏，从而确保程序的稳定运行。

3 主流 JavaScript 引擎对比

目前市面上有多个主流的 JavaScript 引擎，它们各自在不同的浏览器或运行时环境中发挥作用，并拥有独特的优化策略和特点。以下是其中几个著名的引擎：

引擎名称	宿主环境	主要特点	优化技术
V8	Google Chrome, Node.js, Electron	性能卓越，支持 WebAssembly，广泛应用于服务器端和桌面应用	即时编译（JIT），隐藏类，内联缓存，垃圾回收（Orinoco）
SpiderMonkey	Mozilla Firefox	历史悠久，专注于标准合规性，支持 WebAssembly	即时编译（JIT），基线编译器（Baseline Compiler），优化编译器（IonMonkey），垃圾回收（Incremental GC）
JavaScriptCore (JSC)	Apple Safari, React Native	内存效率高，启动速度快，深度集成于 Apple 生态系统	即时编译（JIT），低延迟解释器（LLInt），基线 JIT，优化 JIT（DFG, FTL）
ChakraCore	Microsoft Edge (旧版), Node.js (旧版)	专注于多核优化和并行处理，支持 WebAssembly	即时编译（JIT），后台 JIT 编译，分层编译

3.1 V8 引擎

V8 是 Google 开发的开源高性能 JavaScript 和 WebAssembly 引擎，用 C++ 编写。它是 Google Chrome 浏览器和 Node.js 运行时的核心。V8 的设计目标是最大化 JavaScript 的执行速度，通过复杂的即时编译技术将 JavaScript 代码直接编译成机器码。

特点：

• 高性能：V8 采用多层编译器架构，包括 Ignition 解释器和 TurboFan 优化编译器，能够实现极高的执行效率。
• WebAssembly 支持：原生支持 WebAssembly，使得高性能的 C/C++/Rust 代码可以在 Web 上运行。
• 垃圾回收：使用 Orinoco 垃圾回收器，通过并行、增量和并发技术减少垃圾回收对主线程的影响。

代码示例：

V8 引擎在 Node.js 中执行以下代码时，会对其进行优化：

function calculateSum(limit) {
  let sum = 0
  for (let i = 0; i < limit; i++) {
    sum += i
  }
  return sum
}

console.log(calculateSum(1000000))

对于 calculateSum 这样频繁调用的函数，V8 会将其识别为“热点”代码，并使用 TurboFan 编译器将其优化为高效的机器码，从而加速计算。

3.2 SpiderMonkey 引擎

SpiderMonkey 是 Mozilla 的 JavaScript 和 WebAssembly 引擎，主要用于 Firefox 浏览器。它是第一个 JavaScript 引擎，由 Brendan Eich 在网景公司开发。SpiderMonkey 专注于标准合规性和跨平台兼容性。

特点：

• 标准合规：紧跟 ECMAScript 标准，通常是新特性最早的实现者之一。
• 分层编译：采用基线编译器（Baseline Compiler）和优化编译器（IonMonkey）相结合的分层编译策略，平衡启动速度和峰值性能。
• 内存管理：拥有先进的垃圾回收机制，如增量垃圾回收，以减少暂停时间。

代码示例：

SpiderMonkey 在 Firefox 中执行以下代码时，会确保严格遵循 ECMAScript 规范：

const person = {
  name: 'Alice',
  greet() {
    console.log(`Hello, my name is ${this.name}`)
  }
}

person.greet()

3.3 JavaScriptCore (JSC) 引擎

JavaScriptCore 是 Apple 的开源 JavaScript 引擎，是 WebKit 渲染引擎的一部分，主要用于 Safari 浏览器和所有 iOS/macOS 上的 Web 视图。它也广泛应用于 React Native 等移动开发框架。

特点：

• 内存效率：以其出色的内存管理和低内存占用而闻名，这对于移动设备尤为重要。
• 快速启动：通过优化的解释器和 JIT 编译策略，实现快速的代码启动和执行。
• 集成度高：与 Apple 的生态系统深度集成，提供高效的性能和安全性。

代码示例：

JSC 在 Safari 或 React Native 中执行以下代码时，会优先考虑内存效率和快速响应：

class Counter {
  constructor() {
    this.count = 0
  }

  increment() {
    this.count++
  }

  getValue() {
    return this.count
  }
}

const myCounter = new Counter()
myCounter.increment()
console.log(myCounter.getValue())

3.4 ChakraCore 引擎

ChakraCore 是微软的 JavaScript 引擎，曾用于旧版 Microsoft Edge 浏览器和 Node.js 的一个分支。它是一个开源项目，专注于多核优化和并行处理。

特点：

• 多核优化：设计时考虑了现代多核处理器，能够更好地利用并行计算资源。
• 后台 JIT 编译：可以在后台线程进行 JIT 编译，减少对主线程的阻塞，提升用户体验。
• WebAssembly 支持：同样支持 WebAssembly，扩展了其应用范围。

代码示例：

ChakraCore 在执行以下异步操作时，其后台 JIT 编译和多核优化能够发挥作用：

async function fetchData(url) {
  const response = await fetch(url)
  const data = await response.json()
  return data
}

fetchData('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error))

4 总结

JavaScript 引擎是现代 Web 技术栈中不可或缺的组成部分。从最初的简单解释器到如今集成了复杂优化技术的虚拟机，它们在不断演进，以满足日益增长的性能需求。理解这些引擎的工作原理和特点，不仅能帮助开发者编写更高效的 JavaScript 代码，也能更好地把握 Web 技术的未来发展方向。

5 参考文献

[1] JavaScript引擎 - 维基百科，自由的百科全书. https://zh.wikipedia.org/wiki/JavaScript%E5%BC%95%E6%93%8E
[2] V8 JavaScript engine. https://v8.dev/
[3] Home | SpiderMonkey JavaScript/WebAssembly Engine. https://spidermonkey.dev/
[4] JavaScriptCore | Apple Developer Documentation. https://developer.apple.com/documentation/javascriptcore
[5] ChakraCore. https://github.com/ChakraCore/ChakraCore