ListView性能优化Flutter

学习最忌盲目，无计划，零碎的知识点无法串成系统。学到哪，忘到哪，面试想不起来

作者：坚果

公众号："大前端之旅"

华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

ListView存在性能问题么？

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

为什么出现了卡顿?

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

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

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

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

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

Flutter中ListView采用懒加载机制。对于ListView里面的每一个item，并不会在build阶段全部进行构建。而是在layout阶段，根据屏幕当前的尺寸以及缓存区的范围，动态的构建每一个item

哪些场景下容易出现卡顿？

1.首次进入，列表构建时

2.快速滑动，一帧内构建多个item

3.setState进行加载更多

如何优化ListView卡顿

优化思路

1、分帧上屏

卡顿的本质原因是在一帧内，模块的运行时间过长，这不光是ListView的问题，所有有复杂元素的页面都一样。那么我们有没有一种通用的方案解决这个问题？其实答案很简单，我们可以从两条路去思考：

第一种 优化模块时间（例如安卓上的布局优化等） 这个需要我们具体问题具体分析，因为导致模块卡顿的原因是多样的，有可能是Widget太复杂，没有合适的局部刷新，或者 UI isolate进行了大量计算等。

第二条思路是在不优化模块的情况下，对时间进行分片，提升流畅度 也就是俗称的分帧运行

这样分帧上屏之后，会影响用户体验么？看看大厂怎么说：

在体验方面，前面讲列表控件结构时已知有一个不可见的 Cache 区域，所以分帧上屏大部分是在这个不可见区域完成的，为此在高端机或正常滑动情况下用户并无感知。而在低端机上快速滑动能明显看到卡片空白情况，但整体相比严重顿挫体感要好。

2、Element复用？

官方本来就有一个cacheExtent缓存区的设计,缓存在cacheExtent内的的Element。个人认为没多大必要额外在做一个缓存。最简单的，将cacheExtent设置大一点就行

实现

1使用 builder构建列表

当你的列表元素是动态增长的时候（比如上拉加载更多），请不要直接用children 的方式，一直往children 的数组增加组件，那样会很糟糕。对于 ListView.builder 是按需构建列表元素，也就是只有那些可见得元素才会调用itemBuilder 构建元素，这样对于大列表而言性能开销自然会小很多。

2.禁用 addAutomaticKeepAlives 和 addRepaintBoundaries 特性

这两个属性都是为了优化滚动过程中的用户体验的。 addAutomaticKeepAlives 特性默认是 true，意思是在列表元素不可见后可以保持元素的状态，从而在再次出现在屏幕的时候能够快速构建。这其实是一个拿空间换时间的方法，会造成一定程度得内存开销。可以设置为 false 关闭这一特性。缺点是滑动过快的时候可能会出现短暂的白屏（实际会很少发生）。 addRepaintBoundaries 是将列表元素使用一个重绘边界（Repaint Boundary）包裹，从而使得滚动的时候可以避免重绘。而如果列表很容易绘制（列表元素布局比较简单的情况下）的时候，可以关闭这个特性来提高滚动的流畅度。

3：尽可能将列表元素中不变的组件使用 const 修饰

使用 const 相当于将元素缓存起来实现共用，若列表元素某些部分一直保持不变，那么可以使用 const 修饰。

4：使用 itemExtent 确定列表元素滚动方向的尺寸

对于很多列表，我们在滚动方向上的尺寸是提前可以根据 UI设计稿知道的，如果能够知道的话，那么使用 itemExtent 属性制定列表元素在滚动方向的尺寸，可以提升性能。这是因为，如果不指定的话，在滚动过程中，会需要推算每个元素在滚动方向的尺寸从而消耗计算资源。