Optimización del rendimiento (1) Optimización Caton

¡Trabajar juntos para crear y crecer juntos! Este es el día 27 de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de agosto", haga clic para ver los detalles del evento

Este artículo comienza con el proceso de cómo Apple representa la imagen en la pantalla en la parte inferior, para analizar más a fondo el principio de la congelación de la pantalla y, finalmente, resolver la congelación de la pantalla.

contenido principal:

1. principio caton
2. optimización catónica
3. representación fuera de pantalla

1. Principio de Catón

1.1 Principio de la pantalla CRT

El cañón de electrones escanea línea por línea de arriba a abajo. Una vez que se completa el escaneo, es un marco de imagen y luego regresa a la posición inicial para la siguiente ronda de escaneo, realizando así la visualización de la imagen. La pantalla necesita obtener los datos mostrados cada vez que escanea, por lo que debe sincronizarse con el controlador de video del sistema.La pantalla usará el reloj de hardware para generar una serie de señales de tiempo para la sincronización.

Hay dos tipos de señales de temporización, una es la señal de sincronización horizontal (HSync) y la otra es la señal de sincronización vertical (VSync).

proceso de dibujo

1. Listo para escanear cada línea emite una señal HSync
2. Después de que llega la señal VSync, el hilo principal comienza a calcular el contenido en la CPU, incluida la creación de vistas, el cálculo del diseño, la decodificación de imágenes, el dibujo de texto, etc. El contenido calculado se envía a la GPU
3. La GPU realiza la transformación, la composición, el renderizado y coloca los resultados del renderizado en el framebuffer (frameBuffer)
4. El controlador de video leerá los datos del búfer de cuadros línea por línea después de que llegue la siguiente señal VSync
5. Una vez completada la lectura, se realiza una cierta conversión de digital a analógico y se pasa a la pantalla para su visualización.
6. En pocas palabras, después del cálculo de la CPU y la representación de la GPU, los datos del cuadro se almacenarán en el área del búfer del cuadro, y luego el controlador de video leerá los datos en el área del búfer del cuadro y lo pasará a la pantalla después de digital. conversión a analógico.
7. Cuando se completa un cuadro y el siguiente cuadro está listo para dibujarse, se emitirá un VSync

Diagrama de proceso:

Aviso:

• La pantalla generalmente actualiza la pantalla a una frecuencia fija, es decir, el momento en que se completa cada cuadro. Esta frecuencia de actualización es la señal de sincronización vertical (VSync)

1.2 El principio de visualización en pantalla

Comprender principalmente el mecanismo de sincronización vertical

如果只有一个帧缓冲区，帧缓冲区的读取和刷新都有较大的效率问题。因此通常需要引入双缓冲机制，也就是两个帧缓冲区，GPU会预先渲染好一帧放入到帧缓冲区，视频控制区进行读取，在读取的过程中，就可以将新渲染好的一帧放到另一个帧缓冲区，这样就可以一直不停的进行刷新帧缓冲区，而当视频控制器读取完成，GPU会主动的把指针指向第二个缓冲区，这样读取和刷新帧缓冲区的效率都提高了。

但上面的双缓冲机制有一个很大的问题，就是GPU会一直不停的将渲染好的一帧数据放到帧缓冲区中，并且在提交完成后，会主动的把指针指向第二个缓冲区，这样如果此时视频控制器还未读取完成，比如读取到一半，下一半就变成了下一帧的数据，就会造成画面撕裂现象。

正因为帧缓冲区的帧数据混用造成画面撕裂问题，需要引入垂直同步机制。也就是说，之前显示器只是把垂直水平信号同步到了视频控制器，垂直同步机制直接同步到了GPU

理解： GPU会等待显示器发出垂直水平信号（VSync）后，才进行新的一帧渲染和缓冲区更新

本质： 帧缓冲区的更新和读取时同时进行，而且都收到VSync信号的控制，读取上一个帧数据时，更新下一个帧数据

1.3 卡顿（掉帧）原理

在垂直同步机制下就会出现卡顿现象。

上面所说的垂直同步机制，需要VSync到来时，更新帧数据，下一个VSync到来时，会读取这次更新的帧数据。而如果下一个VSync到来时，因为CPU或GPU的原因，帧数据还没有更新到帧缓冲区，就会继续读取上一个帧数据，在一个VSync时间内显示了两次帧数据，就会造成卡顿现象。

CPU和GPU都会阻碍显示流程，都会造成掉帧现象

2. 卡顿优化

分为两类，CPU和GPU。

2.1 CPU资源消耗原因和解决方案

基本原则有两个：第一是避免使用不必要的操作，第二是必需的操作尽量放到后台执行。

避免不必要的操作：

1. 对象创建
   1. 原因：对象的创建会分配内存、设置属性等操作比较消耗CPU资源，如果是反射机制就消耗的更多
   2. 解决：
      1. 使用轻量级的对象代替重量级的对象
      2. 推迟对象创建的时间，并把多个对象的创建分散到多个任务中，不要集中创建
      3. 如果对象可以复用，可以放到一个缓存池中复用
      4. 也就是说，如果用功能较少的对象可以完成任务，就不要用功能很多的对象了
   3. 例如：CALayer比UIVIew要轻量许多，如果不涉及事件响应，只需要显示，就可以用CALayer来代替UIView
2. 纯代码编码
   1. 原因：storyboard创建视图对象消耗资源会比直接使用代码创建对象要大的非常多
   2. 解决：可以考虑使用纯代码编码
3. 对象调整
   1. 原因：设置属性会消耗比较多的资源，所以需要避免频繁的设置属性
   2. 解决：尽量避免减少不必要的属性修改
   3. 例如：尤其是给UIView重设 属性时，比如frame时，其实都是设置了CALayer的属性，而CALayer是没有属性的，是通过方法动态解析实现的，临时为对象创建的一个属性，这非常消耗资源，所以应减少给UIView重置大小等操作
   4. 尽量避免调整视图层次，添加和移除视图，UIView、CALayer之间会出现很多方法调用与通知
4. Autolayout
   1. 原因：对于复杂视图会产生严重的性能问题
   2. 解决：可以手动调整属性

必需的操作放到后台执行

1. 对象销毁
   1. 原因：如果大量的对象进行销毁，也会占用一定的资源
   2. 解决：可以放到后台去释放对象
   3. 例如：在一个集合中保存有大量的对象，销毁这个集合时就会同时销毁这些对象，尽量放到后台去执行
2. 布局计算
   1. 原因：视图布局的计算是最为常见的消耗CPU资源的地方
   2. 解决：可以在后台提前计算好视图布局，并进行缓存
   3. 例如：UIView的属性设置，尽量在后台计算好，一次性调整好属性
3. 文本宽高计算
   1. 原因：文本的宽高计算会占用很大一部分资源，并且不可避免
   2. 解决：使用[NSAttributedString boundingRectWithSize:options:context:] 来计算文本宽高，用 -[NSAttributedString drawWithRect:options:context:] 来绘制文本，并且这两个方法需要放入到后台线程执行
   3. 也可以高度缓存
4. 文本渲染
   1. 原因：所有的文本内容控件在底层都是通过CoreText实现的，而它的排版和绘制都是在主线程中，所以当显示大量文本的时候，CPU的压力会非常大
   2. 解决：在底层的CoreText对文本进行异步绘制
5. 图片解码
   1. 原因：创建图片时，图片的数据并不会立即解码，而是在提交到GPU前CGImage中的数据才会得到解码，而且是在主线程中执行，所以会产生较多的消耗
   2. 解决：常见的做法是，先在后台把图片绘制到CGBITmapContext中，然后从bitmap直接创建图片

2.2 GPU资源消耗原因和解决方案

GPU：GPU是用图像处理器，它处理的内容都在显存中

消耗资源原因和解决方案

1. 纹理的渲染
   1. 问题1：如果短时间内显示大量的图片，不管是提交到显存的过程，还是GPU进行渲染都要消耗不少GPU资源
   2. 解决1：尽量避免短时间内显示大量的图片，尽可能的将多张图片合成为一张进行显示
   3. 问题2：当图片过大，超过GPU的最大纹理尺寸，CPU会进行预处理，会对CPU和GPU带来额外的资源消耗
   4. 解决2：图片和视图大小不要超过纹理尺寸上限（4096*4096）
2. 视图的混合
   1. 问题：多个视图叠在一起显示，GPU会首先把他们混合到一起再渲染，如果视图结构太过复杂，在混合的过程中也就会消耗资源了
   2. 解决：减少视图数量和层级
3. 图像绘制
   1. 问题：CALayer的border、圆角、阴影、遮罩（mask）等显示通常会触发离屏渲染，GPU在进行离屏渲染就会消耗一定的资源
   2. 解决：
      1. 尽量使用已经设置好的图片，不用GPU去进行设置。
      2. 把需要显示的图形在后台线程回执未图片，避免使用圆角、阴影、遮罩等属性

3. 离屏渲染

La representación fuera de pantalla significa que la GPU abre un nuevo búfer fuera de pantalla además del búfer de pantalla actual para la representación.

Porque cuando terminamos de renderizar la capa y necesitamos realizar algunas operaciones, como configurar esquinas redondeadas, sombras, desenfoque gaussiano, etc., los datos del cuadro previamente almacenados en el búfer de cuadros ya no están allí, por lo que debemos abrir un off- tampón de pantalla para almacenar datos para estos estados intermedios.

Cuando todas las capas se procesan en el búfer fuera de la pantalla, los datos se extraen de cada búfer fuera de la pantalla y se realizan operaciones como configurar esquinas redondeadas, y luego se combinan y almacenan en el búfer de cuadros.

Pros y contras:

El costo del renderizado fuera de pantalla

1. Abrir un nuevo búfer fuera de la pantalla ocupará espacio y consumirá recursos
2. Cambiar de contexto también consume muchos recursos
3. Obviamente, la representación fuera de pantalla esperará hasta que todas las operaciones de capa estén configuradas antes de almacenarlas en el búfer de cuadros, lo que llevará más tiempo y es propenso a tartamudear.

beneficio:

1. Para los datos que aparecen varias veces, se pueden procesar por adelantado para lograr el propósito de reutilización.
2. Efectos especiales, necesita usar el búfer fuera de la pantalla para guardar el estado intermedio