分析 Chrome 的瀑布流(Waterfall)

当需要调试网页或分析网站性能时,我们往往会 F12 打开浏览器控制台,查看网络请求,看网页加载了哪些资源,以及对应的请求方式(Method)、状态码(Status)、资源类型(Type)、大小(Size)、耗费的时间(Time)等。

如果某个资源耗费的时间比较长,我们需要深入分析时,则需要看另一个项目:瀑布流(Waterfall),在 Waterfall 中我们可以看出时间具体花在了哪些部分。

1556444223018

瀑布流中各项指标含义如下:

  • Queueing

    浏览器将资源放入队列时间,比如:遇到更高优先级的请求或请求并发超过 6 了。

  • Stalled

    因放入队列时间而发生的停滞时间。

  • Proxy negotiation

    与代理服务器协商时间。

  • DNS Lookup

    DNS 解析时间,浏览器需要将域名转换成 IP。

  • Initial Connection

    在浏览器发送请求前,需要建立 HTTP 连接的时间。

  • SSL

    如果网站使用了 HTTPS,这个就是浏览器与服务器建立安全性连接的时间。

  • Request sent

    请求发送的时间。

  • Waiting (TTFB)

    等待服务端返回数据的时间,这个时间受制于服务端处理性能。

  • Content Download

    浏览器下载资源的时间,这个时间受制于文件大小和带宽。

可以看出,就是将一次 HTTP 请求所花的时间做了拆解,从而有助于分析和定位问题所在。

那么该如何减少资源耗时或者提高网页打开速度呢?我想有以下几个方向可以考虑:

  1. 优化资源顺序,减少首屏打开时间。
  2. 合理收敛和发散网站的域名,域名太多导致更多的 HTTP 连接无法复用,域名太少导致超过浏览器限制并等待。
  3. 减少 HTTP 请求数,如合理利用客户端缓存,现在前端也有些工具可以合并 JS/CSS 资源等。

来源:https://zhangzw.com/posts/20190426.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注