ListView流畅度翻倍！Flutter卡顿分析和优化方案

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

原理篇：

1、Widget、Element、Render树究竟是如何形成的？

2、ListView的构建过程与性能问题分析

实战篇：

1、Flutter如何设计一个高性能，多功能的ListView组件

2、ListView性能问题与优化方案

3、开源！！！！

ps: 组件目前已基本完成基本功能和性能上的优化，即将开源，关注点赞不要错过最新信息！！

上一期我们分析了ListView组件的功能设计，这一期我们着重从性能方向分析ListView卡顿的根本原因和优化方案。

---

一、ListView存在性能问题么？

日常业务开发中，我们会在多种场景下使用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() 便可以得到答案。

这个方法上英文注释写得非常详细࿰