使用 WebAssembly 打造定制 JS Runtime

710次阅读  |  发布于2年以前

背景

这是一次简短的整活与折腾,起因是在 lightdm-webkit2-greeter 这个 lightdm 插件中看到了自定义 JS Runtime的魔力,它支持在显示管理器中使用 web 技术去自定义登录界面,与操作系统的交互是通过 Runtime 中的一组 JS API来实现登录、关机、睡眠等功能。

https://doclets.io/Antergos/web-greeter/stable

把 webkit 搬过来渲染系统界面,然后通过定制的 JS Runtime 与操作系统交互,相当于对浏览器本身进行了改造,关键的实现点是把系统调用封装成了Native函数,并在JS Runtime中进行绑定,以实现浏览器界面控制操作系统。

这种方式和 Electron 的本质区别在于,无需让浏览器与另外一个进程通信,它直接拓展了 JS 的运行时环境,与 Node 的做法十分相像,不过这次我们越过中间商赚差价,自己实现 Runtime ,可以做的更小巧和定制化。

image.png 思考

直接在浏览器上去定制 Runtime 这个想法确实很酷,但显然难度属于地狱级,这相当于我们直接去爆改 V8、JavaScriptCore 这种成熟稳定又复杂的JS引擎来是实现 JS API层面的嵌入和拓展,但 JS 引擎并不只是浏览器独有,真要改的话,可以找一个轻量、好改、好移植的。

很好,但是OS binding怎么办?总不能直接把浏览器里的JS引擎整个替换成这个不复杂,又好改,又好移植的吧?确实这里是一个坎,卡在这,活就整下去了,暂且先不做 OS binding,改做 Web binding,让Web Assembly来跑 Runtime,然后在 Runtime 里再跑JS,有点套娃了,但它依旧有一些应用的场景。

DEMO

起一个 JS 引擎

这里选择了 Figma 曾经的方案 - Duktape

简单写一个函数,来实现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

/* 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;
}
duk_push_c_function(ctx, native_print, DUK_VARARGS);
duk_put_global_string(ctx, "print");

至此,我们实现了一个基本的JS引擎,它可以完成 ES5 代码的解析和执行,我们在全局对象上注入了一个 print 方法,它是一个 Native的实现,通过引擎内部的堆栈与 JS 交互,最后 使用Duktape提供的注册方式暴露到 JS Runtime中

编译成 WASM

这里编译器的实现选用 emscripten,用它直接生成相应的 WebAssembly 文件和相应的 JS 胶水代码。


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']
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

看一下 WASM 体积,胶水代码+ WASM本体不 600KB 出头,基本在一张大图的范围内,可以接受

借助这两个项目,至此我们完成了一整个 JS Runtime 定制的流程,目前看起来它完全是可用的:

应用场景

参考

参考资料

[1]Duktape: https://duktape.org/index.html

[2]Main — Emscripten 3.1.21-git (dev) documentation: https://emscripten.org/

[3]How to build a plugin system on the web and also sleep well at night: https://www.figma.com/blog/how-we-built-the-figma-plugin-system/

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8