罗湖网站建设多少钱,网站建设的财务计划,力天装饰口碑怎么样,做网站如何找项目UI卡顿原理 在 VSync 信号到来后#xff0c;系统图形服务会通过 CADisplayLink 等机制通知 App#xff0c;App 主线程开始在 CPU 中计算显示内容#xff0c;比如视图的创建、布局计算、图片解码、文本绘制等。随后 CPU 会将计算好的内容提交到 GPU 去#xff0c;由 GPU 进行…UI卡顿原理 在 VSync 信号到来后系统图形服务会通过 CADisplayLink 等机制通知 AppApp 主线程开始在 CPU 中计算显示内容比如视图的创建、布局计算、图片解码、文本绘制等。随后 CPU 会将计算好的内容提交到 GPU 去由 GPU 进行变换、合成、渲染。随后 GPU 会把渲染结果提交到帧缓冲区去等待下一次 VSync 信号到来时显示到屏幕上。由于垂直同步的机制如果在一个 VSync 时间内CPU 或者 GPU 没有完成内容提交则那一帧就会被丢弃等待下一次机会再显示而这时显示屏会保留之前的内容不变。这就是界面卡顿的原因。
从上面的图中可以看到CPU 和 GPU 不论哪个阻碍了显示流程都会造成掉帧现象。所以开发时也需要分别对 CPU 和 GPU 压力进行评估和优化。
卡顿原因分析
1、 通过工具检查
通过Xcode 检查视图层级关系是否有异常 ------ 未发现视图层级设置不合理的问题通过instruments 的Animation Hitch工具检测------ 碰到问题录制完了无数据用iphone7录制有数据的iphne14录制无数据iphone7检测结果发现掉帧确实很频繁 用模拟器检查是否有离屏渲染 ------- 确实有离屏渲染问题 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底部组件反复的添加和删除逻辑优化解决离屏渲染问题商品图片和介绍图预加载并裁减来减少体积图片从100200Byte减少到几个Byte解决滑动过程中停止播放器定时器生效导致播放器一直在播放引起的掉帧渐变背景图层换成图片加载下一页数据代码中主线程耗时方法尽量放到非主线程的异步线程滑动过程中停止lottie动画优化获取size的逻辑内部控件固定的size计算好后缓存下来减少frame的设置刷新播放器代码从UI组件抽取出来解决一个历史遗留bug显示封面图时增加渐显动画 优化总结
优化项总结
掉帧和卡顿相关优化
修改Cell上UI控件反复的添加和删除逻辑 cell是复用的已经添加在cell的控件如果刷新数据时需要隐藏的使用hidden而不是重复remove/add这样修改测试重点要看下会不会因为cell的复用导致数据显示没有更新过来lottie的url获取和创建优化url是从config server获取的之前是每次刷新数据都获取改成创建控件的时候获取一次创建之前也是每次刷新数据的收获都重新创建改成只创建一次
解决离屏渲染问题商品图片和介绍图预加载并裁减来减少体积图片从100200Byte减少到几个Byte解决滑动过程中停止播放器定时器生效导致播放器一直在播放引起的掉帧这是个程序Bug是造成滑动列表过程中掉帧很重要很隐蔽也是个很干扰排查的原因渐变背景图层换成图片排查加载下一页数据代码中主线程耗时方法尽量放到非主线程的异步线程滑动过程中停止lottie动画优化获取size的逻辑内部控件固定的size计算好后缓存下来减少frame的设置刷新 体验优化
显示封面图时增加渐显动画 其他优化
播放器代码从UI组件抽取出来相同模版合并 改善结果
改善前无论是下拉加载数据还是数据加载完毕往上滑动列表都有明显掉帧和卡顿现象
改善后往上滑动或者数据加载完毕再往下滑动完全不会掉帧和卡顿 遗留问题
往下加载数据偶尔会出现掉帧现象。
分析可能的原因是往下滑动加载下一页数据时接口数据回调回来后调用框架的CSCollectionViewDataManager类的addCardInstances方法在主线程耗时27ms左右导致掉帧。 心得体会
因为引起掉帧的因素是多方面的一开始无从查起可以先把最明显的一些优化点先改好再慢慢用排除法去定位哪些模块引起问题的从而再进一步针对的排查重构完一个单元进行一次自测从明显的关键问题入手分析改造采用排除法排除有问题的地方能快速定位问题但是要注意排除干扰因素比如排除抓包干扰抓包的时候界面会变的更加卡顿掉帧所以记得关掉antbox或者删除掉抓包相关的依赖库
排查过程中确保单一场景。比如列表往下滑和往上滑其实是不同的场景往下拉时会触发加载更多数据等一系列的动作应该分别去分析两个场景下引起掉帧的原因。 其他杂记
排查法检查卡顿点过程记录
单元模块排除法找出引起掉帧的主要因素
场景
1、往下拉
2、往上回拉
前提注释播放器play和stop逻辑注释起播加速
步骤
1、注释topview所有组件只留下bottomview
测试滑动效果
往下滑动时仍然会掉帧
网上滑动不掉帧
结论
1、可能商品图片加载引起掉帧
2、加载新数据引起掉帧
进一步测试注释商品图片加载代码
测试滑动效果
往下滑动加载新数据还是会有些许掉帧 —— 加载新数据有可能存在阻塞主线程的方法
往上滑动不掉帧 2、 放出_introView图片和渐变背景先隐藏
测试滑动效果
往下滑动加载新数据有些掉帧
往上滑动基本不掉帧再次往下滑动也基本不掉帧了 3、 放出tagviewlottie先隐藏
测试滑动效果同上 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 平均耗时46ms 遗留的问题
记得看下预览的cell是否有离屏渲染问题预加载图片两次调查一下原因打了两次log加载出错时重新加载逻辑貌似现在没有启播加速放到异步线程— 发现不影响reloadWithThemeConfigVO应该没有必要每加载一次都去拉取可以优化addCardInstances耗时是否真的影响列表渲染播放器的播放会掉帧注释掉播放器完全不掉帧 —— 播放器没有停止播放会引起掉帧往下加载数据注释掉预加载图片的代码还是会掉帧说明预加载图片不是引起掉帧的原因MLPLiveRecommendView里也有个image但是这样的数据很少没必要放到预加载图片 结论一二
解决播放器引起的掉帧问题滑动过程中没有停止播放 发现的问题
已解决
cell上的lottie动画组件没有复用cell上有大量的removeFromSuperView可能导致卡顿代码可以优化是为了避免数据重复在prepareForReuse里使用可以换成在这里刷新数据圆角设置的方式导致离屏渲染
未解决
滑动结束一堆的cell调用了stopfeeds接口请求参数exclContentIds随着分页数增加数组越来越大是必要传的吗一直刷新内存爆掉闪退可能不是这个模块的问题 重构风险点
1、preview类型数据没有自测过记得mock数据自测2、有recommend的数据也没自测过3、为了本地跑真机在工程文件里去掉了一个purchase的勾选并提交了4、开关mock数据测试一下开关是否生效5、测试一下开关是在什么场景下生效每次进入直播广场6、偶现刷着刷着闪退 待解决的问题
1、找到检测卡顿的工具 —— instruments的animation hitch 用iphone7iOS14可以录制 新学到的知识点
同一父视图重复调用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有背景颜色时并且背景颜色的透明度为1opaque的值不影 响性能。
3、UIVIew没有背景颜色时opaque的值不影响性能。
CALayer的opacity 耗时点
卡顿检测工具使用测试代码熟悉过程Cell模版注入原理多亏师兄的指点缩短了理解时间每修改完一个组件需要花大量时间mock数据模拟各种场景和参数自测采用排除法测试是哪个组件导致卡顿时注册掉一个加载图片的组件发现流畅很多但是分析代码不知道什么原因导致卡顿然后一顿排除测试 怀疑是imageview的背景色设置MLP_C_FFFFFF_NODARK导致的 怀疑是图片资源的问题更换了资源确实卡顿好很多 但是最后发现断开antbox连接后卡顿好很多可删除APMockData库减少干扰编译瓶颈 Xcode调试成为瓶颈(模拟器看离屏渲染有时跑不起来;修改一次代码编译要好几分钟)发现注释代码后编译时间变长取消注释的代码编译时间也很长什么代码也没改重新编译时间也很长看来编译时间可能跟网络环境有关同样的电脑同样的工程不一样的网络环境 后记
参考文档
Instruments性能检测Instruments性能检测 - 简书
Animation HitchiOS 底层原理39Instruments系列三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离屏渲染原理及优化 · Tenloys Blog
设置圆角性能测评
iOS设置圆角的4种方法实例附性能评测
卡顿原理和解决方案iOS 深入理解列表卡顿原理和滑动优化方案_苹果手机上的列表滑动问题-CSDN博客
图片的渲染过程与优化非常有用iosiOS图片的渲染过程与性能优化 - 简书
