小程序底层原理——双线程

[mtonhuang]

何为双线程

小程序的渲染方式为Hybrid，基于双线程模型，运行环境分为渲染层和逻辑层，分别由2个线程管理：渲染层使用我们熟知的Webview渲染，逻辑层采用了JsCore线程运行JS脚本。
那么何为渲染层，何为逻辑层呢？

• 渲染层： 小程序页面相关的任务都在Webview线程里执行，通过逻辑层控制渲染，意味着一个小程序可以有多个Webview线程
• 逻辑层： 创建一个单独的线程执行JS代码

我们可以用一张图来看（字丑）：

基于双线程的数据驱动

我们了解了何为渲染层以及逻辑层，那么问题就来了：既然我们写的JS逻辑代码都被放到了单独的逻辑层去控制运行了，那么我们怎么操作DOM呢？怎么去动态地改变页面数据呢？
小程序是这样做的：

• 把WXML看做一个DOM树，转化为JS对象
• 与逻辑层通信，如果有数据变更，通过宿主环境提供的setData方法经过native把数据传递到渲染层
• 对比前后两个JS对象，把差异应用到原来的DOM数上，从而达到更新UI，即数据通信
  简单看：WXML => 模拟为DOM树 => 对比前后两个模拟DOM树的差异 => 将差异应用到真正的DOM数上

如图：