UI卡顿问题

卡顿原因分析
1、 通过工具检查
● 通过Xcode 检查视图层级关系是否有异常
● 通过instruments 的Animation Hitch工具检测:碰到问题,录制完了无数据(用iphone7录制有数据的,iphne14录制无数据?)
● 用模拟器检查是否有离屏渲染

2、看代码分析
● 列表一直往下刷新内存会爆掉,可能存在内存泄漏,需要进一步看看
○ 可以用内存工具检测看看有没有异常
○ 看代码里有没有循环引用(结合撒伽师兄那天给的日志)
● 复用问题
○ cell上的lottie动画组件没有复用
○ cell上有大量的removeFromSuperView可能导致卡顿,代码可以优化(是为了避免数据重复,在prepareForReuse里使用,可以换成在这里刷新数据???)
● 离屏渲染的问题(图层没法决定最终的显示效果就会出现离屏渲染问题)
○ 阴影、圆角设置的方式(topview圆角)
○ 光栅化设置
○ 设置了组透明度为 YES,并且透明度不为 1 的layer
○ 使用了高斯模糊
● 渲染耗时
○ 图片缓存占用太多内存
○ 图片是否还有压缩的空间
○ 渐变图层换成图片?(tagview)
● 检查是否有线程不合理问题
○ 主线程耗时任务,比如调用UIGraphicsGetCurrentContext等接口在 CPU 上进行绘制计算
○ 主线程等待繁忙的子线程或低优先级的后台线程任务而导致阻塞
○ 主线程等待系统资源,比如使用Data(contentsOf:)进行 IO 读取等

发现的问题
主要问题:
● cell上的lottie动画组件没有复用
● cell上有大量的removeFromSuperView可能导致卡顿,代码可以优化(是为了避免数据重复,在prepareForReuse里使用,可以换成在这里刷新数据???)
● 圆角设置的方式导致离屏渲染
● 一直刷新,内存爆掉闪退(可能不是这个模块的问题)
次要问题:
● 滑动结束,一堆的cell调用了stop
● feeds接口请求参数exclContentIds随着分页数增加,数组越来越大,是必要传的吗

优化项和影响面

第一阶段 ------ 随10.5.60迭代上线,已提测
安装包下载链接:xxx
优化点:
1、对列表Cell的顶部的播放组件重构优化
● 优化代码结构;
● 避免在刷新数据的时候添加和删除界面元素;
● 优化左上角lottie动画的加载方式,避免每次刷新数据都更新Lottie动画,达到复用的目的;
测试点:
1、直播广场双列列表的UI
2、回滚开关:xxxx

第二阶段 ------ 开发中
1、对列表Cell的底部组件重构优化
2、检查cell上的元素是否有离屏渲染,解决离屏渲染问题
3、检查其他可能导致卡顿的问题并修复

其他说明:增加回滚开关,以便出现问题及时回滚到老代码

重构风险点
[X] 1、preview类型数据没有自测过,记得mock数据自测
[ ] 2、有recommend的数据也没自测过
[ ] 3、为了本地跑真机在工程文件里去掉了一个purchase的勾选,并提交了
[X] 4、开关mock数据测试一下开关是否生效
[X] 5、测试一下开关是在什么场景下生效(每次进入直播广场?)
[ ] 6、偶现刷着刷着闪退

待解决的问题
[X] 1、找到检测卡顿的工具 —— instruments的animation hitch 用iphone7(iOS14)可以录制

新学到的知识点
● 同一父视图重复调用addSubviews添加同一个View并不会产生多层级
● 测试性能时不要链接抓包工具(可删除APMockData库减少干扰);最好断开debug链接;
● 三板斧:可监控(日志、埋点)、可灰度(发布阶段)、可回滚(开关控制)
● mPaas框架

耗时点
● 卡顿检测工具使用测试
● 代码熟悉过程,Cell模版注入原理(多亏师兄的指点,缩短了理解时间)
● 每修改完一个组件,需要花大量时间mock数据模拟各种场景和参数自测
● 采用排除法测试是哪个组件导致卡顿时,注册掉一个加载图片的组件,发现流畅很多;但是分析代码不知道什么原因导致卡顿,然后一顿排除测试:
怀疑是imageview的背景色设置xxx导致的
怀疑是图片资源的问题,更换了资源确实卡顿好很多
但是,最后发现断开antbox连接后卡顿好很多(可删除mock库减少干扰)

心得体会
● 抓住主要问题,先重构大量removeFromSuperView问题
● 从最上层开始重构,重构完一个单元,进行一次自测 -----最小单元自测
● 从关键问题入手分析改造
● 采用排除法排除有问题的地方能快速定位问题,但是要注意排除干扰因素

后记
参考文档
Instruments性能检测
https://www.jianshu.com/p/9e94e42cfb01
Animation Hitch:
https://www.jianshu.com/p/158a8497fe1c
https://juejin.cn/post/7231731488928399415
https://zhuanlan.zhihu.com/p/428971055?utm_id=0
iOS卡顿检测:
https://www.jianshu.com/p/ee62bbf38559
UICollectionView复用:
https://www.jianshu.com/p/5d817ea3565d
https://www.jianshu.com/p/e55178fd1e7f
dispatch_sync_on_main_queue:
https://www.jianshu.com/p/b3227582037d
圆角设置:
https://www.jianshu.com/p/7bc7246ef92a?tdsourcetag=s_pcqq_aiomsg
离屏渲染:
https://juejin.cn/post/6847902222567604231
https://juejin.cn/post/6846687603316490254

你可能感兴趣的:(iOS原创,ui)