
当需要调试网页或分析网站性能时,我们往往会 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 请求所花的时间做了拆解,从而有助于分析和定位问题所在。
那么该如何减少资源耗时或者提高网页打开速度呢?我想有以下几个方向可以考虑:
优化资源顺序,减少首屏打开时间。
合理收敛和发散网站的域名,域名太多导致更多的 HTTP 连接无法复用,域名太少导致超过浏览器限制并等待。
减少 HTTP 请求数,如合理利用客户端缓存,现在前端也有些工具可以合并 JS/CSS 资源等。