iOS上的UI是如何渲染出来的？ 深入浅出UIKit渲染

我们在代码中写的View、Image等组件，最终是如何一步步渲染到屏幕上的呢？触摸、动画等是如何实现的？我们可以利用这些知识做哪些优化呢？

本文先从屏幕物理层原理出发，一步步介绍渲染流程，然后介绍iOS的UIKit框架设计，最后介绍如何利用这些知识做优化

先看第一步，屏幕是如何非常细腻的展示图片的

屏幕上的数据是如何一步步渲染出来的？

屏幕的显示原理

我们知道，所有的颜色都可以通过三原色红蓝绿来展示出来，在屏幕上也是一样，屏幕设备上的每个像素点，如果我们把它放大，那么可以看到3个滤光片组成的，简单理解是这样子的

屏幕类型主要是LCD和OLED，他们的发光原理不同，但是抽象起来就是通过RGBA四个参数的调整来做最后的显示。
PS： 如果对两种屏幕的原理感兴趣的话，可以看下这个视频

[video(video-9IgXCWLT-1714361636297)(type-undefined)(url-undefined)(image-https://img-blog.csdnimg.cn/editor-video.png)(【硬核科普】全网最简洁易懂的OLED与LCD屏幕工作原理与优劣科普
)]

知道了屏幕的显示原理之后，我们就会想到一个问题，那屏幕的RGBA四个参数是从哪里来的呢？ 答案是GPU

GPU

在计算机结构的设计中，CPU主要负责逻辑运算，而GPU就负责图片渲染的运算。 GPU从硬件上支持T&L（Transform and Lighting，多边形转换与光源处理），相比通用计算的CPU来讲，其有两个优势：

• 处理图片计算的能力要强的多，因为硬件支持T&L
• 并发能力比CPU也要大
  详细对比如下：
  

GPU的渲染流程大致如下：

针对屏幕的硬件能力，GPU会根据其FPS来组织数据，比如常见的FPS是60，那么GPU每1/60秒内就要提供一次渲染数据供绘制，如果没能及时提供数据，那么就会出现该帧没有重绘，给用户的感觉就是出现了卡顿

从上图可以看到，最终输入GPU的其实还是一堆数据，那么这堆数据是谁给GPU的呢？

GPU的数据从哪里来 - OpenGL和Metal

在不同的系统上会有不同的答案，针对iOS的UIKit，答案就是OpenGL和Metal

OpenGL是苹果最初的采用的渲染框架，其具有跨平台、性能好，包大小可控等优点，但是随着图形技术的发展，其他也暴露出很多问题：

• 现代 GPU 的渲染管线已经发生变化。
• 不支持多线程操作。
• 不支持异步处理。

因此苹果重新设计了Metal框架，其优势如下：

• 更高效的 GPU 交互，更低的 CPU 负荷。
• 支持多线程操作，以及线程间资源共享能力。
• 支持资源和同步的控制。

PS： 具体的两者间细节对比，可以