什么？页面卡顿？操作慢？记一次前端页面异常解决思路

Question

1、背景

两个月前做横幅特效的需求的时候，产品体验玻璃水滴的两种特效会导致网站整体变卡，之前没查出原因，就先下架了。最近潜心研究了下谷歌的工具，于是，把之前的两种特效特意拿出来研究下，把卡的问题解决，并上线，毕竟这两种特效还是不错的！

2、网页为什么会卡

网页卡常见原因：DOM操作频繁，频繁触发回流，循环耗时等。当然，大多数小问题导致的问题在网站的整体效果上看可能会感知不到，而当你感觉到卡的时候肯定是“出事了”，下面我们将通过谷歌工具把卡的问题找出来。

3、实战演练

我们已最新版的谷歌为例子，截图如下：

3.1 准备工作

1、在DevTools中，单击 Performance tab。
2、勾选Screenshots checkbox。
3、点击录制设置按钮。DevTools显示与捕获性能指标的相关设置。
4、对于CPU，请选择2x减速。 DevTools控制CPU，使其比平常慢2倍（两倍看不出问题就5倍）。当然这个看情况而定，目的是节流cpu，暴露问题。
5、上面操作后整体截图如下（注意画箭头的地方）：

3.2 记录运行时性能

1、在DevTools中，单击记录。 DevTools在页面运行时捕获性能指标。

2、等待数秒。
3、单击停止。 DevTools停止录制，处理数据，然后在“性能”面板上显示结果。如下图：

3.3 分析结果

1、看看FPS图表。

每当您看到FPS上方的红色条纹，这意味着帧率下降得如此之低，以致可能会损害用户体验。 一般来说，绿色条越高，FPS越高。如下图：

见红的那部分fps帧率很低，表示有问题。

2、看看 CPU 图表。

在FPS图表下方，可以看到CPU图表。CPU图表中的颜色对应于“性能”面板。底部“摘要”选项卡中的颜色。 CPU图表充满色彩意味着CPU在录制过程中被最大化。如下图：

3、时间点截图。

将鼠标悬停在FPS，CPU或NET图表上。 DevTools在该时间点显示页面的屏幕截图。如下图：

4、发现性能瓶颈。

在时间轴上选中部分见红的部分（即fps很低的部分），展开“main”主线程。 DevTools随着时间的推移，显示主线程上的活动的火焰图表。 随着时间的推移，x轴表示录制。 每个格代表一个事件。 更宽的格意味着事件花费更长时间。 y轴表示调用堆栈。如下图：

从上图可以很明显看出，Animation Frame Fired 的格的右上角又见 红 了，说明有问题，点击这个 格。如下图所示：

谷歌工具已经看不下去了，给了个提示，Warning Recurring handler took 131.66 ms，循环导致的问题。再往下，点击具体的文件行数，可以定位出现问题的位置。如下图：

5、解决问题，该你了。