Chrome 的瀑布流(Waterfall)

2,359 阅读1分钟

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

  • Queueing

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

  • Stalled

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

  • Proxy negotiation

与代理服务器协商时间。

  • DNS Lookup

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

  • Initial Connection

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

  • SSL

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

  • Request sent

请求发送的时间。

  • Waiting (TTFB)

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

  • Content Download

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

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

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

优化资源顺序,减少首屏打开时间。

合理收敛和发散网站的域名,域名太多导致更多的 HTTP 连接无法复用,域名太少导致超过浏览器限制并等待。

减少 HTTP 请求数,如合理利用客户端缓存,现在前端也有些工具可以合并 JS/CSS 资源等。