双线程前端框架：Voe.js

看一眼 API，乍一看仿佛和 fard 类似的 API，仿佛又写了个跨端小程序框架？

然而并不是……

voe 是一个底层小程序框架

意思是它实现了小程序的双线程，利用“沙箱” 隔离 web 环境，屏蔽 dom 能力

接下来结合 微信小程序 介绍一下主要思路：

目标

绝对的控制力，意思是用户不能操作 dom，不能使用 web API，不能使用完整的 jsx 和 html，不能……反正就是啥都不能！

就好像 sm 角色一样，s 对 m 的绝对控制与虐待，m 只能服从命令与受虐

所以我把小程序的双线程架构又称为 【主奴架构】

沙箱

小程序中不能操作 dom，不是因为它屏蔽了 dom API 或者屏蔽了事件，这样做是不切实际的

大家都是寻找一个非 dom 环境作为沙箱，比如 v8，比如 worker，比如 native，比如 wasm

以上都是 OK 的，我猜微信小程序等也是用的类似的沙箱

voe 使用 web worker 作为沙箱

为什么不使用 v8 或 native？

这就是纯粹的个人选择了，不选择 v8 或 native 应该是，但是偏偏我个人更偏前一点，web worker 的计算力默认是优于 v8 或 native 的（同等硬件水平），但是 v8 也有好处，比如 node 可以使用 cookie，然后拥有一些先进的 API

将框架拆到两个不同的线程中

重点来了，两个线程中，如何安排框架工作呢？

有几个原则：

1. 用户逻辑必须跑在 worker 中，完全不让碰 主线程
2. 计算力的逻辑尽可能多的放到 worker 中

于是乎，就变成下面这个样子：

然后，困难如约而至，沙箱与主线程之间的鸿沟来自 dom 元素和 事件函数，这两者无法传递

我绞尽脑汁，想了一个完全之策

将不能传递的东西保存到自己线程中并建立映射，将索引传到另一个线程

比如，事件是这样传递的：

let handlers = new WeakSet()
 if (props) {
 for (const k in props) {
 if (k[0] === 'o' && k[1] === 'n') {
 let e = props[k]
 let id = handlers.size + 1
 handlers.set({ id: e })
 props[k] = id 
 }
 }
 }

将事件放到 map 中存起来，然后将 id 传给主线程，主线程事件触发的时候，将 id 和 event 参数交还给 worker

for (const k in props) {
 if (k[0] === 'o' && k[1] === 'n') {
 let id = props[k]
 props[k] = event => {
 // 不能传太多，此处省略对事件的简化操作
 worker.postMessage({
 type: EVENT,
 event,
 id
 })
 }
 }
}

然后在 worker 中，根据索引映射，找到对应的事件并触发

是的没错就是这样，这个方法是万能的，比如我们的 diff 方法

既然 diff 无法将 dom 传出去，那么我们就传 dom 的 index

if (oldVNode ==null||oldVNode.type!==newVNode.type) { 
 parent.insertBefore(createNode(newVNode), node)
}

比如这个方法，parent 和 node 都是 dom 元素，是没办法传递的，我们就……传他们的索引，may be 长这样：

[ [0,'insertBefore',1] ]

dom 是这样的：

<div id="root" index="0">
 <ul index="1">
 <li index="2" />
 <li index="3" />
 </ul>
</div>

如果此时我们要删除 index 为 3 的节点，那对应生成的结构，应该是这样：

[ [1,'removeChild',3] ]

刺不刺激，我们成功找到了一个思路，能够实现不同的 diff 算法啦

要知道，微信小程序就没有找到类似的思路，他们的 diff 还是 virtual-dom 的那套古老的深度遍历，代码多性能差……

综上所述，上面介绍了双线程的主要思路，这些思路不仅仅适用于这个框架，同样适用于其他跨端的场景

vue 3

这里简单说一下 vue 3，嗯大家看到，voe 的名字和 API 神似 vue 3，事实上我确实将 vue 3 的核心抄过来了，包括依赖收集，响应式，状态更新，组合函数……

这只是顺手的事儿，其实比起 voe 的核心思路，API 是没什么所谓的

因为几乎所有的公司，如果想要搞自己的小程序，都只能过来参考思路，然后 API 很可能就和微信保持一致了

所以我觉得 vue 3 的 API 足够简单，正好可以弱化 API

就抄过来了……

大家可以可以将 voe 作为 vue 3 的最小实现，用于协助阅读源码也是很 OK 的哈！

双线程 vs 异步渲染

题外话，大家应该都知道我之前写的框架 fre.js，也应该对 concurrent（时间切片）、suspense 等异步渲染的机制有所了解

如今我又来搞 web worker，是因为它俩的思路是类似的，场景也是一样的

1. 时间切片是利用宏任务，将 diff 等低优先级任务后放到宏任务队列中，从而模拟了双线程，不阻断 UI
2. 双线程是利用 web worker，将 diff 等高计算力的任务放到 worker 中，从而不阻断主线程 UI 渲染

两者的场景同样都是可视化，高帧率动画，大量数据与计算……

可惜本身这种场景需求实在太少了，所以 preact 和 vue 团队纷纷发声，表示不想搞也不需要搞::>_<::

但是到我这来说的话，其实我不在意框架有没有人用，也不在于业务的，我更加倾向于一种技术创新，所以从这个方面，只要是新的思路，总归有它的价值

总结

呼~终于写完了，在掘金发文，必须要长啊

最后放上 voe 的 github：

github.com/132yse/voe

作者：132

链接：https://juejin.im/post/5dd1edf3e51d4561ea3fb3cd