什么?页面卡顿?操作慢?

5,629 阅读3分钟
原文链接: github.com

1、背景

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

2、网页为什么会卡

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

3、实战演练

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

1

3.1 准备工作

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

2

3.2 记录运行时性能

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

3

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

4

3.3 分析结果

1、看看FPS图表。

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

5

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

2、看看CPU图表。

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

6

3、时间点截图。

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

7

4、发现性能瓶颈。

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

8

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

9

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

10

5、解决问题,该你了。