机器指令翻译成 JavaScript —— 终极目标

上一篇,我们顺利将 6502 指令翻译成 C 代码,并演示了一个案例。

现在,我们来完成最后的目标 —— 转换成 JavaScript。

中间码输出

我们之所以选择 C,就是为了使用 LLVM。现在来看看,生成的 LLVM 中间表示:

不难看出,顺序执行的逻辑都在一个 label 中,跳转则用 br 符号。

这种风格,和我们之前讨论的指令切割非常相似。一个 label 块,正好翻译成一个 block_xxx 的 JS 函数。

所以,理论上翻译成 JS 并不困难,写一个 LLVM backend 插件即可。

现有工具

不过,实际操作起来还是挺麻烦的。

LLVM 中间码和汇编差不多,一步一个操作。如果直接翻译,生成的 JS 会很累赘,类似这样:

$301 = MEM[16];
$302 = $301 + 10;
$303 = ($302 == 0);
if ($303) {
    ...
}

如果能将多步操作合并成一行 JS,则会简洁得多。另外,变量名分配和重用,也是比较麻烦的。

事实上 LLVM 输出成 JS,前辈们早就尝试过了。例如 emscripten,目前已非常成熟。所以,我们不如就用现成的工具吧。

emscripten 是如何处理流程及跳转的?其实和我们之前讨论的切割类似,也是用额外的变量模拟流程。只不过它是用数字变量,而不是函数变量。

例如这样的流程:

a:  xx 1
    goto c
b:  xx 2
    goto a
c:  xx 3
    goto b

生成的 JS 类似这样:

while (1) {
    switch (label) {
    case 1:
        xx 1
        label = 3; continue;
    case 2:
        xx 2
        label = 1; continue;
    case 3:
        xx 3
        label = 2; continue;
    }
}

使用数字,就可以在同个 function 里控制流程,因此更合理一些。

但如果流程复杂,则会陷入众多的判断。哪个方案更好,还得看浏览器的实际优化能力。

线程模型

既然要在浏览器中运行,当然就不能用 sleep 了,取而代之的是 yield。

但 emscripten 生成的代码,显然是不会有 yield 的。因此,我们得手动实现上下文的切换。

我们在切出前,记住当前的流程位置,然后 return;下次调用时,根据上一次的流程位置,跳转到相应的地方继续执行(用上一篇提到的动态表)。

这样,就符合浏览器的线程模型了。

接口交互

之前为了演示,使用新线程 + getchar() 来接受输入,这显然不符合浏览器的模型。

我们得监听键盘事件,在回调中更新相应的内存数据。

不过,emscripten 内置了 SDL 框架(类似于 DirectX),它封装了各种事件处理、图形渲染、音频播放等,非常实用。

SDL 会把消息记录在自己的队列里。任何时候,我们可以通过 Poll 的方式去拉取。这样就避免了回调,也不会有阻塞。

因此最终的模型,就类似这样:

void render() {
    cycle_remain = N;

    input();        // 获取输入
    update();       // 指令逻辑(执行到 cycle_remain <= 0)
    output();       // 屏幕输出
}

// 通过浏览器的 rAF 接口实现
emscripten_set_main_loop(render);

具体可以参考:这个文件

最终结果

我们将上一篇的「贪吃蛇」编译成 JavaScript,在浏览器中运行:

在线演示 (ASDW 控制方向)

由于 emscripten 打包了一些 C 运行时、辅助函数、SDL 框架等各种程序,所以生成的脚本很大,超过 200 KB。事实上 6502 指令对应的 JS 并不多,可以参考下面链接。

回顾下整个翻译过程:

机器码 --> (现有工具) --> 汇编码 --> (小脚本) --> C 代码 --> (emscripten) --> JS 代码

虽然这种方式不是最完美的,但实现起来很简单。

当然,我们的目标并非为了实现 6502 指令,只是借此学习一下「程序流程」相关的知识,以及探索一些开脑洞的想法。

posted @ 2016-07-10 16:19  EtherDream  阅读(1523)  评论(1编辑  收藏  举报