Flutter 流畅度优化实践总结

最新推荐文章于 2025-04-01 09:56:14 发布

2301_78416573

最新推荐文章于 2025-04-01 09:56:14 发布

阅读量811

点赞数 18

分类专栏：程序员文章标签： flutter

本文链接：https://blog.youkuaiyun.com/2301_78416573/article/details/137389225

版权

▐ PowerScrollView 卡片分帧优化

左图2个卡片是闲鱼早期搜索结果页，当时还不是瀑布流。查看卡片创建时的 Timeline 图（补充了 Dx Widget 创建和 PerformLayout 开销），可以发现一次卡片创建的复杂度极大，在普通中端机器上，UI Thread 耗时机已经超出 30ms，要优化至 16.6ms 以内，用常规的优化手段就很困难了。为此想象 2 个卡片能否拆解掉，各自使用 1 帧的时间去渲染。

直接看源码，基本思想是：对卡片 Widget 进行标记，在左边卡片真实创建的时候，右边卡片先 _buildPlaceholderCell 构建占位 Widget（空的 Container），并注册监听下一帧。在下一帧，右边卡片进行修改 needShowRealCell 为 true，并自我标脏，此后构建真实内容。

延迟构建卡片真实内容，是否会对显示内容产生影响？因为 Flutter 列表在可视区域上下还有 CacheExtends 区域，这部分区域用户不可见。为此在大部分场景下，用户并不会看到空白卡片的场景。

同样使用 Flutter BenchMark 工具进行性能测试，能看到卡片分帧前后 90分位，99分位帧耗时都有明显的降级，丢帧数也从 39 降低至 27

这里注意，监听下一帧的时候，需要 WidgetsBinding.instance.scheduleFrame() 触发 requestFrame。因为在列表首屏显示的时候，有可能因为没有下一帧的回调，导致延迟显示队列的任务没有执行，最终使得首屏内容显示不正确。

▐ 延迟****分帧优化思路和使用建议

对比 Flutter 和 H5 设计比较接近：

dart 和 js 都是单线程模型，跨线程通信需要走序列化和反序列化；
Flutter Widget 和 H5 vDom 类似，都有一个 Diff 过程。

早期 FaceBook 在 React 优化时，提出了 Fiber 架构：基于 vDom tree 的父节点→子节点→兄弟节点→子节点的方式，将 vDom tree 转化为 fiber 数据结构（链式结构），进而实现 reconcile 阶段的可中断可恢复；基于 fiber 数据结构，控制部分 fiber 节点在下一帧继续操作。

基于 React Fiber 思路，我们提出了自己的延迟分帧优化，不只是左右卡片粒度，更进一步，将渲染内容拆解为当前帧任务、高优延迟任务和低优延迟任务，上屏优先级依次变低。其中当前帧任务，是左右 2 个空白 Container；高优延迟任务独占一帧，其中图片部分也使用 Container 占位；在闲鱼场景，我们把全部的 DX Image Widget 从卡片内拆解出来，作为低优延迟任务，并设置在一帧消费不超过 10 个。

通过将 1 帧显示任务拆解到 4 帧时间，高端机上最高 UI 耗时从 18ms 优化至 8ms。