WebKit 三件套 (2)：WebKit 之 JavaScriptCore/V8

WebKit 作为一个浏览器引擎，其中 Javascript 实现包括 JavaScriptCore 和 V8，为了能更全面的了解 WebKit，我们需要深入的了解 Javascript 实现的基本原理、其在 WebKit 中的作用以及与其他部分之间的交互，同时与 Gecko 中的 Javacript 实现作初步的对比。让我们开始了解 WebKit 之 Javascript 实现 JavaScriptCore、V8 之旅吧。

什么是 javascript?javascript 是一门动态、弱类型、基于原型的脚本语言，其核心部分包含对脚本的编译、解析、执行、反编译、垃圾回收及标准类/类型如 bool、string、number 的实现等；然后在此基础通过将已经符合 DOM 标准的文档 DOM 接口按照 javascript 接口定义及声明的方式绑定/导出到 javascript 运行环境中，以丰富 javascript 的内涵，其本质相当于有了 java 虚拟机后，通过 import 不同类型的类库来扩展 java 语言的应用。

目前 javascript 比较独特的地方在于它自身没有一个完整独立的运行环境，其往往依附于浏览器，由浏览器来提供运行环境，并控制或发起 javascript 进行编译、解析执行脚本、垃圾回收等，其核心部分相当于一个符合 ECMAScript 标准的动态库，以供浏览器来调用，这样看来其本质是为了对浏览器主要部分的扩展及更灵活运用的支持，从 MVC 的角度来看，javascript 相当于浏览器中的控制部分，其应用场景往往具有一定的局限性、独特性的；而通用的脚本语言如 perl、python、 ruby 等都提供了完整独立的语言运行环境及线程管理等，并且提供了良好的扩展机制以丰富语言的内涵。

为什么 JavaScript 在现代引擎（V8，JavaScriptCore）性能卓越下面测试下斐波拉契递归

console.time('a')function fs(n) {if (n <= 2) {return 1;} else {return fs(n - 1) + fs(n - 2);}}console.log(fs(15))console.timeEnd('a')分别使用 Java，JavaScript，PHP，Ruby 这四门语言编写了脚本，计算 n=40 的兔子数列，速度如下

C 或者 C++的代码我没有写，肯定跑得比狗还快。

首先是 Java，编译出字节码耗时约 1s，运行字节码耗时约 1s，666。

其次是 JavaScript，在 node 环境下运行耗时约 3.5s，在浏览器环境（Safari）下约 8s，66。

接着是 Ruby，出人意料的结果，约 39s，6 不起来了。

最后是 PHP，约 80s，233。

产生性能差异的原因：静态类型 vs 动态类型概括来说就是，静态类型语言在编译后会大量利用类型已知的优势，比如 int 类型，占用 4 个字节，编译后的代码就可以使用内存地址加偏移量的方法存取变量。而地址＋偏移量的算法汇编非常容易实现。

那动态类型语言是如何做的呢？概括的来说就是当做字符串通通存下来，之后存取就用字符串匹配。

编译型 vs 解释性编译型语言，就像 C/C++，代码要经过编译器编译成可执行程序后才可以运行。这个编译过程没什么时间要求，所以编译器可以做大量代码优化措施，有时候编译要好久好久。

解释型语言，就像 JavaScript，就是引擎直接读源码，然后就出结果，当然这样子做效率非常低。就像靠人脑去读源码，然后写答案一样。

奇葩型语言，就像 Java，有编译过程，但编译产出的是中间代码（字节码），这个过程也有充分的时间做优化。也有解释过程，字节码需要由 Java 虚拟机解释执行。

从这儿，大概可以理解，为什么 C/C++运行效率比 Java 更高。因为不管怎么说，直接运行二进制码都比解释执行字节码来得快吧。

所以，有趣的事情就来了，C/C++是大哥，Java 是二哥，一群解释型脚本语言是小弟们。

现代 JavaScript 引擎的努力 Java 想的肯定是优化虚拟机解释执行字节码的速度，这儿正是和大哥拉开差距的地方。从大哥那学了很多招。其中重要的一招就是 JIT（Just-In-Time），主要的思想就是解释器在解释字节码的时候，会将部分字节码转化成本地代码（汇编代码），这样可以被 CPU 直接执行，而不是解释执行，从而极大地提高性能。

JavaScript 从前辈那里学习了很多，总结来说有：

优化数据表示，弥补动态类型的性能缺陷

引入一个编译过程，而不是直接解释执行，但这个编译过程和运行是一起的，时间的权衡变得非常重要。

JIT 技术，与 Java 中的 JIT 原理相同

V8 引擎与 JavaScriptCore 引擎各个 JavaScript 优化的具体实现不太一样。

V8 引擎对于编译和 JIT 的做法是，在编译阶段的过程是：源码＝》抽象语法树＝》本地代码。其中从抽象语法树到本地代码的过程使用的是 JIT 全码生成器，其作用是将抽象语法树转换成各个硬件平台和直接运行的本地代码。V8 引擎的这种思路看起来像想要越过二哥 Java，直接学大哥 C/C++啊。

JavaScriptCore 引擎的做法是，在编译阶段的过程是：源码＝》抽象语法树＝》字节码（中间代码）。对这个阶段像极了二哥 Java 的编译过程，只是这里小弟可没有充裕的时间做优化。于是大量的字节码优化措施被延后，比如 JIT。JavaScriptCore 引擎使用 DFG JIT、LLVM 等继续对字节码做优化。

WebKit 中的 Javascript 实现在 WebKit 中其 Javascript 实现，同样相当于一个符合 ECMAScript 标准的动态库，其往往依附于浏览器引擎，由浏览器引擎来提供运行环境，并控制或发起 javascript 实现进行编译、解析执行脚本、垃圾回收等，同样需提供对浏览器引擎扩展的支持如 Dom Binding 等；

由于 Web2.0 的提出，动态网页的交互如运行 ajax 更加的频繁，Javascript 脚本运行的总体效率以及安全往往成为浏览器内核的关键，而其 Javascript 实现就担负着如此重任。

JavaScriptCore 实现特点相对于其他的 Javascript 实现，JavaScriptCore 提出了虚拟机的概念，在编译脚本时生成高效的 bytecode，bytecode 统一在一个虚拟机的环境中执行。而其高效的虚拟机实现常称为 SquirrelFish，通过 Announcing SquirrelFish、Introducing SquirrelFish Extreme 可更进一步了解关于 SquirrelFish 的相关内容。

V8 实现特点 Fast Property AccessTo reduce the time required to access JavaScript properties, V8 does not use dynamic lookup to access properties. Instead, V8 dynamically creates hidden classes behind the scenes. This basic idea is not new - the prototype-based programming language Self used maps to do something similar. (See for example, An Efficient Implementation of Self, a Dynamically-Typed Object-Oriented Language Based on Prototypes). In V8, an object changes its hidden class when a new property is added.

Dynamic Machine Code GenerationV8 compiles JavaScript source code directly into machine code when it is first executed. There are no intermediate byte codes, no interpreter. Property access is handled by inline cache code that may be patched with other machine instructions as V8 executes.

During initial execution of the code for accessing a property of a given object, V8 determines the object's current hidden class. V8 optimizes property access by predicting that this class will also be used for all future objects accessed in the same section of code and uses the information in the class to patch the inline cache code to use the hidden class. If V8 has predicted correctly the property's value is assigned (or fetched) in a single operation. If the prediction is incorrect, V8 patches the code to remove the optimisation.

Efficient Garbage CollectionV8 reclaims memory used by objects that are no longer required in a process known as garbage collection. To ensure fast object allocation, short garbage collection pauses, and no memory fragmentation V8 employs a stop-the-world, generational, accurate, garbage collector. This means that V8:

stops program execution when performing a garbage collection cycle.

processes only part of the object heap in most garbage collection cycles. This minimizes the impact of stopping the application.

always knows exactly where all objects and pointers are in memory. This avoids falsely identifying objects as pointers which can result in memory leaks.

In V8, the object heap is segmented into two parts: new space where objects are created, and old space to which objects surviving a garbage collection cycle are promoted. If an object is moved in a garbage collection cycle, V8 updates all pointers to the object.

JavaScriptCore、V8 如何与 WebCore 交互在 WebCore::Frame 的数据结构中包含数据成员 KJSProxy* m_jscript;而在 Chrome 的代码中调整为 JSBridge* m_jscript;而针对不同实现 JavaScriptCore、V8，分别有：

class KJSBridge : public JSBridge {public:KJSBridge(Frame* frame) : m_proxy(new KJSProxy(frame)) { }virtual ~KJSBridge() { delete m_proxy; }........................private:KJSProxy* m_proxy;};class V8Bridge : public JSBridge {public:explicit V8Bridge(Frame* frame);virtual ~V8Bridge();.......................private:V8Proxy* m_proxy;};V8Bridge::V8Bridge(Frame* frame) {m_proxy = new V8Proxy(frame);}V8Bridge::~V8Bridge() {delete m_proxy;}而不同的 KJSProxy 与 V8Proxy 分别对应不同的 Javascript 实现，它们分别实现了与 WebCore 之间的共同接口，其主要数据结构分别如下:

class V8Proxy {Frame* m_frame;v8::Persistentv8::context m_context;v8::Persistentv8::object m_global;// Special handling of document wrapper;v8::Persistent m_document;int m_handlerLineno;...........................};具体不同 Javascript 实现如何实现与 WebCore 的接口，需了解不同 Javascript 实现逻辑；

如对 Javascript 实现逻辑及基本原理感兴趣，可具体参考其提供的 api 及 sample 等等；

至于 Dom Binding 的实现，JavaScriptCore 与 V8 通过通过同样的方式来实现，可参考《浅谈 WebKit 之 WebCore 篇 》中所描述的 Javascript 实现如何与 WebCore 集成等；

具体 Dom Binding 的实现可参考 generate-bindings.pl 生成的代码，其中的内容一定会让你受益非浅，同时为将 Javascript 实现嵌入到其他应用中去提供非常有益的参考。如对 window 的实现，特别是 open 方法的实现，很值得研究研究。。。

初步对比 JavaScriptCore、V8、SpiderMonkey 等具体 JavaScriptCore、V8、SpiderMonkey、TracMonkey 执行效率对比如何，不同的测试方法会有不同的测试结果，在这里不再阐述。

就个人了解而言，觉得 JavaScriptCore 关于对象的方法、属性的安全访问控制方面略有欠缺；

SpiderMonkey 作为最早一批实现 Javascript 的引擎，其代码使用 C 语言来实现，稍现复杂，没有象后来的实现如 JavaScriptCore、V8 等借鉴了最新的虚拟机技术如 JVM 等；

V8 作为新近推出的 Javascript 实现，正与其特点所描述，拥有很多优势，同时基于 C++实现，充分利用了 C++ template，代码相对简洁，便于学习使用；

这方面安利下：

JS 引擎(0):JavaScript 引擎群雄演义—起底 JavaScript 引擎

JS 引擎(1):JS 引擎擂台赛，JavaScript 引擎的特征比较及术语科普

JS 引擎(2)：Java 平台上 JavaScript 引擎—Rhino/Nashorn 概述

参考文章：

JavaScriptCore/V8 篇 http://ourpgh.blogspot.com/2008/09/webkitjavascriptcorev8.html

用最简单易懂的道理告诉你，为什么 JavaScript 在现代引擎（V8，JavaScriptCore）下，能表现出卓越性能！ https://segmentfault.com/a/1190000005148418

Wiki Javascript

V8

Announcing SquirrelFish

Introducing SquirrelFish Extreme

SpiderMonkey Internals

Tamarin

转载本站文章《WebKit 三件套(2)：WebKit 之 JavaScriptCore/V8》,请注明出处：https://www.zhoulujun.cn/html/webfront/browser/webkit/2021_0421_8631.html