⚡ 30 秒速记

• 逻辑与视图分工，更新通过框架通信
• 常见 WebView 架构只是渲染方案之一
• 同步数据量与频率影响交互成本
• 分包、缓存和预准备缩短启动路径
• 沙箱减少能力暴露，不等于自动消除所有安全风险

小程序通过受控的运行环境，把业务代码和界面渲染分开组织。 常见架构中，逻辑层不能直接操作页面文档，需要把数据变化交给客户端和渲染层处理，因此频繁大数据同步会带来成本。宿主还能通过缓存、分包和预准备减少启动等待。具体使用网页视图还是其他渲染方案，要按平台与项目配置确认，不能把一种历史架构当成所有小程序的唯一实现。

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

小程序的双线程设计

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

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

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

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

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

这就是小程序的双线程设计。显然，它带来了一些好处：

• 可以防止恶意攻击者的 XSS 攻击；
• 可以防止开发者恶意盗取用户敏感信息；
• 提升页面加载性能

在浏览器中 GUI 渲染线程负责渲染浏览器界面 HTML 元素，JavaScript 引擎线程主要负责处理 JavaScript 脚本程序。它们之间是互斥的关系，当 JavaScript 引擎执行时，GUI 线程会被挂起。而在小程序中，由于 JavaScript 的执行和页面渲染不在一个页面中，因此也不存在阻塞的问题，页面加载得以更加流畅

小程序如何提升用户体验

目前，主流的 App 主要有 3 种，它们对应了 3 种渲染模式：

• Native App，使用了 Native（纯客户端原生技术）渲染；
• Web App，使用了 WebView（纯 Web 技术）渲染；
• Hybrid App，使用了 WebView+原生组件（Hybrid 技术）渲染。