三步法助你快速定位网站性能问题 (2)

三步法助你快速定位网站性能问题

从饼图可以看出占比最多的是脚本执行和空闲。

脚本执行时间长,我们大概可以猜测里面可能存在长任务(Long task);

而空闲占比多可能是等待服务器的响应时间太长。

饼图可以快速形成基本的判断,而具体原因则需要分析瀑布图和火焰图。

第二步:看瀑布图

我们来看下请求瀑布图,瀑布图和火焰图都是线程面板的一部分,瀑布图的横轴是时间轴,瀑布图上有很多五颜六色的色块,这些色块就是请求块,每种颜色代表一类资源:

蓝色是HTML文件

紫色是CSS文件

黄色是JavaScript文件

绿色是图片

灰色是后台接口

我们主要关注那些长色块,长色块意味着耗时长,可能是性能瓶颈。

还是看下掘金个人主页的瀑布图。

三步法助你快速定位网站性能问题

总结瀑布图的特点

我们先观察这张图有什么特点,图形观察能力,相信大家小学就已经培养起来了,大致我们可以总结出以下比较明显的特点:

特点一:大瀑布被分成三个小瀑布

特点二:最左边的小瀑布大部分都是黄色色块,中间的小瀑布大部分是灰色色块,最右边的小瀑布大部分是绿色色块

特点三:前两个瀑布之间有一段间距,中间什么色块都没有

特点四:后两个瀑布被一个灰色色块的“尾巴”连在了一起

特点五:顶部有一个超长的灰色色块

类似的特点我们还可以总结出很多来,但是这些特点说明了什么呢?能否帮助我们定位性能瓶颈呢?

回答这些问题需要我们对瀑布图以及浏览器原理有很多的认识,我们一步步来分析吧。

分析瀑布图的含义

我们按从左到右,从上到下的顺序进行分析,最左边有两个色块,一个灰色色块,一个蓝色色块,我们分别点击这两个色块,在详情面板看下它们的详情信息。

先看灰色色块

三步法助你快速定位网站性能问题

我们有注意到这个请求的启动器(Initiator)是一个Chrome插件:chrome://new-tab-page/omnibox.mojom-lite.js

因此我们不关注,接着看蓝色色块

三步法助你快速定位网站性能问题

前面我们已经介绍了,蓝色色块代表HTML文件,我们从详情的Mime Type为text/html也可以验证这一点。

我们滚动鼠标滚轮,把这个瀑布图放大,看这个蓝色请求块的细节

请求块的组成

通过查看细节图,我们有了新的发现:

每个请求块都由四部分组成:

左侧线:代表请求发送之前的时间(Before Request Sent)

浅色块:代表请求已经发送(Request Sent),直到服务器返回第一个字节给浏览器(TTFB, Time to First Byte)

深色块:服务器返回的内容全部下载到浏览器(Content Download)

右侧线:等待主线程处理(Waiting for main thread)

这个HTML文件是整个网页渲染的起点,成功请求并下载这个文件,才会有接下来的故事。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpypgz.html