小程序底层原理

双线程设计

• 视图层：Webview线程管理
• 逻辑层：客户端JS解释引擎线程管理

优点

• 可以防止XSS攻击，因为逻辑层js脚本不能在视图层页面执行
• 可以防止小程序的开发者盗取用户敏感信息，例如开发者直接操作DOM拿到用户的个人信息
• 业务逻辑和页面渲染双线程互不干扰，可以提升页面性能，加快响应

通信设计

逻辑层与视图层都使用微信客户端Native直接通信，也用于与其他模块或者外部进行中转通信

1. 视图层wxml->描述虚拟DOM树的JS对象
2. 逻辑层数据变化，通过宿主环境提供的setData方法将这个变更传到Native再传到视图层
3. 视图层，差异对比后将差异应用在虚拟DOM树上，更新页面

渲染设计

两种基本渲染

Native渲染

Native 渲染是指直接使用操作系统提供的原生控件和渲染引擎来绘制用户界面。通常用于原生移动应用（如 iOS 和 Android 应用）以及一些高性能需求的小程序组件。在 iOS 中，使用 UIKit 或 Core Animation 进行渲染；在 Android 中，使用 View 或 Canvas 进行渲染。
缺陷：不能动态打包，动态下发

webview渲染

WebView 渲染是指使用嵌入在应用中的浏览器引擎来渲染 HTML、CSS 和 JavaScript 页面。这种方式通常用于混合应用（Hybrid App）和小程序的视图层。在 iOS 和 Android 中，分别使用 WKWebView 和 WebView 进行渲染。
缺陷：页面渲染和JS逻辑层共用一个线程，且只有一个WebView，可能在复杂交互页面上面临性能问题，比如逻辑任务抢占UI渲染的资源

小程序渲染

介于纯Native和纯WebApp之间，采用了Native和WebView结合的方式，既保证高效的渲染性能，又提供灵活的开发体验。

为什么说小程序是两种渲染机制结合的方式？

渲染机制大致如下：

页面结构：

小程序的每个页面在视图层中对应一个 WebView。

页面的大部分内容通过 WebView 渲染，使用 WXML 和 WXSS 定义页面结构和样式。

组件渲染：

常用的基础组件（如文本、图片、按钮等）通过 WebView 渲染。

高性能组件（如地图、视频、画布等）通过 Native 渲染，直接使用原生控件。

页面渲染过程

• 初始渲染：初始数据（data）套用到对应的WXML片段上生成节点树，随后初始数据和当前节点树会被保留，用于重渲染（减少WXML节点数量，可以降低渲染时间开销，提升性能）
• 重渲染：接收更新数据（setData）与初始数据套用WXML生成新的节点树，与原来节点树进行比较从而更新节点，最后合并setData数据与data，新节点树替代旧节点树（去掉非必要数据，减少setData数据量，可提升性能）

自定义组件渲染过程

逻辑层和渲染层都维护了虚拟DOM，逻辑层先创建虚拟DOM，随后将相关信息传递给渲染层

Shadow Tree

Web components技术：用于在web应用中创建可复用的自定义元素，重要属性是封装（隔离）

• custom elements 创建自定义标签
• shadow DOM 创建私有DOM树附加到元素上，对外隔离内部结构和样式
• HTML Templates 声明并定义可重用的HTML片段，需要通过js动态实例化和插入

1. 逻辑层新建组件：WXML和JS一起生成一个JS对象，然后JS节点部分生成虚拟DOM信息，最后通过Native通知渲染层；渲染层拿到虚拟DOM信息创建Shadow DOM，拼接Shadow Tree，注入初始数据
2. 逻辑层调用setData，更新数据到渲染层：直接在逻辑层进行DOM diff，将diff后的结果更新传给渲染层
3. 渲染层组件更新：根据diff结果更新虚拟DOM信息，更新页面

原生组件的同层渲染

原生组件脱离在Webview渲染流程外，所以原生组件的层级最高，不能通过z-index控制

同层渲染

小程序通过某种hack的方式将原生组件插入可控层级，使原生组件的层级和非原生组件一样可控，解决遮挡问题