如何做一个流畅的UI 组内分享记录
前提 最近做了一次组内分享,这个 idea 来自去沪江的分享会听到的,学到了一些,也分享给组内的小伙伴.
###什么是卡顿? 这件事要从RunLoop开始,RunLoop是一个60FPS[注1]的回调,也就是说每16.7ms绘制一次屏幕,也就是我们需要在这个时间内完成缓冲区创建,缓冲区内容的绘制这些是CPU的工作;然后把缓冲区交给GPU渲染,这里包括了多个View的拼接(Compositing),纹理的渲染(Texture)等等,最后Display到屏幕上。但是如果你在16.7ms内做的事情太多,导致CPU,GPU无法在指定时间内完成指定的工作,那么就会出现卡顿现象,也就是丢帧。 ####用户能感受到的卡顿: 1.页面的 FPS 降低,滑动时有困顿; 2.页面卡死,无法响应; 3.主线程的 Runloop 执行了很久; ####可能是什么原因导致了卡顿: 1.死锁:主线程拿到锁 A, 需要锁 B;子线程拿到锁 B,需要锁 A,相互等待导致死锁; 2.抢锁:主线程需要读取 DB,子线程在插入数据. 3.主线程大量 IO. 4.主线程大量计算. 5.大量的UI、复杂的UI绘制.
###屏幕的成像原理
iOS的显示系统是由 Vsync 脉冲信号驱动的, Vsync 脉冲信号由硬件时钟生成,大约每秒钟发出60次, iPhone 采用的双缓冲,安卓在4.1之后是三缓冲.[注2] 通常来说,计算机系统中的 CPU,GPU, 显示器的协同工作是: 1.CPU 计算好显示内容提交到 GPU; 2.GPU 渲染完成后将渲染结果放入 Back Buffer(第一缓冲区); 3.然后等待显示器发的垂直同步信号(VSync),Frame Buffer(第二缓冲区)copy 第一缓冲区的显示内容 4.显示屏经过数模转换显示出来. 所以要避免卡顿就要在16.7ms 内完成第一缓冲区的创建,所以我们所能做的优化绝大部分要在CPU,GPU这两部分. ###如何使页面流畅 ####从CPU入手: 先看看CPU要做的事情: 1.对象创建; 2.布局计算; 3.复杂算法; 4.AutoLayout; 5.文本图片的绘制; 这仅仅是列出一小部分CPU的工作,可以尝试如何从以上几条来优化: 1.对象创建:对象的创建会分配内存、调整属性、文件的 IO等操作,这些都比较占 CPU的资源,如果一个 对象的创建会分配内存、调整属性、甚至还有读取文件等操作
####从GPU入手: GPU的职责:根据CPU提供的内容进行渲染,输出到屏幕上. 在 Core Animation的组成部分中, OpenGL ES 是直接调用 GPU 进行渲染的.它有两种渲染方式:
- On-Screen Rendering
- Off-Screen Rendering:是指GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作.
#####为什么离屏渲染会带来性能消耗? 1.创建新的缓冲区 2.多次上下文切换 #####离屏渲染的触发方式 1.光栅化(shouldRasterize)[注3] 2.遮罩(masks) 3.阴影(shadows) 4.不透明(opacity) 5.圆角
###更多可优化点:
- 异步绘制
- 算法优化
- AsyncDisplayKit
- ...
###参考文档
- 沪江技术沙龙的一篇 session
- ibireme的 blog
###Q&A
###注: 注1.FPS是图像领域中的定义,是指画面每秒传输帧数,通俗来讲就是指动画或视频的画面数。FPS是测量用于保存、显示动态视频的信息数量。每秒钟帧数愈多,所显示的动作就会愈流畅
注2.通常来说,计算机系统中 CPU、GPU、显示器是以上面这种方式协同工作的。CPU 计算好显示内容提交到 GPU,GPU 渲染完成后将渲染结果放入帧缓冲区,随后视频控制器会按照 VSync 信号逐行读取帧缓冲区的数据,经过可能的数模转换传递给显示器显示
注3..当一个列表视图中出现大量圆角的 CALayer,并且快速滑动时,可以观察到 GPU 资源已经占满,而 CPU 资源消耗很少。这时界面仍然能正常滑动,但平均帧数会降到很低。为了避免这种情况,可以尝试开启 CALayer.shouldRasterize 属性,但这会把原本离屏渲染的操作转嫁到 CPU 上去。
如何做一个流畅的UI 组内分享记录相关推荐
- 在线作图丨绘制一个含饼图的组内网络分析图(Network Analysis)
前几期小编给大家介绍了如何做一个组间网络分析图(Network Analysis) 在线作图丨绘制组间网络分析(Network Analysis),有小伙伴希望小编更新一期组内互作网络的说明.所以,它 ...
- 用R来做一个临床研究亚组分析的森林图
在编程语言里R语言最强大的功能是做图功能,我们知道在做Meta分析的时候会需要做森林图,实际上我们在很多临床研究中也经常看到森林图,主要是亚组分析的森林图,比如下面这篇文章里的一个森林图: 今天就教教 ...
- 用python来做一个五子棋游戏,源码分享~
五子棋的规则大家肯定都了解,也是大家在百忙之中娱乐的一部分,也都在网上玩过五子棋的游戏,那么大家有没有想过自己编写一个五子棋游戏呢.很多人都感觉做"游戏"这个词汇听着就很难,不知道 ...
- 用python做五子棋游戏_用python来做一个五子棋游戏,源码分享~
五子棋的规则大家肯定都了解,也是大家在百忙之中娱乐的一部分,也都在网上玩过五子棋的游戏,那么大家有没有想过自己编写一个五子棋游戏呢.很多人都感觉做"游戏"这个词汇听着就很难,不知道 ...
- Scratch与数学·概率:做一个抽奖的小程序!分享文章领书籍啦!
头部好书推荐: 前言:之前我们公众号做了很多期的活动,大多数都是留言点赞的形式进行排名,最后发现中奖前几名都是常客.所以我们用scratch做了一个抽奖小程序,会随机从所有满足留言条件(留言赞数必须大 ...
- 自己做一个短链服务,设计思路分享!
其实实现短链服务并不是很难,最主要还是需要知道一些设计思路,还需要有一些基础技术知识,例如:哈希算法.全局发号器等. 下面一起来学习如何设计一个短链服务吧! 短链的价值 网址大家都知道,很长的一串字符 ...
- 组内分享slide 【about 3D】
请用webkit内核的浏览器查看以下slide,左右拖拽即可.(_blank的demo若有问题,请刷新下) 转载于:https://www.cnblogs.com/hongru/archive/201 ...
- 组内Linq培训记录
注: 由于该培训是在组内分享,先写成了Word,而word中的代码都以截图方式呈现了,而在博客园不能很方便的粘贴截图进来,所以我用插入代码的方式加进来,如果文中说"如下图"或&qu ...
- 从零开始做一个SLG游戏(四):UI系统之主界面搭建
地图部分也已经算是可以告一段落了,也需要仔细考虑下接下来该做哪个系统.地图部分可以算是六边形地图的SLG游戏最主要的一部分,所以先做了下练练手. 接下来的工作更多的需要从项目的全局角度来考虑该怎么做. ...
最新文章
- 高德地图2020最新版下载导航wince_导航定位错误致青城山严重拥堵,高德地图回应:已优化...
- hibernate教程--检索方式(hql,sql,QBC)
- 8、mybatis之增删改查
- 【科普】不同行业的常见数据分析的指标是什么?
- 【JS 逆向百例】Fiddler 插件 Hook 实战,某创帮登录逆向
- ECMAScript 6 之 let 和 const 命令
- iphone保修期多久_小心!iPhone翻新机,黑机,妖机,1978机千万别买!
- 计算机组成原理—地址码
- linux拨号上网的命令,CentOS 6.4 电信ADSL拨号上网网络配置
- WPS2016专业版
- 使用laravel搭建博客网站-博客的注册功能
- 最全压力传感器分类及工作原理!
- 学UI设计出来可以从事什么工作?
- “有点笨”的数学大师迈克尔·弗里德曼
- 计算机网络拓扑图的描述,计算机网络拓扑结构 以下关于星型网络拓扑结构的描述正确的是______。 (多选题 )...
- 一个比较全的vim命令
- 7-2 统计英文字母和数字字符[2]
- MFC与Windows编程
- android 微信 https 证书,微信https未授权证书究竟是什么意思
- 红旗linux考试,红旗Linux认证考试介绍
热门文章
- matlab和python哪个好学_python和matlab哪个难
- python修改数据库_python mysql修改数据库数据库
- php jquery grid,jQuery Grid
- ThreadPoolExecutor线程池的理解与应用
- AndroidStudio中提示:This project uses AndroidX dependencies, but the ‘android.useAndroidX‘ property is
- Angular中数据循环ngFor、条件判断ngIf、ngSwitch、执行事件(click)、表单事件(keyup)、ngClass、ngStyle的使用
- Android入门教程免费获取
- Winform中在ZedGraph中最多可以添加多少条曲线
- SqlServer还原数据库时提示:异常终止,不能在此版本的SQL Server中启动,因为它包含分区函数
- Linux-常用系统管理命令