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

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

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

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

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

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

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

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

发生卡顿的原因

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

结合DevTools的分析图，我们可以看出。在上面130ms的构建的主要耗时集中在Layout中调用的build方法

根据上面提到帧绘制的流程，我们可以看到，build了之后layout，这里为什么layout中又进行了build？

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