UI渲染回顾简单笔记

UI渲染的简单过程:

CPU,GPU,显示器协同工作,CPU 中计算显示内容,比如视图的创建、布局计算、图片解码、文本绘制等,然后将计算结果提交给GPU,由 GPU 进行变换、合成、渲染。随后 GPU 会把渲染结果提交到帧缓冲区去,随后等待下一次 VSync(垂直同步信号) 到来时,视频控制器会逐行读取帧缓冲区的数据,经过可能的数模转换传递给显示器显示。由于垂直同步的机制,如果在一个 VSync 时间内,CPU 或者 GPU 没有完成内容提交,则那一帧就会被丢弃,等待下一次机会再显示,而这时显示屏会保留之前的内容不变。这就是界面卡顿的原因。CPU 和 GPU 不论哪个阻碍了显示流程,都会造成掉帧现象。所以开发时,也需要分别对 CPU 和 GPU 压力进行评估和优化。

渲染时机:

Core Animation 在 RunLoop 中注册了一个 Observer 监听 BeforeWaiting(即将进入休眠) 和 Exit (即将退出Loop) 事件 。当在操作 UI 时,比如改变了 Frame、更新了 UIView/CALayer 的层次时,或者手动调用了 UIView/CALayer 的 setNeedsLayout/setNeedsDisplay方法后,这个 UIView/CALayer 就被标记为待处理,并被提交到一个全局的容器去。当Oberver监听的事件到来时,回调执行函数中会遍历所有待处理的UIView/CAlayer 以执行实际的绘制和调整,并更新 UI 界面。

UI优化方案:

1 性能敏感界面,少用Storyboard

2 对象尽可能复用,减少对象创建,释放的次数

3 对view应该尽量减少不必要的属性修改。应该尽量避免调整视图层次、添加和移除视图。可以通过隐藏,显示来控制

4 布局方面:尽量提前计算好布局,在需要时一次性调整好对应属性,而不要多次、频繁的计算和调整这些属性。

5  Autolayout 对于复杂视图来说常常会产生严重的性能问题。随着视图数量的增长,Autolayout 带来的 CPU 消耗会呈指数级上升

6 尽量减少在短时间内大量图片的显示,尽可能将多张图片合成为一张进行显示。

7 应用应当尽量减少视图数量和层次,也可以用上面的方法,把多个视图预先渲染为一张图片来显示。

8 CALayer 的 border、圆角、阴影、遮罩(mask),CASharpLayer 的矢量图形显示,通常会触发离屏渲染(offscreen rendering),而离屏渲染通常发生在 GPU 中。避免使用圆角、阴影、遮罩等属性。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏深度学习自然语言处理

matplotlib--python的数据可视化入门

在平时做实验的时候,往往为了让数据更直接的表达一个趋势或为了描绘一种关系,经常会用到画图,再加上我们经常用的语言是pyhon居多,所以,作为python中的画图...

35010
来自专栏腾讯云商业智能分析团队的专栏

如何使用高亮、表格渲染

本文将详细介绍如何对表格中的数据种类设置高亮,以及设置表格渲染,希望对大家有所帮助。

2150
来自专栏极客生活

数据分析Excel技能之求和

鼠标选中 B8单元格 -> 开始 -> 编辑 -> 自动求和,excel会自动感应要求和的行和列。

722
来自专栏生信小驿站

R语言之可视化①⑥一页多图(2)目录

cowplot包是ggplot2的简单附加组件。 它旨在为ggplot2提供一个出版物就绪的主题,这个主题需要最少量的轴标签尺寸,情节背景等。对'ggplot2...

1231
来自专栏落影的专栏

iOS开发-视图渲染与性能优化

前言 关于iOS的视图渲染流程,以及性能优化的建议。 源于WWDC视频。 我假设你是一个这样的开发者: 了解OpenGL ES; 了解view hierar...

4877
来自专栏iOS开发笔记

深入探究frame和bounds的区别以及setbounds使用

在iOS开发中经常遇到两个词Frame和bounds,本文主要阐述Frame和bound的区别,尤其是bound很绕,很难理解。 1 首先,看一下公认的资料 ...

3034
来自专栏邵靖的专栏

使用 plotly 绘制数据图表

不少小伙伴在开发过程中都有对模块进行压测的经历,压测结束后大家往往喜欢使用Excel处理压测数据并绘制数据可视化视图,但这样不能很方便的使用web页面进行数据展...

1.3K6
来自专栏向治洪

FLAnimatedImage -ios gif图片加载框架介绍

简介 FLAnimatedImage 是 Flipboard 团队开发的在它们 App 中渲染 GIF 图片使用的库。 后来 Flipboard 将 FLAni...

3237
来自专栏哲学驱动设计

任务记录:OEA 框架中的多类型树控件

    11年11月我主要对 OEA 框架中 WPF 自动界面生成模块中多类型树型表格控件进行重构,并同时支持更多的功能。这样,整个 OEA 就不再使用 Dat...

2127
来自专栏腾讯社交用户体验设计

web图像的常见应用策略与技巧

1101

扫码关注云+社区

领取腾讯云代金券