JavaScript引擎工作原理解析、AST、JIT 编译、Ignition/TurboFan、隐藏类、内联缓存、垃圾回收是前端性能优化的底层根基。一、开篇代码到底是怎么跑起来的你写的 JS 代码function greet(name) { return Hello, name ! } greet(World)从文本到 CPU 执行全靠JavaScript 引擎。主流引擎Chrome / Node.js / Deno / ElectronV8FirefoxSpiderMonkeySafari / BunJavaScriptCore理解引擎 写出更快的代码 搞定性能问题。二、本文你将学到JS 引擎是什么、做什么V8 解析流程与 AST 抽象语法树Ignition解释器 TurboFan编译器协作JIT 即时编译原理隐藏类Hidden Class与内联缓存IC垃圾回收GC机制写给引擎看的 “友好代码” 实践三、什么是 JavaScript 引擎JS 引擎是一个把源码转换成机器码并执行的程序。所有引擎都遵循ECMAScript 标准所以代码在各环境行为基本一致。主流引擎对照表浏览器 / 运行时引擎Chrome, Node.js, Deno, ElectronV8FirefoxSpiderMonkeySafari, BunJavaScriptCoreEdge2020 年后V8四、V8 执行代码的全过程工厂类比源码→ 原材料解析Parser→ 质量检查拆分 TokenAST抽象语法树→ 施工蓝图Ignition解释器→ 快速开工生成字节码TurboFan优化编译器→ 热点代码编译成极速机器码反优化Deoptimization→ 假设失败退回字节码五、阶段 1解析 Parsing两步分词Tokenization把代码拆成最小有意义单元function、add、(、a、、}...语法分析AST生成抽象语法树表示代码逻辑结构。你可以在 AST Explorer 在线查看。六、阶段 2Ignition 解释器V8 5.9 后默认解释器。生成字节码Bytecode体积小、启动快一边执行一边收集分析数据类型、调用次数字节码示例Ldar a1 Add a2 Return七、阶段 3TurboFan 优化编译器当函数调用频繁热点代码Ignition 会通知 TurboFan 优化。基于收集的类型信息生成高效机器码。优化依据函数总是传数字对象结构稳定分支总是走某条路优化后速度可提升几十倍。八、阶段 4反优化 Deoptimization如果 TurboFan 的假设被打破突然传入字符串对象结构突变类型乱变V8 会丢掉优化机器码退回 Ignition 字节码稍后重新分析优化九、什么是 JIT 编译JS 不是解释型也不是预编译型而是JIT 即时编译。三种执行模式对比解释型启动快跑很慢预编译AOT启动慢跑极快JITV8启动快 跑很快 兼顾JIT 特别适合 JS 这种动态类型语言。十、隐藏类 Hidden ClassMap/ShapeV8 给每个对象分配一个隐藏类描述对象结构有哪些属性属性顺序内存偏移量相同结构的对象共享同一个隐藏类 →极快属性访问。重点规则属性添加顺序不同 → 不同隐藏类 → 无法共享优化const a { x:1, y:2 } const b { y:2, x:1 } // 不同隐藏类十一、内联缓存 Inline CachingIC引擎记住“对于这个隐藏类属性 x 在内存偏移 0 处”下次直接读内存不用查表。速度从 O (n) → O (1)。IC 三种状态单态Monomorphic最快同一种结构多态Polymorphic较快少量结构超态Megamorphic最慢无数结构保持单态 性能提升关键十二、垃圾回收 GCOrinocoJS 自动内存管理V8 采用分代回收。分代假说绝大多数对象 “朝生暮死”。内存堆分为新生代存放短命对象快速频繁回收Scavenger老生代存放长寿对象慢速但彻底回收Mark-CompactGC 流程标记从根对象遍历标记存活对象清除回收未标记对象压缩整理内存碎片现代 V8 使用并行 GC增量 GC并发 GC尽量不阻塞主线程。十三、写给引擎的友好代码实战优化保持对象结构一致统一顺序初始化属性用工厂 / Class。不要乱改变量类型数字就一直数字别变字符串 /null。不要用 deletedelete 会破坏隐藏类改用undefined或Map。避免稀疏数组不要arr[1000] 1会产生空洞。保持函数单态传入结构相同的对象。避开 eval /new Function彻底阻断优化。十四、常见误区❌ “JS 是解释型语言”✅ 现代 JS 是 JIT 编译型❌ “代码越少越快”✅ 清晰、稳定、可预测的代码更快❌ “我要手动管理内存”✅ GC 自动管理只需避免内存泄漏❌ “typeof null 是 bug”✅ 这是标准规定历史遗留十五、核心总结V8 目前最主流 JS 引擎执行流程源码 → 解析 → AST → 字节码 → 优化机器码Ignition 快启动TurboFan 热优化隐藏类 内联缓存 对象属性极速访问单态最快超态最慢分代垃圾回收高效自动管理内存代码稳定、结构统一 引擎跑得飞快 概念 汇总1. 引擎与执行模型JavaScript 引擎同类JS 运行时、虚拟机、执行环境V8 引擎同类SpiderMonkey、JavaScriptCore、HermesJIT 即时编译同类即时编译、运行时编译、混合执行AOT 预编译同类提前编译、静态编译解释执行同类边解释边执行、无编译启动2. 编译与中间表示Parsing 解析同类词法分析、语法分析、编译前端Tokenization 分词同类词法扫描、token 流AST 抽象语法树同类语法结构树、中间表示Bytecode 字节码同类中间码、跨平台指令集机器码同类原生指令、CPU 指令3. V8 双引擎架构Ignition 解释器同类基线执行、快速执行、字节码解释TurboFan 优化编译器同类优化后端、机器码生成、热点编译Deoptimization 反优化同类回退执行、假设失效、重新编译4. 对象优化机制Hidden Class 隐藏类同类Map、Shape、对象结构描述符Transition Chain 转换链同类结构渐变、隐藏类迁移Inline Caching 内联缓存同类IC、属性偏移缓存、快速访问Monomorphic 单态同类单一结构、最快缓存Polymorphic 多态同类少量结构、较快缓存Megamorphic 超态同类无数结构、无优化、最慢5. 内存与垃圾回收Generational GC 分代回收同类分代假说、年轻代 / 老生代Minor GC 小 GC同类Scavenger、新生代回收、快速 GCMajor GC 大 GC同类Mark-Compact、全量 GCConcurrent GC 并发 GC同类后台 GC、不阻塞主线程Memory Leak 内存泄漏同类意外引用、无法 GC、闭包泄漏
JavaScript 引擎(V8)
发布时间:2026/5/19 4:06:28
JavaScript引擎工作原理解析、AST、JIT 编译、Ignition/TurboFan、隐藏类、内联缓存、垃圾回收是前端性能优化的底层根基。一、开篇代码到底是怎么跑起来的你写的 JS 代码function greet(name) { return Hello, name ! } greet(World)从文本到 CPU 执行全靠JavaScript 引擎。主流引擎Chrome / Node.js / Deno / ElectronV8FirefoxSpiderMonkeySafari / BunJavaScriptCore理解引擎 写出更快的代码 搞定性能问题。二、本文你将学到JS 引擎是什么、做什么V8 解析流程与 AST 抽象语法树Ignition解释器 TurboFan编译器协作JIT 即时编译原理隐藏类Hidden Class与内联缓存IC垃圾回收GC机制写给引擎看的 “友好代码” 实践三、什么是 JavaScript 引擎JS 引擎是一个把源码转换成机器码并执行的程序。所有引擎都遵循ECMAScript 标准所以代码在各环境行为基本一致。主流引擎对照表浏览器 / 运行时引擎Chrome, Node.js, Deno, ElectronV8FirefoxSpiderMonkeySafari, BunJavaScriptCoreEdge2020 年后V8四、V8 执行代码的全过程工厂类比源码→ 原材料解析Parser→ 质量检查拆分 TokenAST抽象语法树→ 施工蓝图Ignition解释器→ 快速开工生成字节码TurboFan优化编译器→ 热点代码编译成极速机器码反优化Deoptimization→ 假设失败退回字节码五、阶段 1解析 Parsing两步分词Tokenization把代码拆成最小有意义单元function、add、(、a、、}...语法分析AST生成抽象语法树表示代码逻辑结构。你可以在 AST Explorer 在线查看。六、阶段 2Ignition 解释器V8 5.9 后默认解释器。生成字节码Bytecode体积小、启动快一边执行一边收集分析数据类型、调用次数字节码示例Ldar a1 Add a2 Return七、阶段 3TurboFan 优化编译器当函数调用频繁热点代码Ignition 会通知 TurboFan 优化。基于收集的类型信息生成高效机器码。优化依据函数总是传数字对象结构稳定分支总是走某条路优化后速度可提升几十倍。八、阶段 4反优化 Deoptimization如果 TurboFan 的假设被打破突然传入字符串对象结构突变类型乱变V8 会丢掉优化机器码退回 Ignition 字节码稍后重新分析优化九、什么是 JIT 编译JS 不是解释型也不是预编译型而是JIT 即时编译。三种执行模式对比解释型启动快跑很慢预编译AOT启动慢跑极快JITV8启动快 跑很快 兼顾JIT 特别适合 JS 这种动态类型语言。十、隐藏类 Hidden ClassMap/ShapeV8 给每个对象分配一个隐藏类描述对象结构有哪些属性属性顺序内存偏移量相同结构的对象共享同一个隐藏类 →极快属性访问。重点规则属性添加顺序不同 → 不同隐藏类 → 无法共享优化const a { x:1, y:2 } const b { y:2, x:1 } // 不同隐藏类十一、内联缓存 Inline CachingIC引擎记住“对于这个隐藏类属性 x 在内存偏移 0 处”下次直接读内存不用查表。速度从 O (n) → O (1)。IC 三种状态单态Monomorphic最快同一种结构多态Polymorphic较快少量结构超态Megamorphic最慢无数结构保持单态 性能提升关键十二、垃圾回收 GCOrinocoJS 自动内存管理V8 采用分代回收。分代假说绝大多数对象 “朝生暮死”。内存堆分为新生代存放短命对象快速频繁回收Scavenger老生代存放长寿对象慢速但彻底回收Mark-CompactGC 流程标记从根对象遍历标记存活对象清除回收未标记对象压缩整理内存碎片现代 V8 使用并行 GC增量 GC并发 GC尽量不阻塞主线程。十三、写给引擎的友好代码实战优化保持对象结构一致统一顺序初始化属性用工厂 / Class。不要乱改变量类型数字就一直数字别变字符串 /null。不要用 deletedelete 会破坏隐藏类改用undefined或Map。避免稀疏数组不要arr[1000] 1会产生空洞。保持函数单态传入结构相同的对象。避开 eval /new Function彻底阻断优化。十四、常见误区❌ “JS 是解释型语言”✅ 现代 JS 是 JIT 编译型❌ “代码越少越快”✅ 清晰、稳定、可预测的代码更快❌ “我要手动管理内存”✅ GC 自动管理只需避免内存泄漏❌ “typeof null 是 bug”✅ 这是标准规定历史遗留十五、核心总结V8 目前最主流 JS 引擎执行流程源码 → 解析 → AST → 字节码 → 优化机器码Ignition 快启动TurboFan 热优化隐藏类 内联缓存 对象属性极速访问单态最快超态最慢分代垃圾回收高效自动管理内存代码稳定、结构统一 引擎跑得飞快 概念 汇总1. 引擎与执行模型JavaScript 引擎同类JS 运行时、虚拟机、执行环境V8 引擎同类SpiderMonkey、JavaScriptCore、HermesJIT 即时编译同类即时编译、运行时编译、混合执行AOT 预编译同类提前编译、静态编译解释执行同类边解释边执行、无编译启动2. 编译与中间表示Parsing 解析同类词法分析、语法分析、编译前端Tokenization 分词同类词法扫描、token 流AST 抽象语法树同类语法结构树、中间表示Bytecode 字节码同类中间码、跨平台指令集机器码同类原生指令、CPU 指令3. V8 双引擎架构Ignition 解释器同类基线执行、快速执行、字节码解释TurboFan 优化编译器同类优化后端、机器码生成、热点编译Deoptimization 反优化同类回退执行、假设失效、重新编译4. 对象优化机制Hidden Class 隐藏类同类Map、Shape、对象结构描述符Transition Chain 转换链同类结构渐变、隐藏类迁移Inline Caching 内联缓存同类IC、属性偏移缓存、快速访问Monomorphic 单态同类单一结构、最快缓存Polymorphic 多态同类少量结构、较快缓存Megamorphic 超态同类无数结构、无优化、最慢5. 内存与垃圾回收Generational GC 分代回收同类分代假说、年轻代 / 老生代Minor GC 小 GC同类Scavenger、新生代回收、快速 GCMajor GC 大 GC同类Mark-Compact、全量 GCConcurrent GC 并发 GC同类后台 GC、不阻塞主线程Memory Leak 内存泄漏同类意外引用、无法 GC、闭包泄漏