小程序的双线程模型

谁是小程序的宿主环境呢？显而易见小程序的宿主环境是微信。

宿主环境为了执行小程序的各种文件：wxml文件、wxss文件、js文件，提供了双线模型。

wxml文件：通俗的来做这类文件是用来做布局的,类似网页开发中的html。

wxss文件：类似网页开发中的css,是用来做样式的。

js文件：是用来写很多逻辑的，可以称为逻辑层。

双线程是什么？我们来看个官方的截图：

逻辑层：创建一个单独的线程去执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码 

渲染层：界面渲染相关的任务全都在 WebView 线程里执行，通过逻辑层代码去控制渲染哪些界面。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程

界面渲染-初始化渲染

WXML可以先转成Js对象，在渲染成真正的DOM树如下图：

界面渲染过程-数据发生变化

通过setData把msg数据从“Hello Word”变成“Goodbye”为例简述。

1. 产生的js对象对应的节点就回发生变化

2. 此时可以对比前后两个JS对象得到变化的部分

3. 然后把这个差异应用到原来的Dom树上

4. 从而达到更新UI的目的，这就是“数据驱动”的原理
   

如下图所示：

界面渲染的整体流程

1. 在渲染层，宿主环境会把WXML转化成对应的JS对象；

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

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

4. 将最新变化的内容反映到真实的DOM树种，更新UI;