真牛皮！ListView流畅度翻倍！！Flutter卡顿分析和通用优化方案

导语：

最近因为在做Flutter中相关的性能优化，在收集很多性能数据之后发现ListView组件在一些场景下（例如加载更多）容易引起页面卡顿，看到了闲鱼的Flutter 高性能、多功能的全场景滚动容器。但奈何该组件没有开源，因此准备从文章给出的思路尝试研究和开发一个高性能的ListView。这个系列预计会分为4-5篇文章，前两篇主要对现有问题研究和分析，后三篇实际的进行开发。

一、ListView存在性能问题么？

日常业务开发中，我们会在多种场景下使用ListView组件。使用它可以快速完成一个列表页面，或者去适配一些小屏的设备。那么使用原生的ListView组件会存在性能上的问题么？答案是肯定的，在实际的业务场景中，我就遇到了这样一个页面（UI不长这样）

这是一个竖向的列表，其中每一行的item是三个 TextField。如图中 Performance OverLay 显示一般，profile 模式下这个页面在我的 Vivo X23(骁龙 660)上出现了严重的卡顿。

---

二、为什么出现了卡顿?

基本原理

我们知道，对于滑动列表的这个过程，其实是由一个个的画面组成，术语称为帧。对于大部分人而言，当每秒的画面达到60，也就是俗称60FPS的时候，整个过程就是流畅的。而不及60FPS的时候，就会产生卡顿的感觉。

一秒 60 帧，也就意味着平均两帧之间的间隔为 16.7ms。如果超过 16.7ms，在观感上就会出现卡顿。通过系统提供的 DevToools 工具可以查看到，上面的例子中出现卡顿时一帧的耗时高达 130ms。

系统为了绘制一帧需要经历哪些阶段？

为什么一帧的耗时会超过16.7ms？为了搞清楚这个问题我们需要知道，Flutter为了绘制一帧会做些什么？

其实我们只需要在任意Flutter工程中，搜索drawFrame() 便可以得到答案。

这个方法上英文注释写得非常详细，推荐大家去看看。一共有10步骤，其中，与开发者关系比较密切的有下面几步。

动画->构建->布局->绘制->合成

发生卡顿的原因

结合DevTools的分析图&