题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。
| column1 | column2 |
|---|---|
| CSDN | 网易云课堂教程 |
| 掘金 | EDU学院教程 |
| 知乎 | Flutter系列文章 |
本文章将讲述 CPU、GPU和显示器 显示图像的协作原理、Vsync 机制、Flutter Vsync 流程
1 图形绘制原理
显示器（屏幕）是由一个个物理显示单元(像素点)组成，而每一个像素点可以发出多种颜色，显示器成相的原理就是在不同的物理像素点上显示不同的颜色，最终构成完整的图像。
图形计算和绘制都是由相应的硬件来完成，操作系统一般封装了这些底层硬件操作指令，提供一些封装后的API以供操作系统之上的应用层调用。
然后再将操作系统原生API封装在一个编程框架和模型中，然后定义一种简单的开发规则来开发GUI应用程序，而这一层抽象，就是所谓的 UI 系统。
如Android SDK封装了Android操作系统API，提供了 UI描述文件XML+Java操作DOM的UI系统，而iOS提供了UIKit 系列对View的抽象操作。
1.1 CPU、GPU和显示器协作原理
CPU 全称 central processing unit 是计算机系统的运算和控制核心，是信息处理、程序运行的最终执行单元
GPU 全称 Graphics Processing Unit 是图形处理器，是一种专门在个人电脑、工作站、游戏机和一些移动设备（如平板电脑、智能手机等）上做图像和图形相关运算工作的微处理器
图形处理器一般由三部分组件：
1、显示主芯片显卡的核心，俗称GPU，它的主要任务是对系统输入的图像信息进行构建和渲染。
2、显示缓冲存储器用来存储将要显示的图形信息以及保存图形运算的中间数据。
3、RAMD/A转换器把二进制的数字转换成为和显示器相适应的模拟信号。
从最初诞生的计算机系统系统来讲，CPU、GPU和显示器以一种特定的方式协作：CPU将计算好的显示内容提交给 GPU，GPU渲染后放入帧缓冲区，它们是图像生产者，往帧缓冲区（BufferQueue） 不断填充数据， 显示器可以理解为消费者，然后以固定的频率从帧缓冲区取帧数据(BufferQueue)， 然后把渲染后的内容呈现到屏幕上，比如有个屏幕的刷新频率是 60Hz，也就是1秒内会去取60次数据。
显示器是以固定的频率刷新（从GPU取数据），是通过垂直同步信号（如VSync），60Hz的屏幕就会一秒内发出 60次这样的信号, 这个信号是用来同步 CPU、GPU 和显示器的工作的，即提示 CPU 和 GPU 进行下一帧工作的信号。
到后来移动设备的洗礼世界，每部手机类似一个小的计算机系统， Android系统每隔16.6ms发出VSYNC信号，来通知界面进行输入、动画、绘制等动作。
1.2 Vsync 机制
现在的显卡通常可以将CS的帧率渲染到120以上，即120FPS，FPS代表了GPU在一秒内绘制操作的帧数,120FPS代表1秒内绘制120帧，通常使用的显示器只能达到60HZ的刷新率，像这种情况，显卡在1秒内将画面变化了120次，但显示器只有展示其中60帧的能力，显然会丢掉一半的帧数，这种现象是图像的生产能力超出了显示能力，供过于求。
反之，显卡在1秒内将画面变化60次，但显示器有展示120帧的能力，这种就是供不应求，供不应求的情况下，容易产生卡顿的现象。
通过Vsync 机制可以很好的协调上述两种供过于求与供不应求的情况，Vsync 机制可以理解为是显卡与显示器的通信桥梁，显卡在渲染每一帧之前会等待垂直同步信号，只有显示器完成了一次刷新时，发出垂直同步信号，显卡才会渲染下一帧，确保刷新率和帧率保持同步，以达到供需平衡的效果，防止卡顿现象。
2 跨平台开发的 React Native
如下图所示为React Native的技术架构图，ReactJS，自身是不直接绘制UI的，而是调用原生组件执行页面渲染操作，Bridges是一个桥梁，是用来绘制指令给原生组件进行绘制的。
3 跨平台开发的 Flutter
与 React Native 使用原生组件渲染界面不同，Flutter并不需要使用原生组件来渲染界面，而是使用自带的渲染引擎（Engine层）来绘制页面组件，如下图所示Flutter的技术架构简图。
Flutter 引擎部分Engine是用C++开发的，Skia部分是开源的二维图形库，提供了适用于多种软硬件平台的通用API，Skia作为渲染/GPU的角色。
在 Flutter 的 Engine 层向 Dart 层的暴露了 Canvas, PictureRecorder 等接口，利用这些接口可以绘制自己想要的图像。
通过直接调用 API 绘制图像，这种更像指令式操作。
在 Flutter 中，通过Flutter Sdk 提供的 Widget 组件组件，可以构建出精美的图像布局，这些 widget 并不是最终显示在 界面的组件，就像 ReactNative 的虚拟 DOM 一样。
每一个一个 Widget 构建 到最终显示在显示器上图像主要经历了三个阶段： Widget --> Element --> RenderObject
关于 Widget、Element、RenderObjec 的绘制过程 将会在 公人号 biglead 我的大前端生涯 中下一节中更新。
4 Flutter Vsync 流程
flutter 中Vsync通信机制如下图所示：
完毕