iOS高级资深工程师面试篇系列 - 已更新3篇
UI部分1/3 -UITableView-事件传递&视图响应
UI部分2/3 -图像显示原理-UI卡顿&掉帧
UI部分3/3 -UIView绘制原理-离屏渲染

技术:iOS底层原理、事件传递、视图响应、图像显示原理、UI卡顿&掉帧、UIView绘制原理、离屏渲染

《iOS高级资深工程师面试知识总结》 UI部分2/3 -图像显示原理-卡顿&掉帧

  • 一、图片显示原理
    • ❓面试考点: 图片显示原理相关内容
    • 1.1、图片显示原理 - CPU、GPU
    • 1.2、CPU和GPU分别做了什么事情
    • 1.3、CPU和GPU承担哪些责任
      • 1.3.1 CPU主要承担`Layout`、`Display`、`Prepare`、`Commit`
      • 1.3.2 GPU主要承担`OpenGL的渲染管线`
  • 二、UI卡顿&掉帧
    • ❓面试考点 - UI卡顿&掉帧的原因是什么呢
    • UI卡顿&掉帧: 总结一句话
    • 滑动优化方案 - `高级面试问题`
    • ❓面试考点 - 基于Tableview、ScrollView的滑动优化都有哪些方案 `基于CPU和GPU进行优化`

一、图片显示原理

❓面试考点: 图片显示原理相关内容
1.1、图片显示原理 - CPU、GPU

CPU和GPU是两个硬件都是通过总线连接起来的。

  1. 在CPU中,我们往往输出结果往往是一个位图
  2. 在GPU总线,在合适的时候上传到GPU
  3. 在GPU拿到位图之后,做图片的渲染和纹理的合成。
  4. 之后把结果。放到帧缓冲区中。也就是Frame Buffer。
  5. 再由视图控制器根据位信号,在指定时间之前,去帧缓存区中提取屏幕显示内容。
  6. 然后最终显示到我们显示器中。
1.2、CPU和GPU分别做了什么事情

我们创建一个UIView的时候
UIView的显示部分 是由 CALayer控制器

  1. CALayer里面包含一个属性 contents .就是我们需要显示在屏幕里面的一个位图
  2. 比如我们设置UILabel的文本叫 Hello World
  3. 系统在合适的时候去回调CALayer的drawRect方法
  4. 绘制号的内容
    经过 Core Animation框架的提交给OPenGL(ES)的渲染管线
    进行最终的渲染和纹理的合成。最终显示到屏幕上
1.3、CPU和GPU承担哪些责任
1.3.1 CPU主要承担LayoutDisplayPrepareCommit


CPU的Layout

  1. 布局
  2. 文本计算
    对应代码的frame计算。size的计算

CPU的Display

  1. 绘制 - 其中drawRect方法就是发生在这个当中

CPU的Prepare- 准备阶段

  1. 图片的编解码
    使用到的ImageView。设置Image的时候。图片往往是否不能直接到屏幕上面的。需要对图片进行一个解码。而解码动作就是发生在图片编解码这个过程当中

CPU的Commit

  1. 提交位图到GPU里面
1.3.2 GPU主要承担OpenGL的渲染管线

  1. 首先对图片设置一个顶点着色
  2. 图元装配
  3. 光栅化
  4. 片段着色
  5. 片段处理
  6. 最终会把上面5点存储到缓冲区中。最后等到实例控制器去缓冲区中提取到最终要在屏幕当中要显示的内容
    以上几点可能对日常开发的小伙伴接触不多。因为很少接触

如果对OpenGL模块研究。对上面的知识点就有所了解。

二、UI卡顿&掉帧

❓面试考点 - UI卡顿&掉帧的原因是什么呢

vSync 垂直信号
我们在页面滚动的时候。
一般说的60fps 。指的就是页面上有60帧的更新。指的就是流畅性

  1. 也就是说每个16.7ms(毫秒)会产生1帧画面的更新。
  2. 那么 CPU和GPU 在这16.7ms 共同携程完成这一帧画面的数据。
  3. 比如说CPU花费一定的时间 做一些 文本的布局UI计算、包括视图设计、以及图片解码 然后把最终产生的结果提交给位图
  4. 再由GPU 进行相应的一些 图层的合成纹理渲染、准备好下一帧的画面
  5. 然后到下一帧的卫星信号的到来时候。就可以显示一个画面。
    上面是一个时间均匀分配。性能做的比较好的情况。
  6. 如果上面在第三步 也就是CPU 花费的一定的时间比较长。留给第四步GPU的时间就比较短了。那么GPU要把哪些图层合成、纹理渲染准备完成的话。那么总时间就超过了16.7ms。
  7. 那么在下一帧到来的时候。还没准备。可能就会产生掉帧。然后我们看到的效果就是一个滑动的卡顿。
UI卡顿&掉帧: 总结一句话

如果16.7ms时间内没有完成CPU和GPU共同完成准备的画面。那么就会产生掉帧或者卡顿。


滑动优化方案 - 高级面试问题
❓面试考点 - 基于Tableview、ScrollView的滑动优化都有哪些方案 基于CPU和GPU进行优化
  1. CPU
    1.1 对象创建、调整、销毁 - 存放在子线程里面操作
    1.2 预排版(布局计算、文本计算) - 存放在子线程里面操作
    1.3 预渲染(文本等异步绘制,图片编解码等)
  2. GPU
    2.1 纹理渲染 - 触发离屏渲染。
    离屏渲染 - 就会产生Layer的圆角,包括masksToBounds的设置。包括一些应用的蒙层都会触发GPU的离屏渲染。此时GPU的工作量就会比较庞大。
    我们可以对GPU进行尽量的优化。比如避免离屏渲染。同时我们可以依托CPU的异步绘制的机制减轻GPU的压力
    2.2 视图混合 - 比如我们视图有多个层级。那么视图就要做一个视图混合。合成每一个像素点的像素值。需要做大量的计算。
    我们可以减少视图层级。从而减轻视图混合的压力。也可以通过CPU的异步绘制机制来达到提交的位图本身就是一个层级非常少的视图。减轻GPU的压力

【iOS高级资深工程师面试篇】①、2022年,金九银十我为你准备了《iOS高级资深工程师面试知识总结》 UI部分2/3 -图像显示原理-UI卡顿掉帧相关推荐

  1. 【iOS高级资深工程师面试篇】①、2022年,金九银十我为你准备了《iOS高级资深工程师面试知识总结》 UI部分3/3 -UIView绘制原理-离屏渲染

    iOS高级资深工程师面试篇系列 - 已更新3篇 UI部分1/3 -UITableView-事件传递&视图响应 UI部分2/3 -图像显示原理-UI卡顿&掉帧 UI部分3/3 -UIVi ...

  2. 【iOS高级资深工程师面试篇】⑪、2022年,金九银十我为你准备了《iOS高级资深工程师面试知识总结》 算法部分 字符串反转-链表反转-有序数组组合-Hash算法-查找两个子视图的共同父视图

    iOS高级资深工程师面试篇系列 - 已更新3篇 UI部分1/3 -UITableView-事件传递&视图响应 UI部分2/3 -图像显示原理-UI卡顿&掉帧 UI部分3/3 -UIVi ...

  3. 【iOS高级资深工程师面试篇】⑫、2022年,金九银十我为你准备了《iOS高级资深工程师面试知识总结》 第三方库部分 AFNetworking-SDWebImageView-ReactiveCocoa

    iOS高级资深工程师面试篇系列 - 已更新3篇 UI部分1/3 -UITableView-事件传递&视图响应 UI部分2/3 -图像显示原理-UI卡顿&掉帧 UI部分3/3 -UIVi ...

  4. 【iOS高级资深工程师面试篇】②、2022年,金九银十我为你准备了《iOS高级资深工程师面试知识总结》 Objective-C语言特性部分1/2 分类-关联对象-扩展-代理

    iOS高级资深工程师面试篇系列 - 已更新3篇 UI部分1/3 -UITableView-事件传递&视图响应 UI部分2/3 -图像显示原理-UI卡顿&掉帧 UI部分3/3 -UIVi ...

  5. 【iOS高级资深工程师面试篇】④、2022年,金九银十我为你准备了《iOS高级资深工程师面试知识总结》 内存管理部分2/2 引用计数-弱引用-自动释放池-循环引用

    iOS高级资深工程师面试篇系列 - 已更新3篇 UI部分1/3 -UITableView-事件传递&视图响应 UI部分2/3 -图像显示原理-UI卡顿&掉帧 UI部分3/3 -UIVi ...

  6. 阿里内网最新发布“M8”级Java面试笔记,助力金九银十

    眼下虽然才6月份,但真正的金九银十已经悄然开始.从认识的HR那得知,有些公司甚至在过年前就开始布局了..而年前偃旗息鼓的,年后也势必加速进入这波抢人大战! 附面试思维导图: 因此,真的要等到9.10月 ...

  7. 看完946页“JAVA高级架构面试必问”,金九银十社招全拿下

    前言 我本科毕业后在老东家干了两年多,老东家算是一家"小公司"(毕竟这年头没有 BAT 或 TMD 的 title 都不好意思报出身),毕业这两年多我也没有在大厂待过,因此找坑的时 ...

  8. 【前端面试题】2021秋招+金九银十,看完这些就够了 最新前端面试总结 68道前端面试题,助你进大厂

    文章目录 1.MVC 是什么 2.MVVM 是什么 3.vue 双向绑定原理 4.angular 双向绑定原理 5.单向绑定 与 双向绑定的好处和劣势 6.Vuex 是什么 7.Vuex 原理 8.V ...

  9. 最新Java面试真题,备战金九银十。

    Java基础题(34道) 1.面向对象和面向过程的区别 2.Java语言有哪些特点 3.关于JVMJDK和JRE最详细通俗的解答 4.OracleJDK和OpenJDK的对比 5.Java和C++的区 ...

最新文章

  1. 《统一沟通-微软-实战》-5-部署-SharePoint Server 2010
  2. WinCE文件目录定制
  3. C# 调用SQL的存储过程的接口及实现
  4. PHY以太网自动协商原理
  5. 004-docker常用命令[二]-容器操作ps,top,attach,export
  6. windows下的_mkdir函数
  7. android学习笔记42——图形图像处理2——绘图
  8. 【Python】单引号、双引号、三引号和字符串
  9. 更新yum源却忘了生成缓存 造成每次启动机器报:the package list needs to be rebuilt...
  10. 2022年QQ微信内置浏览器 UA 标识, Header 获取
  11. 抛弃Eclipse,投入IDEA 的独孤求败江湖
  12. 【渝粤教育】广东开放大学 领导学基础 形成性考核 (38)
  13. 【附源码】Java计算机毕业设计校园博客系统(程序+LW+部署)
  14. 如何有效练习英语口语
  15. js 排序,push,pop,shit,unshit(),splice(),随机打乱数组,随机方法总结
  16. 万由nas风扇速度控制
  17. 中英双语界面的 Premiere Pro
  18. 检测胰岛素含量,是衡量动物模型生理状态的基本指标
  19. Linux系统引导过程及引导修复详解
  20. 巴菲特致股东的一封信:1982年

热门文章

  1. 潜在类别分析之R语言篇
  2. 微信小程序的去中心化正在无限拓展社交电商场景和边界
  3. excel2010多个窗口互相独立同屏显示方法
  4. rocketmq 提示不支持sql
  5. SQL server 初印象
  6. matplotlib横向条形图(barh、get_width、get_y)
  7. matlab在图片上画圆_在Matlab中识别的图像周围画一个圆圈
  8. 阴阳师攻略- 萌新入坑阴阳师怎么玩
  9. SpringBoot相比传统Spring,有哪些优势?
  10. 【机器学习PAI实战】—— 玩转人工智能之你最喜欢哪个男生?...