codecamp

支付宝小程序 性能

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,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }