看yykit大神的博客，设计到了垂直同步和双缓存，因此这里就查下资料，作为记录

垂直同步

帧数和显示器刷新率的概念

帧数:就是在1秒钟时间里传输的图像质量，也可以理解为图形处理器（GPU）每秒钟能够渲染出新图像的次数，通常用FPS表示.每一帧都是显卡渲染出的静止图像，快速连续的播放显示帧变呈现出动态影像的假象。简而言之，帧数就是改变图像的速度，只要显卡性能强大，图像就会越来越流畅。

显示器刷新率：显卡所渲染出来的画面与我们直接的视觉感官之间，需要用显示器来进行传递，所以显示器刷新率对我们的视觉体验有很大影响。显示器刷新率就是指每秒刷新画面的次数，也就是频率，单位是Hz。现在我们所用的液晶显示器，一般都是60Hz的刷新率，也有更高的适用于电竞游戏的85Hz、144Hz甚至是240Hz。

帧数和刷新率的关系

其实是这样的，电脑每显示一张画面是分两个步骤完成的，第一步是CPU和显卡把所要显示的画面数据计算出来，第二步是示器把这些数据写入到屏幕上去。这两步都是需要时间的，并且两个过程可以同时完成（因为具体实现这两个过程的硬件是相对独立的）。
但是这两个过程所花费的时间并不是相同的。显卡每秒能计算出的画面数量是根据硬件性能决定的，而显示器的每秒刷新频率是固定的。比如一个60Hz的显示器，每过16.67ms（毫秒）就会刷新一次。所以这时就产生了一个问题，显卡输出画面的数量低于或者高于显示器刷新率会怎么样呢？这就引出了另一个概念：垂直同步。

垂直同步的作用

如果我们开启垂直同步，显卡绘制3D图形前会等待垂直同步信号，当该信号到达时，显卡开始绘制3D图形，如果显卡性能较为强劲，在下个垂直同步信号到来之前已经完成了对该帧的渲染，显卡就会暂停处理，等下个垂直同步信号到来后才开始渲染下一帧。通俗的来讲，垂直同步就是让显卡每秒输出的帧数等于显示器的刷新率。垂直同步是用来防止画面撕裂的，反之，关闭垂直同步就会出现撕裂、跳帧的情况。

下面来说一下上面提出的问题。垂直同步会把显卡帧率锁定为预期的显示器刷新率（通常是60Hz），当我们显卡输出的帧数高于显示器刷新率时，会有一部分的帧数不会呈现在显示器上，也就是会有浪费帧的情况。如果我们的显卡功能不够每秒渲染60幅画面的能力，垂直同步功能会把显卡帧率下调到能整除60的数字，可能是30或者更低，这时也就没有再开启垂直同步的必要了。
其实显示器刷新的时候，并非是整个屏幕同时进行，而是从最上面的一行像素开始，逐行向下刷新，所以从顶端到最底部是有时间差的，虽然这个时间很短，但是在高速运动的游戏当中，就会被放大并且被我们感知到，特别是在帧数高于刷新率的时候尤为明显。所以就会出现当显示靠上部分开始显示下一帧时，靠下的部分还停留在上一帧的图像，也就是画面撕裂。所以这时需要垂直同步技术，也就是等到整个画面在垂直方向上完全刷新完成，电脑才会渲染下一帧的图像，以保证每幅画面都能完整的显示出来。

如果只是简单的使用垂直同步技术，我们能看出来，要是帧率低于60的时候，可能会出现一些问题，为了解决这个问题，采用缓存技术。

双缓存

双缓存的作用

双缓冲甚至是多缓冲，在许多情况下都很有用。一般需要使用双缓冲区的地方都是由于“生产者”和“消费者”供需不一致所造成的。这样的情况在很多地方后可能会发生，使用多缓冲可以很好的解决。

例 1. 在网络传输过程中数据的接收，有时可能数据来的太快来不及接收导致数据丢失。这是由于“发送者”和“接收者”速度不一致所致，在他们之间安排一个或多个缓冲区来存放来不及接收的数据，让速度较慢的“接收者”可以慢慢地取完数据不至于丢失。

例2. 在图形图像显示过程中，计算机从显示缓冲区取数据然后显示，很多图形的操作都很复杂需要大量的计算，很难访问一次显示缓冲区就能写入待显示的完整图形数据，通常需要多次访问显示缓冲区，每次访问时写入最新计算的图形数据。而这样造成的后果是一个需要复杂计算的图形，你看到的效果可能是一部分一部分地显示出来的，造成很大的闪烁不连贯。而使用双缓冲，可以使你先将计算的中间结果存放在另一个缓冲区中，但全部的计算结束，该缓冲区已经存储了完整的图形之后，再将该缓冲区的图形数据一次性复制到显示缓冲区。

双缓存原理

双缓存

显示缓冲区是和显示器一起的，显示器只负责从显示缓冲区取数据显示。我们通常所说的在显示器上画一条直线，其实就是往该显示缓冲区中写入数据。显示器通过不断的刷新（从显示缓冲区取数据），从而使显示缓冲区中数据的改变及时的反映到显示器上。

这也是显示复杂图形时造成闪烁的原因，比如你现在要显示从屏幕中心向外发射的一簇射线，你开始编写代码用一个循环从0度开始到360度，每隔一定角度画一条从圆心开始向外的直线。你每次画线其实是往显示缓冲区写入数据，如果你还没有画完，显示器就从显示缓冲区取数据显示图形，此时你看到的是一个不完整的图形，然后你继续画线，等到显示器再次取显示缓冲区数据显示时，图形比上次完整了一些，依次下去直到显示完整的图形。你看到图形不是一次性完整地显示出来，而是每次显示一部分，从而造成闪烁。

解决上述闪烁的现象，我们可以在内存中开辟一块空间，我们可以编写代码首先将屏幕中心向外发射的一族射线先写入内存中，再将完整的图像一次性的输入到显示缓冲区中。

双缓存页交换技术

基于双缓冲机制可以实现页交换。

image.png

如上图所示，此时由于处于初始状态，画图操作的结果都在后缓冲区中，而屏幕上显示的则是前缓冲区中的内容。此时画图操作尚未完成。

画图操作完成之后，页转换操作开始执行，示意图如图所示：

image.png

如上图所示，画图操作结束，下一个画图操作的结果保存对象指向前缓冲区，屏幕的显示对象指向后缓冲区，此时前缓冲区变成实际意义上的后缓冲区，后缓冲区变成实际意义上的前缓冲去，即实现“页交换”操作。

image.png

ios的双缓存编码

所谓“屏幕双缓冲”是指在内存中建立一个“图形设备上下文的缓存”，所有的绘图操作都在这个“图形上下文缓存”上进行，在需要显示这个“图形上下文”的时候，再次把它更新到屏幕设备上。

iPhone平台提供了这样一个API：

CGContextRef CGBitmapContextCreate (
   void *data,
   size_t width,
   size_t height,
   size_t bitsPerComponent,
   size_t bytesPerRow,
   CGColorSpaceRef colorspace,
   CGBitmapInfo bitmapInfo
);

这就是创建双缓存的api ，就是bitmap图了

• 参数data指向绘图操作被渲染的内存区域，这个内存区域大小应该为（bytesPerRow×height）个字节。如果对绘制操作被渲染的内存区域并无特别的要求，那么可以传递NULL给参数date。系统自动分配空间，自动释放
• 参数width代表被渲染内存区域的宽度。
• 参数height代表被渲染内存区域的高度。
• 参数bitsPerComponent被渲染内存区域中组件在屏幕每个像素点上需要使用的bits位，举例来说，如果使用32-bit像素和RGB颜色格式，那么RGBA颜色格式中每个组件在屏幕每个像素点上需要使用的bits位就为32/4=8。
• 参数bytesPerRow代表被渲染内存区域中每行所使用的bytes位数。
• 参数colorspace用于被渲染内存区域的“位图上下文”。
• 参数bitmapInfo指定被渲染内存区域的“视图”是否包含一个alpha（透视）通道以及每个像素相应的位置，除此之外还可以指定组件式是浮点值还是整数值。

CGBitmapContextCreate 基本使用

- (void)viewDidLoad {
    [super viewDidLoad];
    
    const CGSize size = CGSizeMake(100, 100);
    const size_t bitsPerComponent = 8;
    const size_t bytesPerRow = size.width * 4;
    CGContextRef context =   CGBitmapContextCreate(NULL, size.width, size.height, bitsPerComponent, bytesPerRow, CGColorSpaceCreateDeviceRGB(),
                                                   kCGImageAlphaPremultipliedLast);
    
    CGContextSetRGBFillColor(context, 1, 0, 0, 1);
    CGContextFillRect(context,CGRectMake(0, 0, 40, 40));
    CGImageRef image =    CGBitmapContextCreateImage(context);
    
    UIImage  *imageRef = [UIImage imageWithCGImage:image];
    
    UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
    imageView.image = imageRef;
    [self.view addSubview:imageView];
    
    self.view.backgroundColor = [UIColor yellowColor];
    
    // Do any additional setup after loading the view, typically from a nib.
}

image.png

具体使用不做详细介绍

iPhone 手机产生卡顿的原因

image.png

在 VSync 信号到来后，系统图形服务会通过 CADisplayLink 等机制通知 App，App 主线程开始在 CPU 中计算显示内容，比如视图的创建、布局计算、图片解码、文本绘制等。随后 CPU 会将计算好的内容提交到 GPU 去，由 GPU 进行变换、合成、渲染。随后 GPU 会把渲染结果提交到帧缓冲区去，等待下一次 VSync 信号到来时显示到屏幕上。由于垂直同步的机制，如果在一个 VSync 时间内，CPU 或者 GPU 没有完成内容提交，则那一帧就会被丢弃，等待下一次机会再显示，而这时显示屏会保留之前的内容不变。这就是界面卡顿的原因。