Flutter第四弹：Flutter图形渲染性能
目标：
1）Flutter图形渲染性能能够媲美原生？
2）Flutter性能优于React Native?
一、Flutter图形渲染原理
1.1 Flutter图形渲染原理
Flutter直接调用Skia。
Flutter不使用WebView，也不使用操作系统的原生控件,而是使用Google自身的2D渲染引擎Skia(目前 Google Chrome浏览器和 Android 均采用 Skia 作为其 2D 绘图引擎。)
1）Flutter将一帧录制成SkPicture（skp）送给skia进行渲染。
捕捉skp, 并利用 debugger.skia.org, 我们可以但不分析每一条绘图指令；
捕捉图片指令
flutter screenshot --type=skia --observatory-port=<port>Android原生应用：首先通过CPU数据计算，然后将数据发送给GPU,GPU根据相应的数据绘制成像素界面，然后放入帧缓存区中，最终显示器定时从帧缓存区获取帧数据显示在显示器上。
Flutter应用：与原生应用的渲染相同，应用 OpenGL 规范封装了一套 Dart API，计算数据，然后将数据传递给GPU进行处理。
1.2 Flutter性能优于React Native？
React Native是JS技术流的跨平台开发框架。
ReactNative 完全是基于原生平台来进行渲染的，而这之间主要是通过 JSbridge 来通信，将需要渲染的数据通过 JSbridge 传递给原生平台。
比较：相对于Flutter，ReactNative不能直接调用GPU，而是通过JsBridge桥接的方式，将数据传递给原生平台，再由原生应用绘制图形。中间多了一层转换，因此绘图性能要低于Flutter。
Flutter UI 界面是自渲染的，而 ReactNative 则是通过通信的方式告知原生平台，然后原生平台再绘制出界面。
1.3 常用跨平台技术比较
| Flutter | ReactNative | Hybird | |
| 绘制原理 | 封装Dart API调用Skia进行绘制 | 通过JSBridge，调用原生平台绘制界面 | Web流派，使用H5绘制UI。Web页面+JS调用原生 |
| 渲染性能 | 非常快，媲美原生 | 快 | 接近快 |
| 是否支持设备底层访问 | 支持 | 支持 | 支持 |
| 网络要求 | 支持离线 | 支持离线(集成资源包) | 支持离线(资源存本地情况) |
| 编程语言 | Dart | React, 主要使用JS编写,语法规则JSX | (JavaScript)js+html+css3 |
| 跨平台 | Android,iOS,h5浏览器 | Android,iOS | Android,iOS,h5浏览器 |
| 打包bundle文件 | 不需要 | 默认单一文件比较大（可拆包） | 前端JS、CSS一般CDN引用 |
| 热更新 | 暂无方案 | 好 | 好 |
二、Skia图形开源引擎
Skia有两套很不同的后端，Flutter在iOS模拟器采用的纯CPU后端；而实际设备一般采用GPU硬件加速后端。
2.1 分析Flutter应用的Skia调用情况
flutter run --profile --trace-skia常见性能瓶颈
请注意以下的skia函数调用
- saveLayer
- clipPath
尽量减少上述两个函数的调用，将性能提升2倍。
