厦门 网站建设,装修第三方平台网站建设,上海网站推广珈维,wordpress怎么匿名评论性能分析工具 #xff08;1#xff09;performance overlay 开启performance overlay后#xff0c;Flutter APP上将显示一个展示一个浮层#xff0c;浮层中会实时展示当前的UI线程及Raster线程的运行情况。如果都是蓝色竖条#xff0c;说明界面运行流畅#xff0c;否则则… 性能分析工具 1performance overlay 开启performance overlay后Flutter APP上将显示一个展示一个浮层浮层中会实时展示当前的UI线程及Raster线程的运行情况。如果都是蓝色竖条说明界面运行流畅否则则是出现掉帧。 performance overlay可以直接通过代码开启
class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {return MaterialApp(//开启性能监控浮层showPerformanceOverlay: true,title: MyApp,home: MyHomePage(title: My Awesome App),);}
}也可以在Debug过程中在VSCode右侧的Performance 中点击 Toggle Performance Overlay 开启。 2DevTools 使用DevTools除了可以像performance overlay那样查看App的运行情况还会录制具体的每一帧绘制及渲染的详细过程并且允许用户选择任何一帧查看其运行详情。 比较重要的主要是Enhance Tracing中的几个选项 选取Track Widgets Build可以查看某一帧build执行的详情 如果发现build执行的层级比较深则说明是一个比较“大”的Widget执行了重建。那我们就需要研究下这种重建是否是必要的。比如如果只是其中某个小组件的数据发生了变化就可以优化只对小组件进行重建。又比如数据未发生变化但重建的频率非常高则需要看一下导致重建的原因看是否可以取消执行这种不必要的逻辑。 选取TrackPaints 则可以追踪当前帧绘制的主要逻辑 如果发现paint的层级比较深则很可能是有比较大的Widget执行了绘制相关逻辑那么就可以看下这种大Widget执行重绘是什么引起的以及是否有必要。如果是小组件的重绘导致的可以尝试用RepaintBoundary包裹小组件使得重绘仅限于小组件自身。 性能优化总结 1图片等资源访问使用内存缓存及本地文件缓存。Flutter对GlobayKey组件有缓存对构建复杂并且复用率比较高的组件合理使用GlobayKey可以提升性能。但需注意 使用GlobayKey查找组件state是全局查找有较大性能开销查找不能滥用。 2提高build效率避免大的widget反复重新build将需要重新build的子widget改为自定义的statefulWidget 在该widget内调用setState进行重新构建而不是对整个大的widget都重新构建 或者用consumer实现局部刷新。 3提高Paint效率 需要重绘的widget用RepaintBoundary包住变为其child进而创建一个单独的layer对其重绘制不影响其它组件。适合用RepaintBoundary包住的组件主要是两类 一是需要频繁重绘的组件使用RepaintBoundary后就可以不影响其它组件另一种是绘制比较复杂的小组件而除了该组件外其他组件不会变化也适合用RepaintBoundary将其变为一个独立的图层以提升效率。 4尽量多使用const实例或widget 的const构造方法 能用statelessWidget实现的就不要用StatefulWidget实现。尽量利用缓存减少组件的重新渲染。 5build方法中耗时使用异步 更耗时的计算操作可以使用compute启用多线程。但要注意 Flutter中开启线程实际会创建一个新的isolate 线程启动不仅耗时还会增加内存占用开启线程应避免滥用 6尽量减少Widget子组件的层级。比如Row或者Column组件中减少Padding的使用 用sizebox来实现组件位置的偏移 7ListView应采用build方法进行按需构建避免一次性构建过多的item或者使用性能更好的CustomScrollView可折叠的listview在折叠状态时设itemCount为0 尽量避免设置widget为半透明避免下方内容不必要的绘制可以用截图来实现半透效果。 8降级CustomScrollView,ListView上下各250高度的执行渲染这就是预渲染区。预渲染区在性能较差机器可以通过参数调整到更小的高度。此外Flutter为提升Listview滚动性能 默认会用widget包裹Listview中的子组件并让被包裹的组件仅绘制一次但这会带来更大的内存占用。如果内存资源比较稀缺可以通过ListView的addAutomaticKeepAlives和addRepaintBoundaries属性禁用该特性。 ListView.builder(...addAutomaticKeepAlives: false (true by default)addRepaintBoundaries: false (true by default)
);如果ListView和Gridview中Item的高度时固定的还可以使用itemExtent实现滚动条大高度滚动的效率。 9减少图像裁剪性能开销 尽量少用ClipRRect组建改为使用BoxDecoration组件的image属性。
