使用 WebAssembly 打造定制 JS Runtime
大 厂 技 术 坚 持 周 更 精 选 好 文
本文为来自 教育-成人与创新-前端团队 成员的文章,已授权 ELab 发布。
背景
这是一次简短的整活与折腾,起因是在 lightdm-webkit2-greeter 这个 lightdm 插件中看到了自定义 JS Runtime的魔力,它支持在显示管理器中使用 web 技术去自定义登录界面,与操作系统的交互是通过 Runtime 中的一组 JS API来实现登录、关机、睡眠等功能。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bdc2acb1f222b08334dc131d911666be2caf31917985be7669dfd7a5bdc1c2332.jpg)
http://doclets.io/Antergos/web-greeter/stable
把 webkit 搬过来渲染系统界面,然后通过定制的 JS Runtime 与操作系统交互,相当于对浏览器本身进行了改造,关键的实现点是把系统调用封装成了Native函数,并在JS Runtime中进行绑定,以实现浏览器界面控制操作系统。
这种方式和 Electron 的本质区别在于,无需让浏览器与另外一个进程通信,它直接拓展了 JS 的运行时环境,与 Node 的做法十分相像,不过这次我们越过中间商赚差价,自己实现 Runtime ,可以做的更小巧和定制化。
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b944ca593c7ef2923e44f6d3d601e1086c6aef32fcc0a73a169fb6127f2d1b6d5.jpg)
思考
直接在浏览器上去定制 Runtime 这个想法确实很酷,但显然难度属于地狱级,这相当于我们直接去爆改 V8、JavaScriptCore 这种成熟稳定又复杂的JS引擎来是实现 JS API层面的嵌入和拓展,但 JS 引擎并不只是浏览器独有,真要改的话,可以找一个轻量、好改、好移植的。
很好,但是OS binding怎么办?总不能直接把浏览器里的JS引擎整个替换成这个不复杂,又好改,又好移植的吧?确实这里是一个坎,卡在这,活就整下去了,暂且先不做 OS binding,改做 Web binding,让Web Assembly来跑 Runtime,然后在 Runtime 里再跑JS,有点套娃了,但它依旧有一些应用的场景。
DEMO
起一个 JS 引擎
-
要方便移植,要好改,方便我们快速的定制
-
Native 与 JS 的交互足够简单(包括数据类型的转换,通信的实现,事件循环等)
-
因为是编译到 WebAssembly 在 Web上跑,所以传输体积越小越好,同时运行时内存占用也最好不要太大。
这里选择了 Figma 曾经的方案 - Duktape
-
duktape.c duktape.h duk_config.h
-
完整的 ES5 支持
-
支持垃圾回收
-
字节码缓存
-
支持调试功能
简单写一个函数,来实现JS的执行
extern "C" char* runScript(char* script){
duk_context *ctx = duk_create_heap_default();
duk_eval_string(ctx, script);
duk_pop(ctx); /* pop eval result */
duk_destroy_heap(ctx);
return "ok";
}
拓展一些 Runtime API
-
IO 功能实现
/* Being an embeddable engine, Duktape doesn't provide I/O
* bindings by default. Here's a simple one argument print()
* function.
*/
static duk_ret_t native_print(duk_context *ctx) {
duk_push_string(ctx, " ");
duk_insert(ctx, 0);
duk_join(ctx, duk_get_top(ctx) - 1);
printf("%s\n", duk_safe_to_string(ctx, -1));
return 0;
}
-
绑定到 Runtime
duk_push_c_function(ctx, native_print, DUK_VARARGS);
duk_put_global_string(ctx, "print");
-
这里涉及到一些堆栈的基本概念,本文不做赘述,它在 Duktape 中的实现模型如下图所示
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bd8b4cd97483a2fdb6020420491e2ae811a4a634ba4976fee37c3968075314810.jpg)
至此,我们实现了一个基本的JS引擎,它可以完成 ES5 代码的解析和执行,我们在全局对象上注入了一个 print 方法,它是一个 Native的实现,通过引擎内部的堆栈与 JS 交互,最后 使用Duktape提供的注册方式暴露到 JS Runtime中
编译成 WASM
这里编译器的实现选用 emscripten,用它直接生成相应的 WebAssembly 文件和相应的 JS 胶水代码。
-
把刚刚实现的 JS 执行函数暴露到 宿主环境中(另一个JS Runtime)
int main() {
EM_ASM("console.log('wasm js runtime is ready!')");
EM_ASM("window.runScript = Module.cwrap('runScript', 'string', ['string'])");
return 0;
}
-
在编译的时候,指定导出函数
CCOPTS += -s EXPORTED_FUNCTIONS=['_runScript','_main']
-
完整的Makefile 如下
DUKTAPE_SOURCES = ./engine/duktape.c
CC = emcc
CCOPTS = -s DISABLE_EXCEPTION_CATCHING=0 -s ALLOW_MEMORY_GROWTH=1 -O3 --bind
CCOPTS += -s EXPORTED_RUNTIME_METHODS=["cwrap"]
CCOPTS += -s EXPORTED_FUNCTIONS=['_runScript','_main']
CCOPTS += -I./engine # for combined sources
DEFINES =
BUILD = wasm/index.html
all: $(DUKTAPE_SOURCES) main.cpp
${CC} $(CFLAGS) $(CPPFLAGS) ${LDFLAGS} -o ${BUILD} ${DEFINES} ${CCOPTS} ${DUKTAPE_SOURCES} main.cpp ${CCLIBS}
run:
cd wasm && python3 -m http.server 8080
简单测试
make
make run
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b4c5d1813f48e46ffea2fc5734917869e2b41cd3286a44176dbc2ce08bdf640ad.jpg)
看一下 WASM 体积,胶水代码+ WASM本体不 600KB 出头,基本在一张大图的范围内,可以接受
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393a25590d9dec4c0c8da0c89a86965041a8e79fd42e052e446b267dbf68910b40d.jpg)
借助这两个项目,至此我们完成了一整个 JS Runtime 定制的流程,目前看起来它完全是可用的:
-
它足够小巧,随取随用
-
它与宿主 JS Runtime 完全隔离,足够安全
-
WASM 实现相对来说在Web上是性能较好的,不会影响浏览器中JS线程
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bc8ee1ffc1709c776e217da49e8637530545579ef8e0f688fbc30953b516dccbc.jpg)
应用场景
-
JS 沙箱
-
打造插件系统
-
把WASM 产物一移植到 WASI 以实现真正的 OS Binding
参考
-
Duktape [1]
-
Main — Emscripten 3.1.21-git (dev) documentation [2]
-
How to build a plugin system on the web and also sleep well at night [3]
参考资料
Duktape: http://duktape.org/index.html
Main — Emscripten 3.1.21-git (dev) documentation: http://emscripten.org/
How to build a plugin system on the web and also sleep well at night: http://www.figma.com/blog/how-we-built-the-figma-plugin-system/
- END -
:heart: 谢谢支持
以上便是本次分享的全部内容,希望对你有所帮助^_^
喜欢的话别忘了 分享、点赞、收藏 三连哦~。
欢迎关注公众号 ELab团队 收货大厂一手好文章
字节 跳 动 校 / 社 招 内 推 码 : YCE7SSZ
投 递 链 接 : http://job.toutiao.com/s/6QatD8H
- 使用 WebAssembly 打造定制 JS Runtime
- 前端也要懂算法,不会算法也能微调一个 NLP 预训练模型
- 联机游戏原理入门即入土 -- 入门篇
- Plasmo Framework:次世代的浏览器插件开发框架
- 深入理解 Mocha 测试框架:从零实现一个 Mocha
- Single Source of Truth:XCode SwiftUI 的界面编辑的设计理念
- 深入理解 D3.js 可视化库之力导向图原理与实现
- 浅析神经网络 Neural Networks
- Cutter - Web视频剪辑工具原理浅析
- 你可能需要一个四舍五入的工具函数
- 浅析eslint原理
- 最小编译器the-super-tiny-compiler
- Git存储原理及部分实现
- 浅谈短链的设计
- Web组件构建库-Lit
- 使用Svelte开发Chrome Extension
- Web3.0开发入门
- vscode插件原理浅析与实战
- 深入浅出 Web Audio API
- 探秘HTTPS