iOS UI掉帧和卡顿优化解决方案记录

这篇具有很好参考价值的文章主要介绍了iOS UI掉帧和卡顿优化解决方案记录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

UI卡顿原理

iOS UI掉帧和卡顿优化解决方案记录,iOS相关工作笔记,ios,ui

在 VSync 信号到来后,系统图形服务会通过 CADisplayLink 等机制通知 App,App 主线程开始在 CPU 中计算显示内容,比如视图的创建、布局计算、图片解码、文本绘制等。随后 CPU 会将计算好的内容提交到 GPU 去,由 GPU 进行变换、合成、渲染。随后 GPU 会把渲染结果提交到帧缓冲区去,等待下一次 VSync 信号到来时显示到屏幕上。由于垂直同步的机制,如果在一个 VSync 时间内,CPU 或者 GPU 没有完成内容提交,则那一帧就会被丢弃,等待下一次机会再显示,而这时显示屏会保留之前的内容不变。这就是界面卡顿的原因。

从上面的图中可以看到,CPU 和 GPU 不论哪个阻碍了显示流程,都会造成掉帧现象。所以开发时,也需要分别对 CPU 和 GPU 压力进行评估和优化。

卡顿原因分析

1、 通过工具检查

  • 通过Xcode 检查视图层级关系是否有异常 ------ 未发现视图层级设置不合理的问题
  • 通过instruments 的Animation Hitch工具检测:------ 碰到问题,录制完了无数据(用iphone7录制有数据的,iphne14录制无数据?),iphone7检测结果发现掉帧确实很频繁

iOS UI掉帧和卡顿优化解决方案记录,iOS相关工作笔记,ios,ui

  • 用模拟器检查是否有离屏渲染 ------- 确实有离屏渲染问题

2、看代码分析

  • 复用问题
    • cell上的lottie动画组件没有复用;
    • cell上有大量的removeFromSuperView导致列表滑动过程中频繁的视图添加和删除,同时本来只需要更新显示内容的控件也没有得到复用;
  • GPU离屏渲染的问题
    • 阴影、圆角设置的方式 ------ 确有圆角设置导致的离屏渲染
    • 光栅化设置 ------ 无
    • 设置了组透明度为 YES,并且透明度不为 1 的layer ------ 无
    • 使用了高斯模糊等 ------ 无
  • 渲染耗时
    • 图片体积是否还有压缩的空间 ------ 商品图片和店铺头像确实有进一步裁减压缩的空间
    • 滑动过程中停止lottie动画
    • 渐变图层换成图片 ------ 减少GPU渲染耗时
  • 检查是否有线程不合理问题
    • 主线程耗时任务,比如调用UIGraphicsGetCurrentContext等接口在 CPU 上进行绘制计算 ------ 无
    • 主线程等待繁忙的子线程或低优先级的后台线程任务而导致阻塞,或者在滑动过程中主线程有耗时方法 ------ 往下滑动加载下一页数据时,确实有耗时的操作放在主线程
    • 主线程等待系统资源,比如使用Data(contentsOf:)进行 IO 读取等 ------ 无
  • 内存占用过度:列表一直往下刷新内存会爆掉,可能存在内存泄漏,需要进一步看看
    • 可以用内存工具检测看看有没有异常
    • 看代码里有没有循环引用等引起内存问题的代码
    • 缓存是否不合理

优化步骤和测试点

第一阶段 ------ 10.5.60

优化点:

  • 对列表Cell的顶部的播放组件重构优化
    • 优化代码结构;
    • 避免在刷新数据的时候添加和删除界面元素;
    • 优化左上角lottie动画的加载方式,避免每次刷新数据都更新Lottie动画,达到复用的目的;
第二阶段 ------ 10.5.66

优化点

  • 双列Cell底部组件反复的添加和删除逻辑优化;
  • 解决离屏渲染问题;
  • 商品图片和介绍图预加载并裁减来减少体积(图片从100~200Byte,减少到几个Byte);
  • 解决滑动过程中停止播放器定时器生效导致播放器一直在播放引起的掉帧;
  • 渐变背景图层换成图片;
  • 加载下一页数据代码中主线程耗时方法,尽量放到非主线程的异步线程;
  • 滑动过程中,停止lottie动画;
  • 优化获取size的逻辑:内部控件固定的size计算好后缓存下来;
  • 减少frame的设置刷新;
  • 播放器代码从UI组件抽取出来;
  • 解决一个历史遗留bug;
  • 显示封面图时增加渐显动画

优化总结

优化项总结
掉帧和卡顿相关优化
  • 修改Cell上UI控件反复的添加和删除逻辑;
    • cell是复用的,已经添加在cell的控件,如果刷新数据时需要隐藏的使用hidden而不是重复remove/add(这样修改测试重点要看下会不会因为cell的复用导致数据显示没有更新过来);
    • lottie的url获取和创建优化:url是从config server获取的,之前是每次刷新数据都获取,改成创建控件的时候获取一次;创建之前也是每次刷新数据的收获都重新创建,改成只创建一次;
  • 解决离屏渲染问题;
  • 商品图片和介绍图预加载并裁减来减少体积(图片从100~200Byte,减少到几个Byte);
  • 解决滑动过程中停止播放器定时器生效导致播放器一直在播放引起的掉帧;(这是个程序Bug,是造成滑动列表过程中掉帧很重要很隐蔽也是个很干扰排查的原因!)
  • 渐变背景图层换成图片;
  • 排查加载下一页数据代码中主线程耗时方法,尽量放到非主线程的异步线程;
  • 滑动过程中,停止lottie动画;
  • 优化获取size的逻辑:内部控件固定的size计算好后缓存下来;
  • 减少frame的设置刷新;
体验优化
  • 显示封面图时增加渐显动画
其他优化
  • 播放器代码从UI组件抽取出来;
  • 相同模版合并;
改善结果

改善前:无论是下拉加载数据,还是数据加载完毕往上滑动列表,都有明显掉帧和卡顿现象

改善后:往上滑动或者数据加载完毕再往下滑动,完全不会掉帧和卡顿

遗留问题

往下加载数据偶尔会出现掉帧现象。

分析可能的原因是往下滑动加载下一页数据时,接口数据回调回来后调用框架的CSCollectionViewDataManager类的addCardInstances方法在主线程耗时27ms左右导致掉帧。

心得体会

  • 因为引起掉帧的因素是多方面的,一开始无从查起;可以先把最明显的一些优化点先改好,再慢慢用排除法去定位哪些模块引起问题的,从而再进一步针对的排查;
  • 重构完一个单元,进行一次自测;
  • 从明显的关键问题入手分析改造;
  • 采用排除法排除有问题的地方能快速定位问题,但是要注意排除干扰因素;比如排除抓包干扰,抓包的时候界面会变的更加卡顿掉帧,所以记得关掉antbox或者删除掉抓包相关的依赖库;
  • 排查过程中,确保单一场景。比如列表往下滑和往上滑其实是不同的场景(往下拉时会触发加载更多数据等一系列的动作),应该分别去分析两个场景下引起掉帧的原因。

其他杂记

排查法检查卡顿点过程记录

单元模块排除法找出引起掉帧的主要因素

场景:

1、往下拉

2、往上(回)拉

前提:注释播放器play和stop逻辑;注释起播加速;

步骤

1、注释topview所有组件,只留下bottomview

测试滑动效果:

往下滑动时,仍然会掉帧

网上滑动,不掉帧

结论: 

1、可能商品图片加载引起掉帧

2、加载新数据引起掉帧

进一步测试:注释商品图片加载代码

测试滑动效果:

往下滑动加载新数据,还是会有些许掉帧 —— 加载新数据有可能存在阻塞主线程的方法

往上滑动不掉帧

2、 放出_introView(图片和渐变背景先隐藏)

测试滑动效果:

往下滑动,加载新数据有些掉帧;

往上滑动,基本不掉帧;再次往下滑动,也基本不掉帧了;

3、 放出tagview(lottie先隐藏)

测试滑动效果:同上

4、 放出tagview的lottie

说明:

1、 lottie的url从config server取的,初始化控件的时候取一次

2、 lottie的创建(调用框架的方法,异步获取, 并开启了缓存(降级场景只能取到静态图?))

测试滑动效果:同上

5、 放出_introView的渐变背景

测试滑动效果:同上

6、 释放封面图预加载代码

测试滑动效果:同上; 感觉往下加载新数据时,卡顿更严重一些,等分析加载新数据卡顿原因时再进一步分析;

7、 释放goodsview图片

测试滑动效果:同上;

8、 释放_introView图片加载

测试滑动效果:

往下加载新数据会掉帧;

往上滑动也出现了偶尔掉帧;

9、重新隐藏_introView图片加载再测试一遍

测试滑动效果:往回拉时基本不掉帧。

得出结论:同时只显示一张图片时,往回拉基本不掉帧。增加一张图片往回拉出现掉帧。

10、只加载封面图,隐藏其他图片加载

测试滑动效果:同2

11、释放_introView图片加载

测试滑动效果:掉帧不明显

12、释放goodsview图片加载

测试滑动效果:往回掉帧

13、goods和intro的图片都预加载

Goods预加载前224b -> 预加载 14b

Intro预加载前104b -> 预加载 8b

接下来,逐步分析加载新数据掉帧原因

方法:从日志台打印的关键日志入手,找到往回拉和往下拉日志差别;找到了didTriggerPaging方法;从这个方法入手终于揪出了两个主线程耗时方法

1、addCardInstances 耗时20多ms

2、preHandleCardInstances 平均耗时4~6ms

遗留的问题

  • 记得看下预览的cell是否有离屏渲染问题
  • 预加载图片两次,调查一下原因(打了两次log);
  • 加载出错时,重新加载逻辑貌似现在没有;
  • 启播加速放到异步线程?— 发现不影响
  • reloadWithThemeConfigVO应该没有必要每加载一次都去拉取,可以优化
  • addCardInstances耗时是否真的影响列表渲染?
  • 播放器的播放会掉帧,注释掉播放器,完全不掉帧 —— 播放器没有停止播放,会引起掉帧
  • 往下加载数据:注释掉预加载图片的代码还是会掉帧,说明预加载图片不是引起掉帧的原因?
  • MLPLiveRecommendView里也有个image,但是这样的数据很少,没必要放到预加载图片

结论一二

解决播放器引起的掉帧问题(滑动过程中没有停止播放)

发现的问题

已解决:

  • cell上的lottie动画组件没有复用
  • cell上有大量的removeFromSuperView可能导致卡顿,代码可以优化(是为了避免数据重复,在prepareForReuse里使用,可以换成在这里刷新数据???)
  • 圆角设置的方式导致离屏渲染

未解决:

  • 滑动结束,一堆的cell调用了stop
  • feeds接口请求参数exclContentIds随着分页数增加,数组越来越大,是必要传的吗
  • 一直刷新,内存爆掉闪退(可能不是这个模块的问题)
重构风险点
  • 1、preview类型数据没有自测过,记得mock数据自测
  • 2、有recommend的数据也没自测过
  • 3、为了本地跑真机在工程文件里去掉了一个purchase的勾选,并提交了
  • 4、开关mock数据测试一下开关是否生效
  • 5、测试一下开关是在什么场景下生效(每次进入直播广场?)
  • 6、偶现刷着刷着闪退
待解决的问题
  • 1、找到检测卡顿的工具 —— instruments的animation hitch 用iphone7(iOS14)可以录制
新学到的知识点
  • 同一父视图重复调用addSubviews添加同一个View并不会产生多层级
  • 测试性能时不要链接抓包工具(可删除APMockData库减少干扰);最好断开debug链接;
  • 三板斧:可监控(日志、埋点)、可灰度(发布阶段)、可回滚(开关控制)
  • mPaas框架
  • ARC下block不需要copy,因为属性是strong,系统会将block自动拷贝到堆区,就不会有block捕获的变量值不确定的问题了
  • alpha属性

1、 =0时,不会从响应链中移除

2、更改默认是有动画的

3、 hidden隐藏性能更高

4、会影响自己和subview的透明度

  • opaque: 给绘图系统提供一个性能优化开关

1、UIView当有背景颜色时:并且背景颜色有透明度(透明度不为1时),将 opaque设置为YES性能较高。

2、UIVIew有背景颜色时:并且背景颜色的透明度为1,opaque的值不影 响性能。

3、UIVIew没有背景颜色时:opaque的值不影响性能。

  • CALayer的opacity
耗时点
  • 卡顿检测工具使用测试
  • 代码熟悉过程,Cell模版注入原理(多亏师兄的指点,缩短了理解时间)
  • 每修改完一个组件,需要花大量时间mock数据模拟各种场景和参数自测
  • 采用排除法测试是哪个组件导致卡顿时,注册掉一个加载图片的组件,发现流畅很多;但是分析代码不知道什么原因导致卡顿,然后一顿排除测试:
    怀疑是imageview的背景色设置MLP_C_FFFFFF_NODARK导致的
    怀疑是图片资源的问题,更换了资源确实卡顿好很多
    但是,最后发现断开antbox连接后卡顿好很多(可删除APMockData库减少干扰)
  • 编译瓶颈
    • Xcode调试成为瓶颈(模拟器看离屏渲染有时跑不起来;修改一次代码,编译要好几分钟)
    • 发现注释代码后,编译时间变长;
    • 取消注释的代码,编译时间也很长;
    • 什么代码也没改,重新编译时间也很长;看来编译时间可能跟网络环境有关(同样的电脑,同样的工程,不一样的网络环境)

后记

参考文档

Instruments性能检测
Instruments性能检测 - 简书

Animation Hitch:
iOS 底层原理39:Instruments系列(三)Animation Hitches - 简书
iOS渲染流程和卡顿分析工具-Animation Hitches - 掘金
iOS 性能检测新方式​——AnimationHitches - 知乎

iOS卡顿检测:
iOS卡顿检测 - 简书

UICollectionView复用:
UICollectionView缓存机制探究 - 简书
2016笔记——UICollectionView复用 - 简书

dispatch_sync_on_main_queue:
如何安全使用dispatch_sync - 简书

圆角设置:
iOS 设置圆角、指定位置圆角及 iOS 11圆角设置 - 简书

离屏渲染:
iOS 离屏渲染探究 - 掘金
iOS圆角的离屏渲染,你真的弄明白了吗 - 掘金

iOS 渲染原理解析:

iOS 渲染原理解析

iOS 离屏渲染原理及优化(很有参考价值):

[转] iOS离屏渲染原理及优化 · Tenloy's Blog

设置圆角性能测评:

iOS设置圆角的4种方法实例(附性能评测)

卡顿原理和解决方案:iOS 深入理解列表卡顿原理和滑动优化方案_苹果手机上的列表滑动问题-CSDN博客

图片的渲染过程与优化(非常有用):iosiOS图片的渲染过程与性能优化 - 简书文章来源地址https://www.toymoban.com/news/detail-814692.html

到了这里,关于iOS UI掉帧和卡顿优化解决方案记录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [DNS网络] 网页无法打开、显示不全、加载卡顿缓慢 | 解决方案

    最近,我在使用CSDN插件浏览 MOOC 网站时,遇到了一些网络故障。具体表现为: 点击CSDN插件首页的 MOOC(中国大学慕课)图标时,网页加载缓慢且资源加载不完全,导致 网页显示不全或无法正常使用 。 在已登录并保存了Cookie的情况下,个人课程页面一直处于白屏加载状态,

    2024年02月04日
    浏览(47)
  • 终极方案——解决MacBook/Mac mini连接无线鼠标卡顿、漂移

    找到如图设置,修改网络首选项顺序 1、在系统设置里新建一个管理员用户 2、在访达-前往-电脑-磁盘-找到新建用户的那个文件夹,拖至桌面 新用户点击左上角访达设置,在侧边栏显示出硬盘消息

    2024年02月13日
    浏览(42)
  • Windows11报sill idealTree buildDeps安装慢或者卡顿解决方案

    sill idealTree buildDeps 安装慢或者卡顿解决方案 距离上一次写文章好像是两年前了,啊!时间好快,那时候我还是一名测试开发学徒,转眼间我已经啥也不是。我丢!我特么怎么玩着玩着,玩起了前端了,大气!!!好了,不吐槽了,开始正文。 先按照百度出来的内容走一遍流

    2024年02月04日
    浏览(51)
  • 【学习】FPGA verilog 编程使用vscode,资源占用多 卡顿 卡死 内存占用多解决方案

            FPGA verilog 编程使用vscode,资源占用多 卡顿 卡死 内存占用多解决方案。         32G内存,动不动就暂用50%!! 1.打开设置 文件-首选项-设置  或者点击软件界面的左下角的齿轮按钮 2.进入如下【设置】界面 3.在上面搜索框中输入: search.followSymlinks,消除勾选  4.在

    2024年01月17日
    浏览(60)
  • iOS多语言解决方案全面指南

    本文以及相关工具和代码旨在为已上线的iOS项目提供一种快速支持多语言的解决方案。由于文案显示是通过hook实现的,因此对App的性能有一定影响;除了特殊场景的文案显示需要手动支持外,其他任务均已实现自动化。 本文中的部分脚本代码基于 ChatGPT4.0 和 Github Copilot 完成

    2024年02月11日
    浏览(34)
  • iOS rootless无根越狱解决方案

    据游戏工委数据统计,2023年国内游戏市场实际销售收入与用户规模双双创下新高, 游戏普遍采用多端并发方式,成为收入增长的主因之一。 中国市场实际销售收入及增长率丨数据来源:游戏工委 多端互通既是机遇,也是挑战。 从游戏安全的角度来看,多端互通意味着游戏

    2024年01月23日
    浏览(40)
  • java.io.NotSerializableException异常的解决方案

    做项目练习的时候,发现项目可以运行,但是会爆出java.io.NotSerializableException异常 解决方法 :在你的实体类后加 “implements Serializable”, NotSerializableException :字面意思就是没有序列化异常。 首先 ,你要明白什么是序列化: *序列化:*把对象转化为可传输的字节序列过程称

    2024年02月05日
    浏览(36)
  • iOS长按时无法保存图片问题解决方案

    在使用iOS设备的用户中,相信很多人都有过在浏览网页时遇到长按时无法保存图片的困扰。这主要是因为网页开发者为了保护版权或隐私,默认屏蔽掉了图片长按时保存的功能。 具体来说,问题出在 -webkit-touch-callout 这个CSS属性上。这个属性用于定义当用户长按时,系统是否

    2024年01月19日
    浏览(50)
  • (转)H5和IOS/安卓通信解决方案

    项目背景:现有H5项目,要快速完成一个app开发,由于周期紧张只能先用H5套壳完成一版app。在其中,涉及到不同端的交互。 如果业务逻辑比较复杂,比如页面需要获取 IOS 端传回的返回值,或者 IOS 端需要调用 js 方法。可以通过第三方库来实现,我们项目用的是 WebViewJavasc

    2024年02月01日
    浏览(46)
  • uniapp - 完美解决 <swiper> 嵌套 video 视频时卡顿不流畅问题,swiper滑块视图容器里面包含视频播放器和图片共存时滑动切换特别卡,滑动不流畅问题的解决方案(保证解决此问题)

    在uniapp项目开发中,swiper组件内有多个视频、图片和视频混合时会出现滑动不流畅卡顿问题,并且视频自动轮播时没等看完视频就轮播走了。 解决方案全端(H5网页/小程序/app安卓苹果等)兼容适用,uview组件库同理也能用,保证解决卡顿不流畅的问题。

    2024年02月05日
    浏览(94)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包