支付宝小程序 性能

2020-09-16 15:52 更新

1. 首屏时间

首屏内容全部显示出来的时间,代表了用户可以感受到的页面加载完成、可进行交互的时间,耗时过长会导致用户看到的都是白屏或者内容有缺失,用户会一直等待内容加载完成。建议检查加载过程中的所有操作,分析是否存在请求数据耗时过长或者一次性渲染数据过大的情况。

得分条件:首屏时间不超过 4500ms

2. 渲染时间

渲染界面的耗时过长会让用户觉得卡顿,体验较差,出现这一情况时,需要校验下是否同时渲染的区域太大。

得分条件:渲染时间不超过 500ms

3. setData 调用频率

避免频繁触发 setData 或者 $spliceData。需要频繁触发重新渲染时,避免使用页面级别的 setData 和 $spliceData, 将这一块封装成自定义组件,然后使用组件级别的 setData 或 $spliceData 触发组件重新渲染。长列表数据触发渲染时,使用 $spliceData 多次追加数据,而不用传递整个列表。复杂页面建议封装成自定义组件,减少页面级别的 setData。详情参考 优化 setData 逻辑方案明细

得分条件:每秒调用 setData 的次数不超过 20 次

4. setData 数据大小

setData 数据不宜过大,避免一次性传递过长的列表。 首屏请勿一次性构造太多节点,服务端可能一次请求传递大量数据,请勿一次性 setData,可先 setData 一部分数据,然后等待一段时间(比如 400ms,具体需要业务调节)再调用 $spliceData 将其他数据传输过去。

得分条件:setData 的数据在 JSON.stringify 后不超过 256KB

5. AXML节点数

建议一个页面使用少于 1000 个节点,节点树深度少于 30 层,子节点数不大于 60 个,一个过大的 DOM 树会引起内存消耗增长,样式计算时间过长,与复杂的样式规则相结合可能会严重减慢渲染速度。

得分条件:页面AXML节点少于 1000 个,节点树深度少于 30 层,子节点数不大于 60 个

6. JS 函数耗时

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

得分条件:JS 函数耗时都小于 100ms

7. 请求耗时

请求的耗时太长会让用户一直等待甚至离开,应优化好服务器处理时间,可减少回包大小,可服务端 rpc/mtop/http 等网络请求预加载,让请求快速响应。

得分条件:网络请求都在 1 秒内返回结果

8. 网络请求频率

短时间内发起太多请求会触发小程序并行请求数量的限制,同时太多请求也可能导致加载慢等问题,应合理控制请求数量,甚至做请求的合并等。

得分条件:每秒通过 my.request 发起的请求数不超过 10 个

9. 图片请求频率

短时间内发起太多图片请求会触发浏览器并行加载的限制,可能导致图片加载慢。应控制并发加载数量,可考虑使用雪碧图技术或在屏幕外的图片使用懒加载。

得分条件:每秒发起的图片请求数不超过 20 个

10. JSAPI 调用耗时

JSAPI 调用耗时过长,会影响 JSAPI 调用性能,应缩短单个 API 接口的耗时时长。

得分条件:JSAPI 单次调用耗时都小于 1 秒

11. 同步 JSAPI 调用

同步 JSAPI 的调用过多将造成进程的阻塞,影响后续业务逻辑的执行。建议尽量避免同步调用,getSystemInfo、getStorage、getLocation、getCities 是同步调用的高发区。

得分条件:每个页面中所有同步 JSAPI 调用累计总耗时小于1秒

12. JSAPI 重复调用

多次调用同一个 JSAPI,会增加无用耗时,应减少单页面同一 JSAPI 调用次数,采用缓存方式处理前一执行接口后的结果数据,减少调用次数。

得分条件:同一个 JSAPI 的调用次数小于 20 次

13. 避免加载屏幕外图片

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

得分条件:没有加载当前屏幕不需要显示的图片

14. 图片缓存

开启 HTTP 缓存控制后,下一次加载同样的图片,会直接从缓存读取,大大提升加载速度。

得分条件:所有图片均开启 HTTP 缓存

15. 图片大小

图片过大会影响包资源大小和加载耗时,应避免使用大图,合理压缩图片尺寸,图片格式建议转化成 SVG/webp,必要的大图从 CDN 渠道上传。

得分条件:图片小于 70KB

16. 图片尺寸

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

得分条件:图片宽高都不超过实际显示宽高的 3 倍

17. 避免重复请求

发起请求总会让用户等待,可能造成不好的体验,应尽量避免多余的请求,比如对同样的请求进行缓存。

得分条件:不存在重复请求同一资源的情况

18. 页面请求域名收敛

页面多个请求的域名建议尽量收敛在一起,如果域名太过分散,DNS 和链接复用率低,影响资源的加载速度,同时也需要考虑同域资源是否有并行加载的能力。

得分条件:页面前 6 个请求的域名总数占比超过 90%

19. 首页流量消耗

应避免页面加载对用户造成过大的流量开销,可以考虑使用资源合并、压缩等技术方案来降低流量开销。

得分条件:首页首次打开总流量消耗不超过 4M

20. 图片压缩

图片建议使用 webp、hevc 等压缩格式,这样不仅能提升网络传输效率和加载体验,同时也可以减少内存消耗和包体积。

得分条件:webp、hevc 图片占比不低于 60.0%

21. 文本资源压缩

建议使用 gzip/deflate 等压缩技术来降低文件的网络传输负载,以提升资源传输速度。

得分条件:文本资源均使用了 gzip/deflate 压缩

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号