⚡ 30 秒速记
- 逻辑层与视图层分工,不能按普通网页直接操作节点
setData传必要变化,避免高频整量同步- 登录凭据在服务端交换,客户端只拿业务会话
- 属性与事件定义组件通信边界
- 真机验证渲染器、宿主版本和通信成本
小程序开发要把业务计算和界面更新之间的通信成本算进去。 在常见逻辑层与视图层分离的架构里,页面状态通过框架接口同步,不能像网页那样直接操作文档节点。频繁传大对象会增加传输与渲染压力,尽量只提交需要显示的变化。登录交换放在服务端,组件用明确的属性和事件协作,并在目标真机和渲染环境里验证行为。
版本校准: 原理文章中的代码代表特定实现与写作时间。应用到当前项目时,应先确认浏览器、框架或工具的主版本,再区分稳定的规范语义、可变化的内部实现和项目自身约束。
# 一、双线程模型
# 渲染线程和逻辑线程
小程序的双线程指的就是渲染线程和逻辑线程,这两个线程分别承担UI的渲染和执行 JavaScript 代码的工作

渲染线程使用 Webview 进行 UI 的渲染呈现。Webview 是一个完整的类浏览器运行环境,本身具备运行 JavaScript 的能力,但是小程序并不是将逻辑脚本放到 Webview 中运行,而是将逻辑层独立为一个与 Webview 平行的线程,使用客户端提供的 JavaScript 引擎运行代码,iOS 的JavaScriptCore、安卓是腾讯 X5 内核提供的 JsCore 环境以及 IDE 工具的 nwjs
并且逻辑线程是一个只能够运行 JavaScript 的沙箱环境,不提供 DOM 操作相关的 API,所以不能直接操作 UI,只能够通过 setData 更新数据的方式异步更新 UI
# 事件驱动的通信方式
你要注意上图渲染线程和逻辑线程之间的通信方式,与 Vue/React 不同的是,小程序的渲染层与逻辑层之间的通信并不是在两者之间直接传递数据或事件,而是由 Native 作为中间媒介进行转发。
整个过程是典型的事件驱动模式:
- 渲染层(也可以称为视图层)通过与用户的交互触发特定的事件 event;
- 然后 event 被传递给逻辑层;
- 逻辑层继而通过一系列的逻辑处理、数据请求、接口调用等行为将加工好的数据 data 传递给渲染层;
- 最后渲染层将 data 渲染为可视化的 UI。
总的来说,跟浏览器的线程模型相比,小程序的双线程模型解决了或者说规避了
Web Worker堪忧的性能同时又实现了与Web Worker相同的线程安全,从性能和安全两个角度实现了提升。可以概括地说,双线程模式是受限于浏览器现有的进程和线程管理模式之下,在小程序这一具体场景之内的一种改进的架构方案。
注意:浏览器中Worker 内的 JavaScript 代码不能操作 DOM,可以将其理解为线程安全的
# 性能方面
- 在保证功能的前提下尽量使用结构简单的 UI;
- 尽量降低 JavaScript 逻辑的复杂度;
- 尽量减少 setData 的调用频次和携带的数据体量。