Flutter 性能优化 Tips

2401_84122760

于 2024-04-17 07:55:07 发布

阅读量808

点赞数 11

分类专栏：程序员文章标签： flutter 性能优化

本文链接：https://blog.csdn.net/2401_84122760/article/details/137853539

版权

从命令行中运行键盘输入P
代码中打开在MaterialApp 或者 WidgetsApp的构造函数中设置showPerformanceOverlay 属性为 true :

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
showPerformanceOverlay: true, // 开启
title: ‘My Awesome App’,
home: MyHomePage(title: ‘My Awesome App’),
);
}
}

然后就是动手操作 app，并观察图表上是否出现红色线条。绿色代表当前帧，当页面有变动，图表会不断绘制。蒙版上有2个图表，每个图表上有三横格，每个横格代表16ms。如果大多数帧都在第一格，说明达到了期望的帧率。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图表分别体现了 UI帧率和 GPU帧率。如果出现了红色，说明对应的线程有太多work要做。那先来了解一下 Flutter 中的4个主要线程分别承担了什么职责。

Platform线程：插件代码运行的线程；即Android/iOS的主线程，
UI线程：在Dart虚拟机中执行Dart代码。作用是创建视图树，然后将它发送给GPU。注意不要阻塞此线程！
GPU线程：把上面提到的视图树渲染出来，虽然我们在flutter中不能直接访问GPU线程和数据，但是Dart代码可能导致此线程变慢
I/O线程：执行比较耗时的任务

在运行app的过程中，观察爆红的地方和触发场景，进行分析。

分析思路

如果是UI报红：那么可能是执行了某个较耗时的函数？或者函数调用过多？算法复杂度高？
如果只是 GPU 报红：那么可能是要绘制的图形过于复杂？或者执行了过多GPU操作？
比如要实现一个混合图层的半透明效果：如果把透明度设置在顶层控件上，CPU会把每个子控件图层渲染出来，再执行saveLayer操作保存为一个图层，最后给这个图层设置透明度。而saveLayer开销很大，这里官方给出了一个建议：首先确认这些效果是否真的有必要；如果有必要，我们可以把透明度设置到每个子控件上，而不是父控件。裁剪操作也是类似。
还有一个拖慢GPU渲染速度的是没有给静态图像做缓存，导致每次build都会重新绘制。我们可以把静态图形加到RepaintBoundry控件中，引擎会自动判断图像是否复杂到需要用repaint boundary，不需要的话也会忽略。
开启saveLayer和图形缓存的检查

MaterialApp(
showPerformanceOverlay: true,
checkerboardOffscreenLayers: true, // 使用了saveLayer的图形会显示为棋盘格式并随着页面刷新而闪烁
checkerboardRasterCacheImages: true, // 做了缓存的静态图片在刷新页面时不会改变棋盘格的颜色；如果棋盘格颜色变了说明被重新缓存了，这是我们要避免的
…
);