小程序的双线程模型

宿主环境

小程序的宿主环境是谁？很显然，小程序的宿主环境是微信客户端

宿主环境有什么作用呢？
我们可以在宿主环境上执行小程序的各种文件：wxml 、wxss 、js ，除此之外，宿主环境还为我们提供了小程序的双线程模型

不了解宿主环境可以点传送门

双线程模型

1.WXML 模块和 WXSS 样式运行于渲染层，渲染层使用 WebView 线程进行渲染；因为一个小程序往往不只有一个页面，一个小程序通常会有多个页面，所以就会使用多个 WebView 的线程（也就是上图所示的那样）
2. js 脚本（app.js/home.js等运行于逻辑层，逻辑层使用 JsCore 运行js 脚本
3. 这两个线程都会经由微信客户端（Native）进行中转交互，从而渲染出我们看到的界面

界面的渲染过程

首先，我们需要知道，wxml 可以等价于一棵 DOM 树，另外也可以使用一个 js 对象来模拟 DOM 树，简称虚拟 DOM

所以说，我们可以先让 WXML 转换成 js 对象，然后再将其渲染成真正的 DOM 树

当要渲染的数据要发生变化时，小程序会产生一个新的 js对象，然后再将这两个 js 对象通过 diff算法 进行对比，找到有差异的地方，然后把这个差异应用到原来的 DOM 树上，从而达到更新界面的目的，这个也是“数据驱动”的原理

总结：界面渲染整体流

1.在渲染层，宿主环境会把 WXML 转化成对应的j s 对象；
2.将 js 对象再次转成真实 DOM 树，交由渲染层线程渲染；
3.数据变化时，逻辑层提供最新的变化数据，js 对象发生变化比较进行 diff 算法对比；
4.将最新变化的内容反映到真实的 DOM 树中，更新界面；

参考：diff算法
链接一
链接二