随着前端技术发展，越来越多的技术框架考虑使用 Js 脚本语言来作为实现动态化，跨平台方案的开发语言。而 Js 脚本的解析,执行的效率决定了框架的性能，所以高性能的 Js 引擎成为每个技术框架第一要面临的问题。
Webkit
聊到Js引擎必须要先讲讲一个很熟悉的名词Webkit
浏览器引擎
有些人可能认为 Webkit 就是 Js 引擎，这是一个误解，Webkit 是一个浏览器引擎，它包含 Js 引擎
webkit前身
WebKit 是一个开源的浏览器引擎，与之相对应的引擎有Gecko（Mozilla Firefox 等使用），Trident（也称MSHTML，IE 使用）和EdgeHTML（也称Chakra，Edge和其他UWP浏览器使用）。
WebKit 前身是 KDE 小组的 KHTML，WebKit 所包含的 WebCore 排版引擎和 JSCore 引擎来自于 KDE 的 KHTML 和 KJS，当年苹果比较了 Gecko 和 KHTML 后，仍然选择了后者，就因为它拥有清晰的源码结构、极快的渲染速度。Apple将 KHTML 发扬光大，推出了装备 KHTML 改进型 WebKit 引擎的浏览器 Safari。
webkit架构
webkit-struct.png
WebCore 包含了了目前被 各个浏览器所使用的 WebKit 共享部分，这些都是加载和渲染网页的基础部分，它们必不可少，包括 HTML (解释器)、CSS (解释器)、SVG、DOM、渲染树（RenderObject 树和RenderLayer 树等)，以及 Inspector(Web Inspector和调试网页)。这些共享部分有些是基础框架，其背后支持也需要各个平台的不同实现。
JavaScriptCore 引擎是 WebKit 中默认 JavaScript 引擎，也就是说一些 WebKit 的移植使用该引擎。而且它只是默认，并不是唯一的，是可以替换的。事实上，WebKit 中对 JavaScript 引擎的调用是独立于引擎的。在 Google 的 Chormium 开源项目中，它被替换成 V8 引擎。
具体可以参考这篇文章https://www.jianshu.com/p/ceed556962bd
V8
Js引擎
image.png
V8 是 Google 为 Google Chrome 开发的 JavaScript 引擎，高效的性能使V8在众多的Js引擎中脱颖而出。V8使用C++编写可以运行于Windows 7+，macOS 10.12+，Linux 系统 x64, IA-32, ARM, 和 MIPS处理器的系统上。 由于V8在Chrome设计中是一个独立的模块，所以可以轻松的移植到不同的C++应用中。
GC
V8 高性能有一部分是由于它优秀的垃圾回收设计。V8可以动态的编译执行JavaScript代码，自动管理和回收对象的内存，新老内存的设计，能快速，精准的垃圾回收。
架构图
v8-gc.jpg
Handle
handle 是指向对象的指针，在 V8 中，所有的对象都通过 handle 来引用，handle 主要用于 V8 的垃圾回收机制。
在 V8 中，handle 分为两种：持久化 (Persistent)handle 和本地 (Local)handle，持久化 handle 存放在堆上，而本地 handle 存放在栈上。这个与 C/C++ 中的堆和栈的意义相同 ( 简而言之，堆上的空间需要开发人员自己申请，使用完成之后显式的释放；而栈上的为自动变量，在退出函数 / 方法之后自动被释放 )。持久化 handle 与本地 handle 都是 Handle 的子类。在 V8 中，所有数据访问均需要通过 handle。需要注意的是，使用持久化 handle 之后，需要显式的调用 Dispose() 来通知垃圾回收机制。
Scope
scope 是 handle 的集合，可以包含若干个 handle，这样就无需将每个 handle 逐次释放，而是直接释放整个 scope。
在使用本地 handle 时，需要声明一个 HandleScope 的实例，scope 是 handle 的容器，使用 scope，则无需依次释放 handle。
Context
context 是一个执行器环境，使用 context 可以将相互分离的 JavaScript 脚本在同一个 V8 实例中运行，而互不干涉。在运行 JavaScript 脚本是，需要显式的指定 context 对象。
模板 (Template) 类
对象模板 (ObjectTempalte)
通过对象模板注入Js对象
static type xxx;
static Handle<Value> xxxGetter(Local<String> name, constAccessorInfo& info){
//code about get xxx
}
static void xxxSetter(Local<String> name, Local<Value> value, const AccessorInfo& info){
//code about set xxx
}
Handle<ObjectTemplate> global = ObjectTemplate::New();
global->SetAccessor(String::New("xxx"), xxxGetter, xxxSetter);
函数模板 (FunctionTemplate)
通过函数模板绑定Js回调
Handle<Value> function(constArguments& args){
//return something
}
global->Set(String::New("function"),FunctionTemplate::New(function));
Script类
动态编译执行Script脚本
Handle<Script> script = Script::Compile(source);
Handle <Value> result = script->Run(); // 执行脚本，获取结果
数据模型
v8-bean.png
V8-API
v8-api.png
参考文档
- v8官网 ：https://v8.dev/docs
- v8github：https://github.com/v8/v8
- v8API：https://v8docs.nodesource.com/
网友评论