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倍。