分析 Chrome 的瀑布流（Waterfall）

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

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

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

• 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 资源等。