ListView流畅度翻倍！Flutter卡顿分析和优化方案(1)，Android知识体系大纲

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

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

---

二、为什么出现了卡顿?

====================================================================

基本原理

=============================================================

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

[图片上传失败…(image-7b2aef-1616072584879)]

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

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

==========================================================================

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

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

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

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

发生卡顿的原因

=============&#