Flutter学习
Flutter简介
Flutter是什么？
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
- flutter是一个UI SDK
- flutter可以进行移动端（iOS、Android）、web端使用，解决跨平台问题
在解决跨平台上，我们使用的有：webView、RN
现在，最新的Flutter也出来了，那么，相比较前两个，flutter有哪些特点和优势呢？
Flutter的特点
flutter具有：美观、快速、高效、开放等特点
快速： flutter的UI渲染性能很好。在生产环境下，flutter将代码编译成机器码执行，并充分利用GPU的图形加速能力，因此，即使在低配手机上也能实现60帧的UI渲染速度。
fultter引擎使用C++编写，包括高效的Skia 2D渲染引擎，Dart运行时和文本渲染库
高效： Hot Reload(热重载)，前段已经有，移动端还没有
开放： Flutter是一个完全开源的项目
因此，相比较webView和RN，Flutter在性能上更优。
图像显示过程
在学习前，我们先了解下图像在手机或者电脑上是如何显示的
首先，我们在屏幕上看到的所有内容都是计算机绘制出来的图像
也就是，不管是图片还是视频，其实都是图像
当图像在一秒钟超过16张的时候，人眼看到的图像就是连续的
也就是16张/秒
16张/1000ms = 1张/62.5ms
也就是1张图像最多要在62.5ms内出现一次，就不会造成卡顿现象。
帧率：Frames Per Second(fps)。当帧率大于16时，图像是连续的。
刷新率：显示器的频率(每秒钟刷新多少次)，比如iphone的60Hz、ipad Pro的120Hz
帧率和刷新率的关系
帧率和刷新率的关系，可以使用下图来表示：
Skia 可以 给GPU提供数据；（Skia可以提供，但并不是只有Skia才能提供）
GPU负责绘制图像；
绘制完图像后将该图像放在Buffer(缓冲区)
屏幕在刷新的时候，会从Buffer中取出图像并显示
也就是：
CPU/GPU向Buffer中生产图像；
屏幕从Buffer中取图像、刷新后显示
这是一个典型的生产者-消费者模型
理想情况下，帧率与刷新率是一致的，即每绘制一帧，屏幕就显示一帧图像
但现实是。。。两者往往是不一致的，这就会产生问题：
如果帧率大，屏幕刷新率小，在没有同步锁的参与情况下，有可能取出的图片是上面是覆盖的新图片，下面是没有被覆盖的老图片，这种现象被称为==“tearing”(撕裂)==
buffer是从上往下覆盖显示的
但如果使用同步锁的话，消耗性能太大
针对这种情况，设计了双重缓存（Double Buffer）
双重缓存（Double Buffer）
双重缓存有两个缓存，Back Buffer和Front Buffer
注意：图中的Frame Buffer应该为Front Buffer
可参考：
图形渲染中关于CPU和GPU的一些问题？
GPU向Back Buffer中写数据，屏幕从Front Buffer中读数据
Vsync信号负责调度从Back Buffer到Front Buffer的复制操作
底层并不是copy复制操作，而是内存地址的修改
工作流程大致是：
- 在某个时间点，一个屏幕刷新周期完成，Vsync信号产生，先完成复制操作，然后 通知CPU/GPU绘制下一帧图像
- 复制操作完成后，屏幕开始下一个刷新周期，即将刚复制到Front Buffer的数据显示到屏幕上
在这种模型下，只有当Vsync信号产生时，CPU/GPU才会开始绘制
注意：双缓存与Surface里的On-Screen Rendering、Off-Screen Rendering不一样
双缓存也不是完美的，也会在某种情况下，发生某些问题
例如，当CPU/GPU绘制一帧的时间过长（比如超过16ms）时，会产生Jank（画面停顿，甚至空白）
为了解决双重缓存产生的问题，又有三重缓存，这里就不做介绍了，有兴趣的同学可以搜一下
如果帧率小，屏幕刷新率大，那么也有可能会造成画面卡顿现象
渲染引擎skia
Skia就是Flutter向GPU提供数据的途径
Skia是一个由C++编写的开源图形库
Skia已经是Android官方的渲染引擎，因此Android直接使用Flutter Android SDK渲染
Flutter学习过程
- Dart语言基础
- Flutter实战技术学习
- Flutter底层技术、源码阅读
