小程序的双线程模型

小程序的双线程模型

小程序的最终呈现是WebView + 原生组件。

在一般的Web技术中，UI渲染和js的脚本执行是在单线程上执行的，这就容易导致一些逻辑任务抢占UI渲染的资源。

因此小程序的选择了Hybrid的渲染方式。而为了管控性和安全性于是又设计出了双线程。

微信官方给出的双线程模型图:

image

如上图。

小程序的渲染层和逻辑层分为2个线程管理：
渲染层：使用WebView进行渲染
逻辑层：采用JsCode线程运行js脚本

这样设计的原因是，为了防止开发者使用一些浏览器提供的，诸如跳转页面，操作DOM，动态执行脚本的开放性接口。
于是微信小程序通过提供一个沙箱环境来执行开发者们的js代码来解决。这个沙箱环境只提供纯js的解析环境，没有任何浏览器相关接口。

这就是小程序的双线程模型的由来：
逻辑层：创建一个单独的线程去执行js，在这个环境下执行的都是小程序业务相关的逻辑diamagnetic
渲染层：界面的渲染任务全都在渲染层的WebView线程里面进行，通过逻辑代码去控制渲染哪些界面。一个小程序存在多个页面，同时也存在多个WebView线程

---

双线程的通信

把开发者的js逻辑代码放到单独的线程去运行，但在WebView线程里，开发者就没法直接操作DOM。下面就介绍如何实现动态更改界面

从图中可以知道，逻辑层和渲染层的通信会由Native（微信客户端）做中转，逻辑层发送网络请求也经由Native转发。这说明可以把DOM的更新通过简单的数据通信来实现。

关于虚拟DOM的形成，大概过程：

image

用JS对象模拟DOM树。比较两颗虚拟DOM树的差异。最后把差异应用到真正的DOM树上

在双线程模型上的流程如下图:

image

1. 在渲染层把WXML转化成对应的JS对象
2. 在逻辑层发生数据变更的时候，通过宿主环境提供的setData方法把数据从逻辑传递到Native，再转发到渲染层
3. 对比前后的差异，把差异应用到原来的DOM树上，更新界面

以上，就是通过把WXML转化成数据，通过Native进行转发，来实现逻辑层和渲染层的交互和通信。这个过程基本上都是通过小程序的基础库来完成的

小程序的基础库

小程序的基础库是通过JavaScript编写的。它可以被注入到渲染层和逻辑层运行，主要应用于:

• 在渲染层，提供各类组件来组建界面的元素
• 在逻辑层，提供各类API来处理各种逻辑
• 处理数据绑定，组件系统，事件系统，通信系统等一系列框架逻辑

这个基础库它是提前内置在微信的客户端中的这样做的好处：

• 降低业务小程序的代码包的大小
• 可以单独修复基础库中Bug，无需修改到小程序的业务代码

总结

小程序的双线程模型，其实就是把逻辑层和渲染层分开，然后中间用Navite进行衔接。而这个Native的存在是为了提高小程序的监控性和安全性考虑的。

---

原文: https://www.jianshu.com/p/fb331438e223
参考: http://www.wxapp-union.com/portal.php?mod=view&aid=5647