已开源！Flutter 流畅度优化组件 keframe

列表流畅度优化

这是一个通用的流畅度优化方案，通过分帧渲染优化由构建导致的卡顿，例如页面切换或者复杂列表快速滚动的场景。

代码中 example 运行在 VIVO X23（骁龙 660），在相同的滚动操作下优化前后 200 帧采集数据指标对比（录屏在文章最后）：

优化前	优化后

监控工具来自：fps_monitor，指标详细信息：页面流畅度不再是谜！调试神器开箱即用，Flutter FPS检测工具

• 流畅：一帧耗时低于 18ms
• 良好：一帧耗时在 18ms-33ms 之间
• 轻微卡顿：一帧耗时在 33ms-67ms 之间
• 卡顿：一帧耗时大于 66.7ms

采用分帧优化后，卡顿次数从 平均 33.3 帧出现了一帧，降低到 200 帧中仅出现了一帧，峰值也从 188ms 降低到 90ms。卡顿现象大幅减轻，流畅帧占比显著提升，整体表现更流畅。下方是详细数据。

	优化前	优化后
平均多少帧出现一帧卡顿	33.3	200
平均多少帧出现一帧轻微卡顿	8.6	66.7
最大耗时	188.0ms	90.0ms
平均耗时	27.0ms	19.4ms
流畅帧占比	40%	64.5%

---

页面切换流畅度提升

在打开一个页面或者 Tab 切换时，系统会渲染整个页面并结合动画完成页面切换。对于复杂页面，同样会出现卡顿掉帧。借助分帧组件，将页面的构建逐帧拆解，通过 DevTools 中的性能工具查看。切换过程的峰值由 112.5ms 降低到 30.2 ms，整体切换过程更加流畅。