提升小程序性能和体验

背景：首页作为小程序的门户，其性能表现和用户留存率息息相关。因此，我们可以从加载、渲染和感知体验几大维度深挖小程序的性能可塑性。

小程序官方性能指标

小程序官方针对小程序性能表现制订了权威的数值指标，主要围绕 渲染表现、setData 数据量、元素节点数 和 网络请求延时 这几个维度来给予定义（下面只列出部分关键指标）：

• 首屏时间不超过 5 秒；
• 渲染时间不超过 500ms；
• 每秒调用 setData 的次数不超过 20 次；
• setData 的数据在 JSON.stringify 后不超过 256kb；
• 页面 WXML 节点少于 1000 个，节点树深度少于 30 层，子节点数不大于 60 个；
• 所有网络请求都在 1 秒内返回结果；

详见 小程序性能评分规则

1、我们应该把这一系列的官方指标作为小程序的性能及格线，不断地打磨和提升小程序的整体体验，降低用户流失率。

2、这些指标会直接作为小程序体验评分工具的性能评分规则，其集成在开发者工具中，是目前检测小程序性能问题最直接有效的途径。在小程序运行时实时检查相关问题点，并为开发者给出优化建议。

小程序后台性能分析

小程序管理平台 和 小程序助手 为开发者提供了大量的真实数据统计。性能分析面板从 启动性能、运行性能 和 网络性能 这三个维度分析数据，开发者可以根据客户端系统、机型、网络环境和访问来源等条件做精细化分析，非常具有考量价值。

启动总耗时 = 小程序环境初始化 + 代码包加载 + 代码执行 + 渲染耗时

了解小程序底层架构

为了更好地为小程序制订性能优化措施，我们有必要先了解小程序的底层架构，以及与 web 浏览器的差异性。

微信小程序是大前端跨平台技术的其中一种产物，与当下其他热门的技术 React Native、Weex、Flutter 等不同，小程序的最终渲染载体依然是浏览器内核，而不是原生客户端。

而对于传统的网页来说，UI 渲染和 JS 脚本是在同一个线程中执行，所以经常会出现 “阻塞” 行为。微信小程序基于性能的考虑，启用了双线程模型：

• 视图层：也就是 webview 线程，负责启用不同的 webview 来渲染不同的小程序页面；
• 逻辑层：一个单独的线程执行 JS 代码，可以控制视图层的逻辑；

任何线程间的数据传输都是有延时的，这意味着逻辑层和视图层间通信是异步行为。除此之外，微信为小程序提供了很多客户端原生能力，在调用客户端原生能力的过程中，微信主线程和小程序双线程之间也会发生通信，这也是一种异步行为。这种异步延时的特性会使运行环境复杂化，稍不注意，就会产出效率低下的编码。

作为小程序开发者，我们常常会被下面几个问题所困扰：

• 小程序启动慢；
• 白屏时间长；
• 页面渲染慢；
• 运行内存不足；

所以，我们需要结合小程序的底层架构分析出这些问题的根本原因，并针对性地给出解决方案。

一、小程序启动太慢？

小程序启动阶段，也就是如下图所示的展示加载界面的阶段。

在这个阶段中（包括启动前后的时机），微信会默默完成下面几项工作：

1. 准备运行环境：

在小程序启动前，微信会先启动双线程环境，并在线程中完成小程序基础库的初始化和预执行。

2. 下载小程序代码包：

在小程序初次启动时，需要下载编译后的代码包到本地。如果启动了小程序分包，则只有主包的内容会被下载。另外，代码包会保留在缓存中，后续启动会优先读取缓存。

3. 加载小程序代码包：

小程序代码包下载好之后，会被加载到适当的线程中执行，基础库会完成所有页面的注册。

4. 初始化小程序首页：

在小程序代码包加载完之后，基础库会根据启动路径找到首页，根据首页的基础信息初始化一个页面实例，并把信息传递给视图层，视图层会结合 WXML 结构、WXSS 样式和初始数据来渲染界面。

综合考虑，为了节省小程序的“点点点”时间（小程序的启动动画是三个圆点循环跑马灯），除了给每位用户发一台高配 5G 手机并顺带提供千兆宽带网络之外，还可以尽量 控制代码包大小，缩小代码包的下载时间。

①无用文件、函数、样式剔除

经过多次业务迭代，无可避免的会存在一些弃用的组件/页面，以及不被调用的函数、样式规则，这些冗余代码会白白占据宝贵的代码包空间。而且，目前小程序的打包会将工程下所有文件都打入代码包内，并没有做依赖分析。

因此，我们需要及时地剔除不再使用的模块，以保证代码包空间利用率保持在较高水平。通过一些工具化手段可以有效地辅助完成这一工作。

• 文件依赖分析

在小程序中，所有页面的路径都需要在小程序代码根目录 app.json 中被声明，类似地，自定义组件也需要在页面配置文件 page.json 中被声明。另外，WXML、WXSS 和 JS 的模块化都需要特定的关键字来声明依赖引用关系。

import api from '../../api/index'; // 如果没有被使用，应当删除
import rule from './config';

• 无用函数剔除              
• JS、CSS Tree-Shaking

JS Tree-Shaking 的原理就是借助 Babel 把代码编译成抽象语法树（AST），通过 AST 获取到函数的调用关系，从而把未被调用的函数方法剔除掉。不过这需要依赖 ES module，而小程序最开始是遵循 CommonJS 规范的，这意味着是时候来一波“痛并快乐着”的改造了。CSS 的 Tree-Shaking 可以利用 PurifyCSS 插件来完成。关于这两项技术，有兴趣的可以“谷歌一下”。

②减少代码包中的静态资源文件

小程序代码包最终会经过 GZIP 压缩放在 CDN 上，但 GZIP 压缩对于图片资源来说效果非常低。如 JPG、PNG 等格式文件，本身已经被压缩过了，再使用 GZIP 压缩有可能体积更大，得不偿失。所以，除了部分用于容错的图片必须放在代码包（譬如网络异常提示）之外，建议开发者把图片、视频等静态资源都放在 CDN 上。需要注意，Base64 格式本质上是长字符串，和 CDN 地址比起来也会更占