小程序的双线程模型

1、小程序宿主环境

微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力可以完成许多普通网页无法完成的功能。

微信客户端是小程序的宿主环境，宿主环境为了执行小程序的各种文件（wxml文件、wxss文件、js 文件）提供了小程序的双线程模型：渲染层和逻辑层。小程序的渲染层和逻辑层分别由 2 个线程管理。

2、渲染层和逻辑层

wxml 模块和 wxss 样式运行于渲染层，渲染层使用 WebView 线程渲染（一个程序有多个页面，会使用多个 WebView 的线程）。JS脚本（app.js/home.js等）运行于逻辑层，逻辑层使用 JsCore 运行 JS 脚本。这两个线程都会经由微信客户端（Native）进行中转交互。逻辑层发送网络请求也经由 微信客户端（Native） 转发。小程序的通信模型如下图所示：

3、界面渲染过程

（1）wxml 和 DOM 树：wxml 文件与 html 中的 DOM 树是一样的，这样我们就可以用 JS 来模拟一个虚拟的 DOM 树：

（2）初始化渲染：wxml 可以先转成 JS 对象，再渲染出真正的 DOM 树：

（3）界面数据发生变化：例如：通过 setData() 方法将 mustache 语法的变量 msg 数据从 "Hello World" 改成 "Goodbye"，产生的 JS 对象对应的节点就会发生变化，此时可以对比前后两个 JS 对象得到变化的部分，然后把这个差异应用到原来的 Dom 树上，从而达到更新 Ul 的目的，这就是“数据驱动”的原理。

4、界面渲染整体流程

（1）在渲染层，宿主环境会把 wxml 文件转化成对应的 JS 对象；

（2）将 JS 对象 再次转成 真实 DOM 树，交由渲染层线程渲染；

（3）数据变化时，逻辑层提供最新的变化数据，JS 对象发生变化比较 - 进行 diff 算法 对比；

（4）将最新变化的内容反映到真实的 DOM 树中，更新 UI ；