JS 引擎内部剖析：Shapes 和 Inline Caches
2023-11-12 18:49:16
在现代 Web 开发中，JavaScript (JS) 已成为一种必不可少且无处不在的语言。JS 引擎作为 JS 代码的执行载体，对 Web 应用的性能起着至关重要的作用。本文将带您深入探索 JS 引擎内部的奥秘，了解 JS 引擎是如何将源代码转换为可执行代码的。
JS 引擎运行过程
JS 引擎的运行过程可以分为以下几个步骤：
- 解析（Parsing） ：JS 源码通过 parser（分析器）转化为 AST（抽象语法树）。AST 是 JS 代码的结构化表示，它包含了代码中的所有语法元素，如函数、变量、表达式等。
- 编译（Compilation） ：AST 经过编译器编译为 bytecode（字节码）。字节码是一种针对特定平台的中间代码，它可以被解释器直接执行。
- 解释（Interpretation） ：解释器负责将字节码解释为机器指令。机器指令是计算机可以直接执行的指令，它可以对数据进行各种操作，如加、减、乘、除等。
- 优化（Optimization） ：为了提高运行效率，optimizing compiler（优化编辑器）负责生成 optimized code（优化后的机器码）。优化后的机器码经过各种优化技术处理，可以显著提高代码的执行速度。
Shapes 和 Inline Caches
在 JS 引擎中，Shapes 和 Inline Caches 是两个非常重要的概念。
Shapes ：Shape 是 JS 对象的属性布局。它定义了对象的属性名、属性类型和属性值。Shape 的主要作用是提高对象的属性访问速度。当 JS 引擎访问对象的属性时，它会先检查对象的 Shape，如果对象的 Shape 中包含该属性，则可以直接访问该属性，而无需遍历整个对象。
Inline Caches ：Inline Cache 是一种缓存机制，它可以减少函数调用的开销。当 JS 引擎第一次调用一个函数时，它会将函数的地址存储在 Inline Cache 中。下次调用该函数时，JS 引擎可以直接从 Inline Cache 中获取函数的地址，而无需再次进行函数查找。
Shapes 和 Inline Caches 的使用可以显著提高 JS 引擎的执行效率。
V8 的优化技术 Crankshaft
Crankshaft 是 V8（Google 开发的 JS 引擎）中的一个优化编译器。Crankshaft 使用了一种称为隐藏类（Hidden Class）的技术来提高对象的属性访问速度。隐藏类是对象的 Shape 的一种特殊形式，它只包含对象的公共属性。当 JS 引擎访问对象的属性时，它会先检查对象的隐藏类，如果对象的隐藏类中包含该属性，则可以直接访问该属性，而无需遍历整个对象。
Crankshaft 还使用了一种称为内联缓存（Inline Caching）的技术来减少函数调用的开销。内联缓存与 Inline Cache 类似，但它只缓存那些被频繁调用的函数。当 JS 引擎调用一个函数时，它会先检查内联缓存，如果内联缓存中包含该函数，则可以直接调用该函数，而无需再次进行函数查找。
Crankshaft 的这些优化技术可以显著提高 V8 的执行效率。
总结
JS 引擎是 JS 代码的执行载体，对 Web 应用的性能起着至关重要的作用。本文介绍了 JS 引擎的运行过程，以及 Shapes 和 Inline Caches 在 JS 引擎中的作用。我们还介绍了 V8 的优化技术 Crankshaft。通过了解这些知识，我们能够更好地理解 JS 引擎是如何工作的，以及如何编写出更高效的 JS 代码。
