# 2.小程序的底层架构

# 小程序的渲染层和逻辑层

小程序的运行环境分成渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。

小程序的渲染层逻辑层分别由 2 个线程管理: 渲染层的界面使用了 WebView 进行渲染,一个小程序存在多个界面,所以渲染层存在多个 WebView 线程; 逻辑层采用 JsCore 线程运行 JS 脚本。 两个线程通信经由微信客户端( Native )做中转,逻辑层发送网络请求也经由 Native 转发。

# 小程序渲染流程

img

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