对于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,同样容易引起卡顿。
==========================================================================
==================================&#