支付宝小程序性能优化原理及手段

阶段名称

含义

框架资源准备阶段

客户端获取并校验小程序配置、版本、权限等基础信息，完成小程序进程、UC内核、原生UI元素、webview进程、前端框架AppX、基础库等初始化工作

业务资源准备阶段

下载、解压小程序版本包到客户端中，为业务后续加载渲染准备相应的JS、图片、CSS等资源

业务加载渲染阶段

读取小程序代码和配置文件，注入到前端框架AppX执行，触发生命周期函数，对用户访问页面进行数据初始化工作，加载页面结构和样式，完成首屏渲染

检测项名称

检测项解释

解决方案

小程序包大小检测

包过大会加大小程序包下载耗时，影响业务资源准备阶段，进而影响启动耗时；

1.删除无用的图片资源及无用代码；
2.使用分包进行包大小优化，将不经常使用的页面放到多个分包中

包内图片大小检测

图片大小也会影响包的整包大小，进而影响下载耗时，同时也会影响到图片的解析和渲染耗时

1.合理压缩/剪裁图片大小
2.修改图片格式，png/jpg转成webp或者 SVG格式

归类

检查项Title

标准说明

解决方案

网络请求
-资源类

首屏流量消耗

首屏页面加载中，会加载和引入图片、音视频和JSON数据等文件，应避免页面加载对用户造成过大的流量开销。

1.可考虑资源合并、压缩等技术方案来降低流量开销

资源请求数

网络请求获取的资源总数量过大，导致网络资源的处理时长增加；

1.减少不必要的资源加载

网络请求图片大小

网络请求图片过大会影响请求耗时，消耗过多的网络流量。

1.合理压缩/剪裁图片大小
2.修改图片格式，png/jpg转成webp或者 SVG格式
3.常用图片压缩后存放在离线包里；

图片并发请求数量

短时间内发起太多图片请求会加重网络带宽压力，且并发请求太多也会导致图片加载慢。

1.未使用到的图片或者屏幕外的图片采用懒加载处理；
2.使用雪碧图；

网络请求
-网络类

网络请求耗时

单次网络请求（如http/mtop/rpc），从发起请求到数据返回的耗时，网络请求耗时过长将导致数据等待，延迟首屏初次渲染开始的时间，会让用户一直等待甚至离开。

1.数据缓存存储网络请求结果；
2.优化好服务器处理时间，服务端可做CDN缓存，做网络请求的预加载（预热），让前端请求能快速响应
3.将数据请求提前到 onLoad 中，避免在 onReady 中发出请求，导致首屏渲染延缓

网络请求 url 长度

受限于系统网络库实现、传输稳定性等影响，单次大数据量的传输，会延迟数据传输时长和处理时长，甚至导致加载失败

1.对数据进行合理拆分，分页、分级请求和展示

接口调用
-接口类

JSAPI调用耗时过长

JSAPI调用耗时过长，会影响JSAPI调用性能

1.数据缓存存储JSAPI执行结果。

同步JSAPI调用次数

同步JSAPI的调用过多将造成进程的阻塞，影响后续业务逻辑的执行。
尽量避免使用Sync结尾的同步JSAPI，优化经验中发现，getSystemInfoSync、getStorageSync、getLocation、getCities是同步调用的高发区

1.Sync结尾的同步JSAPI转成异步JSAPI

JSAPI重复调用次数

首屏页面加载中，多次调用同一个JSAPI，会增加无用耗时；优化经验中发现，getSystemInfo/getAuthCode/getUserInfo/getNetworkType/request等是重复调用的高发区

1.采用数据缓存方式处理前一执行JSAPI后的结果数据，减少调用次数

JSAPI 并发

异步并发过高，可能会导致接口调度减缓，甚至阻塞逻辑；（例如网络通信吞吐量有限的情况下，部分请求会阻塞、超时，甚至直接以失败返回，影响业务）

1.采用数据缓存方式处理前一执行JSAPI后的结果数据，减少调用次数
2.减少并发执行次数

逻辑计算

JS函数执行耗时

页面打开期间调用的 JS 函数较多，如果多个函数执行耗时都较长，那串行起来会更长，会严重影响用户体验，因此建议对耗时较长的函数进行优化。

1.自检代码，关注函数的循环层级，嵌套，以及定时器的延迟问题

归属

检查项Title

标准说明

解决方案

页面结构

页面AXML节点个数检测
（针对webview 的虚拟DOM 节点个数）

一个过大的DOM树会引起内存消耗增长，样式计算时间过长，与复杂的样式规则相结合可能会严重减慢渲染速度

1.节点层级超标：减少xxx节点下的嵌套层级，删除冗余节点/重新布局
2.节点数超标：减少xxx节点下子节点数，列表建议分批渲染
(结果需要指出对应问题节点名&描述，以及所在页面，超出的层级/节点数等)

页面样式

首屏图片尺寸检测

图片太大而有效显示区域较小时会增加内存的消耗，应根据显示区域大小合理控制图片大小

1.压缩/剪裁图片尺寸

图片分屏检测

加载当前屏幕中暂时不需要展示的图片，会影响页面加载耗时，增大内存消耗

1.建议分屏懒加载。

图片大小比例检测

图片未按原图宽高比例显示，可能会导致图片拉伸变形，用户识别困难。

1.建议根据实际情况设置  image  组件的 mode 属性，以保持原图宽高比。

归属

检查项Title

标准说明

解决方案

数据交互

setData数据量检测

小程序运行交互时，在逻辑层和视图层的数据传输过程中，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再执行脚本传到视图层渲染。故单次调用setData传递的字符串数据大小需要控制。

1.减少数据量，避免一次性setData传递过长的列表。
2.分批处理，可先 setData 一部分数据，然后等待一段时间（比如 400ms，具体需要业务调节）再调用 $spliceData 将其他数据传输过去。Link

setData调用次数检测

首屏页面setData调用次数不宜过多，过多会导致 JS 线程一直在执行编译和渲染，视图层和逻辑层数据交互阻塞，可能用户的事件操作传递到逻辑层不及时，同时逻辑层的处理操作也不能很快的将数据传递到视图层，进而渲染出现延迟；

1.减少频次，避免频繁触发 setData 或者 $spliceData。
2.尽量避免使用页面级别的 setData 和 $spliceData， 将这一块封装成自定义组件，然后使用组件级别的 setData 或 $spliceData 触发组件重新渲染。
3.长列表数据触发渲染时，使用 $spliceData 多次追加数据，而不用传递整个列表。
4.复杂页面建议封装成自定义组件，减少页面级别的 setData。Link