CPU & GPU
- CPU: 中央处理器（CPU，central processing unit）作为计算机系统的运算和控制核心，是信息处理、程序运行的最终执行单元——取至CPU百度百科
- GPU：图形处理器（英语：Graphics Processing Unit，缩写：GPU），又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些移动设备（如平板电脑、智能手机等）上做图像和图形相关运算工作的微处理器。——取至GPU百度百科。
其实CPU是可以替代GPU进行图形渲染，但是效率方面相差很大！
有一个比较有意思的视频可以直观的展示CPU与GPU绘图的区别：一个实验告诉你CPU与GPU的区别，你知道吗？
我怕时间长视频会无法播放，所以我截取了视频中的两部分做成了gif图。（这里对视频制作者说声抱歉，截取gif只是为了学习相关的知识点目的！）
cpu绘图.gif
GPU绘图.gif
通过两个gif图可以证明使用GPU进行图形渲染的原因——效率。GPU是并行计算的方式，将图形结果计算出来并显示到屏幕的像素上。
计算机通过渲染的方式将像素点绘制到屏幕上，而渲染过程中最常用的技术就是光栅化。
GPU渲染图形流程
GPU渲染流程
- 顶点着色器，将顶点数据作为输入，将顶点放到指定的位置上，并对顶点做一些基础处理。
- 图元装配，以第一步的输出作为输入，将所有的顶点装配成图元。图元就是基本图形元素。任何图形都由若干个图元组成，本例中的图元就是三角形。
- 几何着色器，此过程可能会过滤一些图元（进行裁剪），还可能会增加一些图元（增强现实效果）。
- 光栅化，将图元映射到最终的像素点上。生成片段。
- 片段着色器，片段和像素点关系是一一对应的，片段中的信息要多余像素点。片段中记录了对应像素点、颜色和像素点的深度值等等。在片段着色器中，通过这些数据确认像素点要显示的颜色。并且还会对片段进行剪切，例如剪切掉超出视图意外的数据，提高后面操作的效率。
- 测试与混合，与其他层级像素点之间进行颜色的混合，此处会参考透明度和深度值等等信息，最终确定像素点的颜色。
屏幕图像显示原理
百度图片CRT显示器
CRT显示器中有一个电子枪，以从左到右，从上到下的方式扫描，屏幕分辨率越高，需要扫描的点数就越多，对电子枪扫描频率的要求就更高。一次扫描结束后，会到左上角原点，此时显示器显示一帧画面。如图：
CRT显示器原理
CPU将图形任务分配给GPU，GPU把渲染好的图片存入缓冲区，视频控制器按照一定的频率显示到屏幕上。这个频率其实是显示器发出的一个信号，叫做垂直同步信号VSync。作用是屏幕显示完一帧画面后再切换到下一帧的显示工作。
image.png
由于单缓冲区的会有很大的效率问题，进而发展成了双缓冲区机制，如图：
双缓冲区机制
GPU会把一帧数据存入到一个缓冲区中，等待视频控制器读取，此时把下一帧的数据存入到另一个缓冲区中，让视频控制器去读取另一个缓冲区中的数据。
双缓冲解决了效率问题，但是引起了另一个问题。画面撕裂问题。如图：
画面撕裂现象
出现的原因是双缓冲机制下，GPU存入缓冲区后视屏控制器读取缓冲数据，通知显示器展示内容。上面介绍过的显示器的显示要从左往右，从上往下的顺序扫描，这个需要一定的时间。如果显示器正在扫描一半的时候，GPU新一帧数据已经制作完成并通知视频控制器读取缓冲数据，视屏控制器通知显示器，显示器上一帧只读取到了一半，就切换到新一帧内容进行继续扫描，会出现屏幕中上面显示旧一帧画面，下面展示新一帧画面，进而出现了撕裂情况。
解决办法其实还是用垂直同步的方式（VSync），也就是等待显示器显示完全后，通知GPU进行下一帧的相关操作。这样能解决画面撕裂现象，也增加了画面流畅度，但需要消费更多的计算资源，也会带来部分延迟。
iOS 渲染框架
- UIKit是开发者比较常用的框架，可以在屏幕上放置很多控件。但是UIKit主要是负责用户操作事件的响应（UIView继承与UIResponder）和事件传递相关工作。
- Core Animation不仅仅是用来做动画，甚至可以说动画只是它的冰山一角。Core Animation的职责是尽可能快地组合屏幕上的可视内容，这些内容可被分解成独立的图层，也就是CALayer。所以说CALayer才是能看到屏幕上一切的基础。
- Core Graphics基于 Quartz 高级绘图引擎，主要应用场景是运行时绘制图片。
- Core Image与Core Graphics相反，属于运行前创建图片。
UIView与CALayer
前面说到CALayer才是用户在屏幕上看到一切的基础。UIView为什么也能展示视图到屏幕上呢？
因为 UIKit 中的每一个 UI 视图控件其实内部都有一个关联的 CALayer。由于这种一一对应的关系，视图层级拥有 视图树 的树形结构，对应 CALayer 层级也拥有 图层树 的树形结构。
视图树进行添加或者删除，对应的图层树也会进行添加或者删除。
iOS之所以设计成这样的目的是为了职责分离。在iOS和macOS中，用户的操控方式不一样，iOS中是触控屏的方式，Mac上是键盘鼠标的方式。iOS中是UIKit和UIView，macOS中是APPKit和NSView。行为上类似，但是实现起来是不同的。用户行为不同个，但是图形展示方式相同，苹果将图形展示CALayer独立出来为在两大平台服务。
网友评论