Forced Reflow

在使用Performance做性能分析的时候，除了长任务会出现红色徽标之外，还有一种常见的异常状态会被用红色徽标标记，即Forced reflow is a likely performance bottleneck.

浏览器一次正常的Circal Rendering Path(CRP)，包括以下步骤： JavaScript -> Style -> Layout -> Paint -> Composite

Forced reflow任务标记了运行在JavaScript的reflow

在每一帧的中JavaScript运算中，上一帧的布局是已知的，如果在JavaScript中修改了元素布局，然后再尝试读取元素布局属性，浏览器会认为上一帧的布局缓存是失效的，而这一帧的布局又还没计算出来，因此会在JavaScript阶段强制计算一次布局数据，这将延长JavaScript阶段的运行时间，且在同一个task中进行了两次Layout，是没有必要的。

解决方式：

• 先读取上一帧的布局，缓存下来，再进行修改
• 在setTimeout中读取布局数据，会在本帧的布局之后执行