认识flutter

• flutter是一个UI SDK(Software Development Kit)
• 可以进行移动端(ios,Android),web端(Beta),桌面,跨平台(technical preview)解决方案
• 移动端目前已经很多公司在用了,Google,阿里，腾讯
• 特别是阿里的咸鱼团队,为flutter做了非常多的贡献
• flutter它是有一统大一统大前端的野心的，并且它正在侵蚀ios,Android这些原生开发

flutter的特点

• Google公司在国内做过很多宣讲，其中多次提到flutter的几个特点:美观，快速，高效，开放
• 美观:使用Flutter内置美丽的Material Design和Cupertion widget( 什么是widge,不着急t)，丰富的motion API，平滑而自然的滑动效果和平台感知，为您的用户体验带来全新体验
• 快速:Flutter的UI渲染性能很好，在生成环境下，Flutter将代码编译程机器码执行,并充分利用GPU的图形加速能力,因为使用Flutter开发的移动应用即使在低配手机上也能实现每秒60帧UI渲染速度,Flutter引擎使用c++编写,包括高效的Skia 2D渲染引擎,Dart运行时和文本渲染库
• 高效:Hot Reload(热重载),在前端已经不是什么新鲜的东西，但在移动端之前一直是没有的
• 开放:Flutter是开放的，是一个完全开源的项目

跨平台历史

• 我们知道，任何一种技术的出现都是为了解决之前技术的痛点，其实在长久以来一直在寻找一种跨平台的解决方案
• 跨平台解决方案经历的历史

平台独立开发

最初

• 完整的软件系统需要移动端
• IOS端和Android和IOS端需要使用Java,Kotlin来进行开发,使用java开发Android会更多一些;(Android开发工程师)
• 对于公司来说成本其实是非常高的

解决方案一:webview

• 基于javascript会webview是跨平台解决方案，代表框架有PhoneGap,Apache,Cordova，lonic等等,自主要是通过HTLM来构建自己的页面，再将其显示在各个平台的webview中；
• 但是它默认是不能调用本地的一些服务的(比如相机,蓝牙等),所有需要通过javascript进行桥接调用Native的一些代码来完成某些功能;但是它本身的体验，性能并不理想，而且在开发过程中的坑是非常多的
  出现了;

解决方案二:React Native

• 在寻求最佳跨平台解决方案的时候，无疑是React Native是之前最优秀的一个,React Native(简称RN)是Fackbook于2015年4月开源的跨平台移动应用开发框架,是FaceBook早先开源的JS框架React在原生移动应有平台的衍生产物，目前支持ios和安卓两大平台
• RN使用javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉web前端开发的技术人员只需要很少的学习就可以进入移动应用开发领域
• 并且在保留基本渲染能力的基础上，用原生自带的ui组件来实现核心的渲染引擎，从而保证了良好的渲染性能
• 但是，由于RN的本质是通过javascript VM调用原生接口,通信是相对毕竟低效，而且框架本身不负责渲染，而是间接通过原生进行渲染
  

跨平台的终极解决方案三：Flutter

• 我们直接看下面这幅图来对比flutter - native - rn的区别
• Flutter利用Skia绘图引擎，直接通过CPU、GPU进行绘制，不需要依赖任何原生的控件
• Android操作系统中，我们编写的原生控件实际上也是依赖于Skia进行绘制，所以flutter在某些Android操作系统上甚至还要高
  于原生（因为原生Android中的Skia必须随着操作系统进行更新，而Flutter SDK中总是保持最新的）
• 而类似于RN的框架，必须通过某些桥接的方式先转成原生进行调用，之后再进行渲染。
  

Flutter绘制原理图

• GPU将信号同步到 UI 线程
• UI 线程用Dart来构建图层树
• 图层树在GPU 线程进行合成
• 合成后的视图数据提供给Skia 引擎
• Skia 引擎通过OpenGL 或者 Vulkan将显示内容提供给GPU
  

图像显示

• 首先，你需要知道，我们在屏幕上可以看见的所有内容都是计算机绘制出来的图像，包括GIF图片，还是操作系统给我们看见的图形化界面中的画面，都是图像
• 但是为什么我们看见的不是一幅幅图像,这是因为它播放的速度非常快，研究表明;当图片的播放频率超过16帧时，人眼就会感觉很流畅，低于16帧时，会感觉到卡顿
• 图片间隔越小，帧数越大，我们给会感觉越流程
• 还要区分两个概念:
• 1.帧率(fps):Framles Per Second
• 刷新率:显示器的频率,比如ipone的60hz，ipad pro的120hz

频率和刷新率的问题

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

双重缓存（Double Buffer）

• 为了解决单缓存的“tearing”问题，就出现了 双重缓存和 VSync ；
• 两个缓存区分别为 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（画面停顿，甚至空白）。
• 蓝色代表 CPU 生成 Display List；
  p 绿色代表 GPU 执行 Display List 中的命令从而生成帧；
• 黄色代表生成帧完成，在屏幕上显示；
• 双缓存模型中：
• CPU生成蓝色B的数据，由GPU进行B的绘制，但是这个过长由于过长，那么第二个A就产生了Jank。
• B在屏幕上显示之后，发出Vsync信号，A开始绘制，但是由于绘制时间过长，第二个B位置又产生了Jank
  

三重缓存（Triple Buffer） - 了解

• 如何解决双重缓存的问题了？
• 在第二个A展示，Vsync信号发出后，直接绘制C Buffer
• 在第一个B展示，Vsync信号发出后，绘制A Buffer
• 因为C已经在缓存中，可以直接从缓存中取出C Buff来进行展示，依次类
  推
• 其实本质是在每次Vsync信号发出后，多缓存一个Buffer作为备用
• 现在你可以回头再看Flutter绘制原理图了
  

渲染引擎skia

• Skia就是 Flutter向 GPU提供数据的途径。
• Skia（全称Skia Graphics Library（SGL））是一个由C++编写的开源图形库
• 能在低端设备如手机上呈现高质量的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 平台上的渲染效果是完全一致的。

大前端学不动系列

• 很多人看到Google的flutter框架的时候，第一反应就是：别出新东西了，实在学不动了。
• 客户端开发者：从Android到iOS，或者从iOS到Android，到RN，甚至现在越来越多的客户端开发者接触前端相关知识（Vue、React、Angular、小程序）
• 前端开发者：从jQuery到AngularJS，到三大框架并行：Vue、React、Angular，还有小程序，甚至现在也要接触客户端开发
  （比如RN、Flutter），包括TypeScript、Webpack、uniapp、Nodejs。
• 大前端开发就是，不像服务器一样可能几年甚至几十年还是那一套的东西，新技术会层出不穷。
• 但是每一样技术的出现都会让惊喜，因为他必然是解决了之前技术的某一个痛点的，所以我们要学会拥抱这种变化。
• 并且很多知识在学习的过程中，你会发现他们都是相同的，并不是说都要从头再来，最重要的是建立属于自己的知识体系。

flutter环境搭建

操作系统选择

• 学习阶段： Windows或者macOS（苹果操作系统）都是可以的
• 开发阶段： 一般需要使用macOS，因为我们需要针对iOS进行调试，通常方便起见还是选择macOS

安装Flutter SDK

• Flutter SDK下载地址： https://flutter.dev/docs/development/tools/sdk/releases 选择自己的操作系统和最新稳定的版本（Stable版本）