一、Flutter是什么
首先，我们来思考一下，Flutter是什么 ？用谷歌大大的话来说，Flutter是一个UI Software Development Kit，可以进行移动端（包括iOS、Android）、Web端、桌面开发的跨平台解决方案。
很明显，Flutter的野心在于一统大前端，确实也一直在不断侵蚀iOS和Android原生开发。目前国内很多公司的移动端都在用Flutter进行开发了，特别是阿里的咸鱼团队，将Flutter在国内”发扬光大“了。
Flutter之所以能被大家广泛的接受，其优势肯定也是不言而喻了，简单概括起来就是：
1、 美观
使用Flutter内置美丽的Material Design和Cupertino widget、丰富的motion API、平滑而自然的滑动效果和平台感知，可以给用户带来全新的体验。
2、快速
Flutter的UI渲染性能很好。在生产环境下, Flutter将代码编译成机器指令执行，并充分利用GPU的图形加速能力，因此使用Flutter开发的移动应用即使在低配手机上也能实现每秒60帧的UI渲染速度。
Flutter引擎使用C++编写，包括高效的Skia 2D渲染引擎，Dart运行和文本渲染库。
3、高效
Hot Reload，即热重载，在前端应用较多，但之前在移动端一直都是没有的（用起来不要太爽）。
4、开放
Flutter是完全开源的项目。
二、Flutter产生的原因
其实任何一种技术的出现，都是为了解决之前技术的痛点，当然Flutter也不例外。
从最初来看，想要开发一套完整的软件系统，需要两个移动端：iOS端和Android端，这对公司来说成本其实是非常高的。因此在很长一段时间内，市场都在需求一种移动端的跨平台解决方案，希望可以通过开发一套代码实现同时运行在iOS和Android两个系统上的应用程序。
1、webview
那最早出现的跨平台解决方案是webview，其框架是基于JavaScript和WebView的，代表框架有PhoneGap，Apache Cordova，Ionic等等。
原理主要是通过HTML来构建自己的界面，再将其显示在各个平台的WebView中。但是它默认是不能调用本地的一些服务的（比如相机、蓝牙等），所以需要通过JavaScript进行桥接调用Native的一些代码来完成某些功能。此外，它本身的体验和性能都不太理想，和原生无法相提并论，而且开发过程中的坑非常多，故而没有发展长远。
2、React Native
在寻求最佳跨平台解决方案的过程中，React Native可以说在这片江湖上曾掀起过一阵“腥风血雨“。
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。
RN使用JavaScript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。并且在保留基本渲染能力的基础上，用原生自带的UI组件实现核心的渲染引擎，从而保证了良好的渲染性能。
但是，由于RN的本质是通过JavaScript VM调用原生接口，通信相对比较低效，而且框架本身不负责渲染，而是间接通过原生进行渲染的。
3、Flutter
随之而来的，就是我们Flutter的出现了，它很可能就是我们长久以来所期待的跨平台终极解决方案。
简单来对比一下 Flutter - Native - RN 的区别：
- Flutter利用Skia绘图引擎，直接通过CPU、GPU进行绘制，不需要依赖任何原生的控件。
- Android操作系统中，我们编写的原生控件实际上也是依赖于Skia进行绘制，所以flutter在某些Android操作系统上甚至还要高于原生（因为原生Android中的Skia必须随着操作系统进行更新，而Flutter SDK中总是保持最新的）。
- 类似于RN的框架，必须通过某些桥接的方式先转成原生进行调用，之后再进行渲染。
三、Flutter绘制原理
在搞清楚Flutter绘制原理之前，我们先来搞清楚图像显示的原理。
1、图像显示原理
首先需要知道，我们在屏幕上可以看到的所有内容都是计算机绘制出来的图像。无论是视频还是GIF图片，还是操作系统给我们看到的图形化界面中的画面，都是图像。
那为什么我们看到的不是一幅幅图像，而是类似于动画的效果呢？这是因为它播放的速度非常快，就像我们小时候玩的快速翻书效果。研究表明：当图片连续播放的频率超过16帧（16张图片），人眼就会感觉非常流畅，当少于16帧时，会感觉到卡顿。所以我们平时看到的电影，通常都是24帧或者30帧的。
2、帧率和刷新率
但是理解了上面的东西之后，还是不能完全解释图片的整个显示过程，我们还需要区分两个概念：
帧率（fps）：Frames Per Second
刷新率：显示器的频率，比如iPhone的60Hz、iPad Pro的120Hz。
image.png
帧率和刷新率的关系：
CPU/GPU向Buffer中生成图像，屏幕从Buffer中取图像、刷新后显示出来。这是一个典型的生产者 - 消费者模型。
理想的情况是帧率和刷新频率相等，每绘制一帧，屏幕显示一帧，但是实际往往它们的大小是不同的。如果没有锁来控制同步，很容易出现问题。比如，当帧率大于刷新频率，当屏幕还没有刷新第 n-1 帧的时候，GPU 已经在生成第 n 帧了。从上往下开始覆盖第 n-1 帧的数据，当屏幕开始刷新第 n-1 帧的时候，Buffer 中的数据上半部分是第 n 帧数据，而下半部分是第 n-1 帧的数据，显示出来的图像就会出现上半部分和下半部分明显偏差的现象，通常称之为 “tearing”（撕裂）。
3、双重缓存（Double Buffer）
为了解决单缓存的“tearing”问题，就出现了双重缓存和垂直同步信号VSync。
image.png
两个缓存区分别为Back Buffer和Frame Buffer。GPU向Back Buffer中写数据，屏幕从Frame Buffer中读数据。
VSync信号负责调度从Back Buffer到Frame Buffer的复制操作，当然底层不是通过复制进行的，而是通过交换内存地址的方式，所以可以瞬间完成，效率非常高。
整个工程流程如下：
在某个时间点，一个屏幕刷新周期完成，垂直同步信号VSync产生，先完成复制操作，然后通知 CPU/GPU 绘制下一帧图像。复制操作完成后屏幕开始下一个刷新周期，即将刚复制到 Frame Buffer 的数据显示到屏幕上。
在这种模型下，只有当VSync信号产生时，CPU/GPU才开始绘制。
双重缓存的缺陷在于：当 CPU/GPU 绘制一帧的时间过长（比如超过16ms）时，会产生 Jank（画面停顿，甚至空白）。
image.png
蓝色代表 CPU 生成 Display List；绿色代表 GPU 执行 Display List 中的命令从而生成帧；黄色代表生成帧完成，在屏幕上显示。
在双缓存模型中：CPU生成蓝色B的数据，由GPU进行B的绘制，但是这个过长由于过长， 那么第二个A就产生了Jank。B在屏幕上显示之后，发出Vsync信号，A开始绘制，但是由于绘制时间过长，第二个B位置又产生了Jank。
4、三重缓存（Triple Buffer）
image.png
其实三重缓存的本质就是在每次Vsync信号发出后，多缓存一个Buffer作为备用。
image.png
如何解决双重缓存的问题？
在第二个A展示，Vsync信号发出后，直接绘制C Buffer；
在第一个B展示，Vsync信号发出后，绘制A Buffer；
因为C已经在缓存中，可以直接从缓存中取出C Buffer来进行展示，依次类推。
5、Flutter绘制原理图
Flutter绘制原理图.png
（1）GPU将信号同步到UI线程；
（2）UI线程用Dart来构建图层树；
（3）图层树在GPU线程进行合成 ；
（4）合成后的视图数据提供给Skia引擎；
（5）Skia引擎通过OpenGL或者Vulkan将显示内容提供给GPU。
这也是Flutter和React Native的本质区别：
React Native之类的框架，只是通过JavaScript虚拟机扩展调用系统组件，由Android和iOS 系统进行组件的渲染；而Flutter是自己完成了组件渲染的闭环。
6、渲染引擎skia
Skia（全称Skia Graphics Library（SGL））是一个由C++编写的开源图形库。它就是 Flutter向GPU提供数据的途径，能在低端设备如手机上呈现高质量的2D图形。最初由Skia公司开发，后被Google收购，应用于Android、Google Chrome、Chrome OS等等当中。
目前，Skia已然是Android官方的图像渲染引擎了，因此Flutter Android SDK 无需内嵌Skia引擎就可以获得天然的Skia支持；而对于iOS平台来说，由于Skia是跨平台的，因此它作为 Flutter iOS渲染引擎被嵌入到Flutter的iOS SDK中，替代了iOS闭源的Core Graphics/Core Animation/Core Text，这也正是Flutter iOS SDK打包的App包体积比Android 要大一些的原因。
底层渲染能力统一了，上层开发接口和功能体验也就随即统一了，开发者再也不用操心平台相关的渲染特性了。也就是说，Skia 保证了同一套代码调用在 Android 和 iOS 平台上的渲染效果是完全一致的。
网友评论