光栅(Raster)&性能优化

光栅(Raster)&性能优化

光栅化是把绘制指令转换成对应的像素数据，合成是把各图层栅格化后的数据进行相关的叠加和特性处理。这个流程称为 Graphics Pipeline。

Flutter 采用的是异步分快光栅化

光栅化和合成在一个线程，或者通过线程同步等方式来保证光栅化和合成的的顺序。

• 直接光栅化：直接执行可见图层的 DisplayList 中可见区域的绘制指令进行光栅化，在目标 Surface 的像素缓冲区上生成像素的颜色值。
• 间接光栅化：为指定图层分配额外的像素缓冲区（例如 Android 提供 View.setLayerType 允许应用为指定 View 提供像素缓冲区，Flutter 提供了 Relayout Boundary 机制来为特定图层分配额外缓冲区），该图层光栅化的过程中会先写入自身的像素缓冲区，渲染引擎再将这些图层的像素缓冲区通过合成输出到目标 Surface 的像素缓冲区。

异步分块光栅化: 图层会按照一定的规则粉尘同样大小的图块，光栅化以图块为单位进行，每个光栅化任务执行图块区域内的指令，将执行结果写入分块的像素缓冲区，光栅化和合成不在一个线程内执行，并且不是同步的。如果合成过程中，某个分块没有完成光栅化，那么它会保留空白或者绘制一个棋盘格图形。

不同策略

• Android 和 Flutter 采用同步光栅化策略，以直接光栅化为主，光栅化和合成同步执行，在合成的过程中完成光栅化。
• 而 Chromium 采用异步分块光栅化测量，图层会进行分块，光栅化和合成异步执行。

光栅线程优化性能建议

使用性能模式启动

flutter run --profile

启动之后会出现一个 url 地址，使用浏览器打开，比如本地就是 ：http://127.0.0.1:9101?uri=http://127.0.0.1:53754/pdBGQwzgnug=/

λ flutter run --profile
Launching lib\main.dart on MI PAD 4 PLUS in profile mode...
Running Gradle task 'assembleProfile'...                           25.7s
√  Built build\app\outputs\flutter-apk\app-profile.apk (205.2MB).
I/FlutterBluePlugin(18772): setup
W/FlutterActivityAndFragmentDelegate(18772): A splash screen was provided to Flutter, but this is deprecated. See flutter.dev/go/android-splash-migration for migration steps.

Flutter run key commands.
h List all available interactive commands.
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on MI PAD 4 PLUS is available at: http://127.0.0.1:53754/pdBGQwzgnug=/
The Flutter DevTools debugger and profiler on MI PAD 4 PLUS is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:53754/pdBGQwzgnug=/

性能优化最佳实践

best-practices

阅读资料

如何避免Jank
Flutter 渲染机制
⭐⭐Raster thread performance optimization tips
How Flutter renders Widgets
Flutter’s Rendering Pipeline
B 站视频：深入了解 Flutter 的高性能图形渲染
flutter/engine 源码