2024年最全跨平台Web Canvas渲染引擎架构的设计与思考(内含实现方案)，冲刺7天拿下Offer

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

// do not affect each other.

v8::Persistentv8::Context context =

v8::Context::New(isolate, nullptr, global);

以小程序环境为例，小程序容器初始化时，会分别创建Render和Worker，Render负责界面渲染，Worker负责执行业务逻辑，拥有独立JSContext，Canvas提供了createCanvas()和createOffscreenCanvas() 全局函数需要绑定到该JSContext的GlobalObject上，因此Worker需要有一个时机通知canvas注入API，从小程序视角来看，Worker依赖Canvas显然不合理，因此小程序提供了插件机制，每个插件都是一个动态库，Canvas作为插件先注册到Worker，随后Worker创建之后会扫描一遍插件，依次dlopen每个插件并执行插件的初始化函数，将JSContext作为参数传给插件，这样插件就可以向JSContext中绑定API了。

关于JSEngine和Binding有两个需要注意的点(以V8为例):

• 关于线程安全。JSContext通常设计为非线程安全的，需要注意不要在非JS线程中访问JS资源。其次，在V8中一个线程可能有多个JSContext，需要使用v8::Context::Scope切换正确的JSContext；

• 关于Binding对象的生命周期。众所周知，C与JS语言内存管理方式不一样，C需要开发者手动管理内存，JS由虚拟机管理。对于C++ Binding的JS对象的生命周期理论上需要跟普通JS对象一致，因此需要有一种机制，当JS对象被GC回收时，需要通知到C++ Binding对象，以便执行相应的析构函数释放内存。事实上，JS引擎通常会提供让一个JS对象脱离/回归GC管理的机制，且JS对象的生命周期均有钩子函数可以进行监听。V8中有Handle(句柄)的概念，Handle分为LocalHandle、PersistentHandle、Weak PersistentHandle。LocalHandle在栈上分配，由HandleScope控制其作用域，超出作用域即被标记为可释放，PersistentHandle在堆上分配，生命周期长，通常需要开发者显式通过PersistentHandle#Reset的方式释放对象。通过SetWeak函数可以让一个PersistentHandle转为一个Weak PersistentHandle，当没有其他引用指向Weak句柄时就会触发回调，开发者可以在回调中释放内存。

最后再讨论下Binding代码如何跨JSEngine的问题。

当前主流的JSEngine有V8、JavaScriptCore、QuickJS等，如果需要更换JSEngine的话，Binding代码需要重写，成本有点高(Canvas接口非常多)，因此理论上可以再封装一个抽象层，屏蔽不同引擎的差异，对外提供一致接口，基于抽象层编写一次Binding代码，就可以适配到多个JSEngine(使用IDL生成代码是另外一条路)，目前我们使用了UC团队提供的JSI SDK适配多JS引擎。

平台窗体抽象层设计

要想做到跨平台，就需要设计一个抽象的平台胶水层，胶水层的职责是对下屏蔽各个平台间的实现差异，对上为Canvas提供统一的接口操作Surface，封装MakeCurrent、SwapBuffer等行为。实现上可以借鉴Flutter Engine，Flutter Engine的Shell模块对GL胶水层做了较好的封装，可以无缝接入到Android、iOS等主流平台，扩展到新平台比如鸿蒙OS也不在话下。