百度小程序性能优化的一些分享

  • 时间:
  • 浏览:2500
  • 来源:无双科技

几个月前,小程序的上屏时长3.1s~3.5s,白屏率达到1.2%以上,DAU得不到有效增长,用户体验不佳,基于此情况,小程序的性能优化已迫在眉睫

参考官方的一些文档和其他同学分享的经验,在几个阶段的优化之后,小程序的性能和白屏率均达标

image.png

第一阶段:上屏:3.3s 白屏率:1.5%以上 包体积 780KB

1、首页添加骨架屏,事实证明骨架屏针对白屏率十分有效2、本地图片的压缩,限定超过某一临界点图片(10kb)&不影响页面加载效果的图片迁移cdn,这部分项目开始规划不太好,多人开发图片做隔离文件夹建的太多,针对一些图片可以考虑整合到一张图片上,使用雪碧图,或者字体图标代替3、使用百度提供的onInit生命周期,在onLoad之前(紧急的内容提前请求)4、整理pv量较低的页面,根据业务情况迁移至分包中5、去除无用文件

监控反馈:上屏时长稳定在2.2~2.6s,白屏率降低到1%以下,包体积 500KB

第二阶段 上屏时长2.3s, 白屏率1%, Audits评分相关(一次请求过多,1s内请求较多图片,接口并发较多)1、将pv量较高页面添加骨架屏,进一步降低白屏率2、降低接口并发量,将不紧急的服务延后请求3、没有依赖关系的接口使用Promise.all,4、根据业务情况尽量少的使用同步api(类似getStorageSync)5、使用百度提供的首页数据预加载

监控反馈:上屏时长1.7~2s,白屏率0.5%,包体积 380KB

第三阶段:上屏时长1.8s左右, 白屏率0.5%左右,包体积400KB1、跟服务端同学协调推进优化接口响应速度,接口的响应速度可以进一步提前页面数据渲染时机和避免白屏的抓取2、将独立业务拆分到独立分包(独立分包的使用第一次进入主包,全局的生命周期和全局数据覆盖存在问题已跟百度同学反馈,预计3月13号的版本修复,目前还未验证),上线前先将json中配置的独立分包标识"independent": true去掉,默认为普通分包,待修复后改为独立分包3、首页数据推进服务拆分模块,不做一次下发,setData的优化可以很有效的进一步提升上屏时长,目前小程序首页只渲染首屏幕多一点的数据

监控反馈:上屏时长1.4s左右(新版本上线会有一点上升),白屏率0.45%左右

 

那些后知后觉&还需要持续改善的内容:

1、项目开始,全局依赖的缓存数据应该统一放在一个属性对象里面,避免在APP初始化的时候一个一个获取(很多个getStorageSync),导致现在发现这个问题已经不好处理了

2、虽然迁移了很多图片,但是本地还是有很多小图标(图片文件所占用磁盘空间600KB左右),目前使用的还是手动将一些图片放在另个项目本地上线放到cdn,后面会推进此部分的后台落地,可以批量上传,将本地的图片80%迁移到远程cdn,但是本地图片src路径的替换还是不小的一个工作量,所以建议项目早期就有这样的规划

3、刚开始在优化上屏时长上面感觉无从下手,不能确定一些优化工作的有效性,使用IDE的Trace真机调试收集性能数据,可以找一些大的问题点,针对后期几百毫秒的优化没有比较好的参考价值,因为每次收集都会有比较大的偏差(依赖网络、内容加载等等)

4、骨架屏(明显降低白屏率)、一次setData的数据量(只渲染首屏多一点的数据,明显降低上屏时长)、接口的响应速度、图片大小、包体积(针对包体已经在1M以内,如果减少体积跨度不大,上屏时长等减少并不会很明显)、分包、避免同步阻碍等手段验证都在一定程度上起到优化效果

5、项目的优化越到后面就越难,往往就是死磕那几百毫秒,需要大量的改动和验证,所以分阶段持续优化,一边优化一边通过线上反馈验证是个不错的方法,当然也跟业务的需求场景有很大关联,我们的小程序就是有大量的高清图片,首页又存在跟推荐相关的内容,所以首页的接口会依赖用户画像等信息做个性化推荐就导致首页的接口会慢不少6、点击跳转时,借助跳转间隔的300ms,将下个页面的数据通过跳转参数携带到下个页面,可以让下个页面内容展示时间大大缩短,在独立分包的社区中有使用过此场景

优化后小程序体积包直接干到了几十KB,第二天直接升级,接下来,还是得多研究研究文档,尽量升级到A/B

image.png

猜你喜欢

百度小程序web浏览正常,但app浏览及真机浏览却加载不出来数据,显示错误:java.security

百度小程序web浏览正常,但app浏览及真机浏览却加载不出来数据,显示错误:java.security

百度小程序在经历多次的提交始终无法通过,提示真机存在空白页面,无法通过审核,可以自己本地预览也都是正常的,在与客服沟通后发现原来是app预览空白页面导致。然后就是一直查问题,始

2021-07-13

添加百度小程序到底有没有效果

添加百度小程序到底有没有效果

最近一段时间,百度又是大幅度的调整了算法,导致一大批靠虚假流量快排获取权重排名的站点被降权限流,大家就又开始研究起百度小程序了,群里很多朋友在6月中旬就把小程序给发布上线了。可

2021-07-05

百度小程序