吹吹Flutter

时间:2021-7-21 作者:qvyue
一、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。

吹吹Flutter
image.png

帧率和刷新率的关系:
CPU/GPU向Buffer中生成图像,屏幕从Buffer中取图像、刷新后显示出来。这是一个典型的生产者 - 消费者模型。
理想的情况是帧率和刷新频率相等,每绘制一帧,屏幕显示一帧,但是实际往往它们的大小是不同的。如果没有锁来控制同步,很容易出现问题。比如,当帧率大于刷新频率,当屏幕还没有刷新第 n-1 帧的时候,GPU 已经在生成第 n 帧了。从上往下开始覆盖第 n-1 帧的数据,当屏幕开始刷新第 n-1 帧的时候,Buffer 中的数据上半部分是第 n 帧数据,而下半部分是第 n-1 帧的数据,显示出来的图像就会出现上半部分和下半部分明显偏差的现象,通常称之为 “tearing”(撕裂)。

3、双重缓存(Double Buffer)
为了解决单缓存的“tearing”问题,就出现了双重缓存和垂直同步信号VSync。

吹吹Flutter
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(画面停顿,甚至空白)。

吹吹Flutter
image.png

蓝色代表 CPU 生成 Display List;绿色代表 GPU 执行 Display List 中的命令从而生成帧;黄色代表生成帧完成,在屏幕上显示。
在双缓存模型中:CPU生成蓝色B的数据,由GPU进行B的绘制,但是这个过长由于过长, 那么第二个A就产生了Jank。B在屏幕上显示之后,发出Vsync信号,A开始绘制,但是由于绘制时间过长,第二个B位置又产生了Jank。

4、三重缓存(Triple Buffer)

吹吹Flutter
image.png

其实三重缓存的本质就是在每次Vsync信号发出后,多缓存一个Buffer作为备用。

吹吹Flutter
image.png

如何解决双重缓存的问题?
在第二个A展示,Vsync信号发出后,直接绘制C Buffer;
在第一个B展示,Vsync信号发出后,绘制A Buffer;
因为C已经在缓存中,可以直接从缓存中取出C Buffer来进行展示,依次类推。

5、Flutter绘制原理图

吹吹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 平台上的渲染效果是完全一致的。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。