淘特 Flutter 流畅度优化实践

作者：谢伟(韦圣)

不同的业务背景引出不同的技术诉求，“用户体验特爽”是淘特的不懈追求，本文将介绍笔者加入淘特以来在Flutter流畅度方面的诸多优化实践，这些优化不涉及Engine改造、不涉及高大上的“轮子建设“，只需细心细致深入业务抽丝剥茧，坚持实际体感导向，即能为用户体验带来显著提升，值得Flutter开发者将其应用在产品的每一个像素。

背景

淘特具备鲜明的三大特征：

1. 业务特征：淘特拥有业界最复杂的淘系电商链路
2. 用户特征：淘特用户中有大量的中老年用户，大量的用户手机系统版本较低，大量的用户使用中低端机
3. 技术特征：淘特大规模采用Flutter跨平台渲染技术

综上所述：

最复杂业务链路+最低性能用户群体+最新的跨平台技术==>核心问题之一：页面流畅度受到严峻挑战

Flutter核心链路	20S快速滚动帧率	卡顿率(每秒卡顿率)
直播Tab	27	7.04%
我的	41.3666	7.63%
详情	26.7	15.58%

注：相关数据以vivo Y67，淘特

3.32.999.10 (103) 测得

目标

流畅度是用户体验的关键一环，大家都不希望手机用起来像看电影/刷PPT，尤其是现在高刷屏(90/120hz)的普及，更是极大强化了用户对流畅度的感知，但流畅度也跟产品复杂度强相关，也是一次繁与简的取舍，淘特流畅度一期优化目标：

Flutter核心链路页面达到高流畅度(平均帧率：低端机45FPS、中端机50FPS、高端50FPS)

一期优化后的状态

事项	平均帧率	卡顿率	提升效果
1.直播Tab推荐、分类栏目	46.0	0.35%	帧率提高19帧、卡顿率降低6.7%
2.我的页面	46.0	0%	帧率提高4.6帧，卡顿率降低7.6%
3.详情	45.0	2%	帧率提高18.3桢，卡顿率降低13.58%

旧版3.32如视频左，新版3.37如视频右。因uiautomator工具会触发无障碍性能ISSUE，此版本对比为人工测试。

视频请见：淘特 Flutter 流畅度优化实践

除了数据上的明显提升，体感上，旧版快滑卡顿明显，画面突变明显，新版则基本消除明显的卡顿，画面连续平稳。

问题

回到技术本身，Flutter为什么会卡顿、帧率低？总的来说均为以下2个原因：

1. UI线程慢了-->渲染指令出的慢
2. GPU线程慢了-->光栅化慢、图层合成慢、像素上屏慢

那么，怎么解上述的 2 个问题是咱们所关心的重点。既然知道某块有问题，我们自然要有工具系统化的度量问题水平，以及系统化的理论支撑实践，且看以下2节，过程中穿插相关策略在淘特的实践， 理论与实践结合理解更透。

怎么解

解法 - 案例

1 降低setState的触发节点

大家都知道Flutter的刷新机制，在越高的Widget树层级触发setState标脏Element，“脏树越大”，在越低层级越局部的Widget触发状态更新，“脏树越小”，被标记为脏树后将触发Element.Rebuild，遍历组件树。原理请看下图“Flutter页面刷新机制源码解析”:

“Element.updateChild源码分析”请见下文优