要不要打造一个轻量的小程序引擎玩玩？

多线程模型是一个非常常见的 UI 模型，包括 RN、flutter 统统都是使用的这个模型，小程序也不例外

它们其实只是线程主体的不同，比如 RN 主要是 shadow tree 和 jscore，而 flutter 则是 skia 和 dart engine，小程序则是 webview 充当渲染层，js engine（或 worker）充当逻辑层

尽管本质一样，但因为业务场景的不同，小程序的诉求却和 RN/flutter 完全不同

在 RN 中，app 作为一个主体，我们更乐意分配更多资源，以至于 RN 一直在跑 react 这种 runtime 浪费的框架，在过去，这被认为是值得的

但是小程序与之相反，它作为 app 的附属品，我们不乐意给小程序分配更多资源，不乐意分配内存，不乐意分配更多线程，所以我们这次分享的前提是

说到多线程，我们首先想到的就是多线程的调度和通信，我们先讲通信，通常来说，多线程的非 UI 线程都是没有 dom 环境的，无论是 js 引擎还是 worker

所以为了能跑一个前端框架，我们不得另寻出路，主要方案有三种，其中幻灯片的第二种，写一个 dom 无关的 diff 算法，这是写不出来什么好算法的，所以我们主要看剩下两种思路

幻灯片中，左边的代码是 [ 使用 Proxy 劫持 dom ]，右边的是 [ 模拟 dom API ]

这两种思路其实是类似的，模拟 dom API 是最为常见的，比如 react-reconciler，vue3 的 renderer，都是用的这个思路，就是它把用到的 dom API 暴露出来，你在不同的端去模拟 dom 的行为

甚至还有 taro-next，kbone 这种框架，他们模拟了一整个 dom/bom 层

这个思路好处是粗暴方便好用，坏处就是抽象程度低，比如 taro-next 中就用了千行代码做这件事，属于 case by case，没啥逼格

所以我提出了 Proxy 劫持 dom 的思路，其实这个思路在微前端中比较常用，只不过我们现在用 Proxy 不再是劫持一两个 dom 操作了，而是将所有 dom 操作通通记录下来，然后批量发送给 UI 线程

这个实现抽象程度非常高，我使用了不到 200 行代码就可以劫持所有 dom 操作

代码在这里：github.com/yisar/fard/…

除了线程通信，更重要的是线程的调度，因为很重要，我们放到最后说

还记得小程序架构的前提吗？没错，就是最小资源分配

因为我们不想给小程序分配过多的资源，所以像 react、vue 这种 runtime 特别重的框架，其实是不适合用作小程序的

甚至 fre 也不适合，因为大家可能对“轻量”这个词有误解，不是代码越少就越轻量，代码量是很重要的一个方面，但是更重要的是代码的内存占用，以及算法的算力和复杂度

fre 虽然代码量少，但它的算法和 vue 是一样的，算力相同，内存占用也不少

所以我们不得不将目光转向 svelte 这类框架，幻灯片可以看到，svelte 通过编译，直接生成原生 dom 操作，没有多余的算法和 vdom

实际上，我们在做性能优化的时候，讲究一个“换”字，react 这种框架，通过浪费 runtime 去做算法，“换”一个最小结果，而 svelte 则是通过编译（浪费用户电脑），去换 runtime

实际上，AOT 的语言或引擎更适合 UI 框架，比如 RN 的 hermes，dart 也支持 AOT，它可以编译成字节码，只需要一次构建即可，当然，AOT 也有缺点，就是 热更新 比较难做

另外除了 js 引擎，worker 也是一个非常赞的选择，方便好用，而且还提供了 bom 接口，比如 offscreen canvas，fetch，indexdb，requestAnimationFrame……

总结