⚡ 30 秒速记

• 核心判断：性能优化先建立用户指标与资源、主线程、渲染和网络证据，再定位最长关键路径
• 原理主线：围绕 「小程序的双线程设计」、「小程序如何提升用户体验」、「核心机制」 建立输入、状态变化与输出之间的因果关系
• 文章范围：介绍了小程序的双线程架构原理，包括逻辑层与渲染层的分离、setData 跨线程通信机制，以及通过引入原生组件提升用户体验的方式，帮助开发者理解小程序高性能、安全性和交互优化的实现原理。
• 边界与代价：实验室分数不等于真实用户体验，平均值也会掩盖长尾；优化一项指标可能转移成本
• 工程落地：用现场数据确定瓶颈、做最小改动、对照验证并持续监控回归

小程序采用逻辑层与渲染层分离的双线程模型，界面更新依靠 setData 经客户端跨线程传递。 逻辑层运行在受限的 JavaScript 沙箱中，不能直接操作 DOM；渲染层使用 WebView，只接收约定的数据并更新页面。频繁交互若都走完整通信链路会增加开销，因此输入框、canvas、map 等场景会借助原生组件。启动阶段还会利用内置基础库、预先准备 WebView、缓存和分包加载来缩短用户等待时间。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。

小程序的双线程设计

小程序中使用了沙箱环境来运行 JavaScript 代码，在这个环境中无法进行一些 DOM 操作。那么，开发者如何更新页面内容、控制页面的展示呢？答案是使用setData()。

为什么使用setData()可以更新页面内容呢？这是因为在小程序中，界面渲染相关任务则是由单独的 WebView 线程来完成。也就是说，在小程序中，JavaScript 脚本的执行和界面渲染不在一个线程中。

当我们在 JavaScript 中使用setData()更新数据的时候，实际上这些数据会通过客户端进行跨线程通信，然后传递到 WebView 页面中，WebView 页面则根据约定的规则来更新到页面中，过程如下图所示。

由于 WebView 页面中获取到的只是类似 JSON 格式的数据，不存在执行 JavaScript 脚本的情况。因此有效地防范了 XSS 攻击，也防止了开发者恶意爬取用户敏感信息。

现在，我们能看到，小程序中分为渲染层（由 WebView 线程管理）和逻辑层（由客户端 JavaScript 解释引擎线程管理）：