一、小程序的页面渲染机制
微信小程序团队在进行技术选型时主要考虑了以下 3 种页面渲染方式。
(1) 如果使用纯客户端的原生技术来编码渲染，就意味着小程序要与微信本身的代码一起编译打包和发布版本，那么小程序的开发节奏就无法做到像 Web 那样快；
(2) 如果使用纯 Web 的技术来做页面渲染，那么页面的渲染和页面逻辑执行的脚本就会处于同一个线程，容易导致业务逻辑和 UI 渲染互相抢占资源，从而在一些较为复杂的页面上出现一些性能问题；
(3) 如果采用介于客户端原生技术与 Web 技术之间的渲染方式，小程序使用混合模式开发，就可以像 Web 一样支持在线快速更新，又可以跨平台，同时比 Web更接近原生体验，保持原生 App 良好的用户交互体验优势。
所以，微信小程序开发团队最终选择了第三种渲染方式，在技术上又称为 Hybrid 方式。小程序的界面主要由成熟的 Web 技术渲染，再将客户端原生能力封装成接口供开发者调用，并通过双线程模型分离界面渲染和逻辑处理，提高小程序的渲染性能和管控安全。
二、架构
为了满足上述设计理念，小程序开发团队设计了一套双线程模型，架构主要分为 3层：逻辑层（JSCore）、渲染层（WebView）和系统层（Native），如下图所示。
2.1 逻辑层
逻辑层主要进行数据请求和业务逻辑处理，通过 JS 引擎提供的沙箱环境来执行JS。与浏览器 Web 开发相比，逻辑层开发无法直接操作 DOM 和 BOM，无法使用一些浏览器暴露的接口（如跳转页面、动态执行脚本），从而提高了管控力和安全性。逻辑层主要负责将数据进行处理后再发送给渲染层，同时接收渲染层的事件反馈，对数据进行反向操作。对微信小程序来说，逻辑层就是所有 js 文件的集合。
2.2 渲染层
渲染层主要在 WebView 线程中执行界面渲染相关的任务，对于微信小程序而言，渲染层就是所有 WXML（WeiXin Mark Language）文件与 WXSS（WeiXinStyle Sheet）文件的集合。通过 Virtual DOM 减少渲染开销，提高局部更新数据和重渲染的效率，让页面更流畅。渲染层中描述语言使用的 WXML、WXSS 与Web 开发中的 HTML、CSS 类似，可以显著降低开发者的学习成本。
2.3 系统层
系统层的主要作用有 3 个：通过 JSBridge 构建 JS 和 Native 之间的通信，以便上层间接调用客户端的原生底层接口；提供网络请求、数据缓存、本地文件、媒体等基础能力；为逻辑层与渲染层的通信做中转。在双线程模型下，把界面渲染和逻辑处理分离、并行处理，可以加快渲染速度，避免单线程模型下因为 JS 运算时间过长导致的 UI 卡顿问题。并且，采用数据驱动的方式，开发者将无法直接操作 DOM，可以加强管控和安全。但是，双线程模型也意味着逻辑层与渲染层之间的通信、各层与客户端的原生交互会有一定的延时。
--------------------------------------
版权声明：本文为【PythonJsGo】博主的原创文章，转载请附上原文出处链接及本声明。
博主主页：https://my.oschina.net/u/3375733
本篇文章同步在个人公众号：
