背景:首页作为小程序的门户,其性能表现和用户留存率息息相关。因此,我们可以从加载、渲染和感知体验几大维度深挖小程序的性能可塑性。
小程序官方性能指标
小程序官方针对小程序性能表现制订了权威的数值指标,主要围绕 渲染表现、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 地址比起来也会更占空间。
// 应该尽量避免css文件中这种写法,打包后转成base64更占空间
.icon-cart {
background-image: url('../../assets/images/icon/icon-cart.png'