智能小程序性能优化概述

智能小程序在开发模式上基于 Web 前端开发的技能和生态，在运行时则采用了类客户端的方案，旨在使用体验上超越传统的 Web 前端技术，在开发效率上超过传统的客户端技术。因此，在小程序的性能优化工作方面，可以借鉴 Web 前端开发的已有经验，但同时也存在一些区别。

智能小程序架构

小程序使用了双线程模型，包括逻辑层和渲染层。逻辑层作为一个单独的线程执行 js 代码，控制小程序数据的生成和处理；渲染层使用了 WebView 线程，处理页面的渲染和用户的事件交互行为。采用双线程模型主要考虑到两点：

  1. 小程序需要一个物理上的沙箱（Sandboxie 虚拟系统程序）环境隔离：为了避免小程序使用某些动态能力（如 iframe ），绕过其审核机制，造成不可控的影响；
  2. 双线程模型提供了一个性能更好的逻辑线程，渲染层只处理渲染和事件行为，逻辑层只处理数据。

具体设计可以参考以下结构：

智能小程序性能优化概述 - 图1

性能优化

基于以上架构设计，智能小程序的性能优化可以从以下几个方面入手：

  1. 小程序向数据服务器请求数据；
  2. 数据返回后在逻辑层进行处理，发送给渲染层（发送的行为即 setData ）；
  3. 渲染层获取到 data 后进行渲染展示可交互页面；
  4. 用户进行交互操作触发事件（ event ）渲染层将事件发送给逻辑层；
  5. 逻辑层触发小程序对应的逻辑行为，如果事件修改了数据就会触发以上的第二步。

智能小程序性能优化概述 - 图2

数据瓶颈优化

在双线程模型下，小程序容易在以下两个场景产生数据瓶颈：

  1. 数据的获取：由于数据的获取依赖数据服务器的反馈，所以我们希望数据的获取尽可能早，同时数据返回尽可能快；
  2. 页面的渲染：由于小程序的渲染层使用的是 WebView ，所以大部分传统 Web 渲染的优化手段对小程序优化同样有效；针对小程序的架构特性，智能小程序框架也提供了多种组件能力和优化建议，从而优化渲染性能。

因为小程序提供了双线程模式以及底层是由 Native 支撑的，所以小程序可以利用 Native 的能力提供更多性能优化手段。

我们将在性能优化的原理和手段具体介绍性能优化方案。