ListView流畅度翻倍！Flutter卡顿分析和优化方案，阿里Android研发岗二面

对于ListView里面的每一个item，并不会在build阶段全部进行构建。而是在layout阶段，根据屏幕当前的尺寸以及缓存区的范围，动态的构建每一个item，过程如图（图片来自upYang）

所以上面的分析图中，layout主要是ListView进行布局，而其中的build是每一个child节点。其实仔细一点看，每一个build下面的结构基本都是KeyedSubTree、AutomaticKeepAlive、KeepAlive等，这是ListView在构建时，为每一个item包裹的，详细原理在Flutter增强列表-ListView性能问题分析有提到。

所以引起卡顿的原因非常明显主要由于，在某一帧内，ListView构建多个复杂的item。例如分析图中，在Layout阶段同时build了多个item，一个item的构建耗时已经接近10ms，同时构建自然超过了16ms。

---

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

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

既然我们知道了引起ListView的卡顿原因，那么卡顿主要会发生在什么时候？结合我自身的测试发现，主要在下面三个阶段。

• 1、首次进入，列表构建时

当我们打开一个ListView构建的页面时，由于这时ListView中没有任何一个item，所以会进行多次的构建，上面例子的130ms就是如此。

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

当我们在快速滑动的过程中，因为滑动范围比较大，同样可能引起多个item的构建。

• 3、setState进行加载更多

第三个场景是在一些分页列表上，我们往往在数据请求完成后进行setState()更新列表，最终会调用到ListView对应Element的performRebuild()中

其中的_childElements是缓存的item节点（即当前屏幕上以及缓存区的所有item），这里会对每一个item进行update。同时，由于有了更多子节点（item数量增加），所以还会去构建新的item，同样容易引起卡顿。

---

三、如何优化ListView卡顿？

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

优化思路

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