Chrome 开发者工具非常重要,所蕴含的内容也是非常多的,熟练使用它能让你更加深入地了解浏览器内部工作原理。
时间线主要用来展示 HTTP、HTTPS、WebSocket 加载的状态和时间的一个关系,用于直观感受页面的加载过程。如果是多条竖线堆叠在一起,那说明这些资源被同时加载。至于具体到每个文件的加载信息,还需用到详细列表。
下载信息概要面板中,需要关注两点:
DOMContentLoaded
事件发生后,说明页面已经构建好 DOM 了,这就意味着构建 DOM 所需要的 HTML 文件、JavaScript 文件、CSS 文件都已经下载完成了Load
说明浏览器已经加载了所有的资源(图像、样式表等)通过这个下载信息概要面板可以查看触发这两个事件所花费的时间。
看一个请求的详细流程,可以看它的时间线面板
Queuing
,也就是排队的意思,当浏览器发起一个请求时,会有很多原因导致该请求不能被立即执行,需要排队等待(首先,页面中的资源是有优先级的,比如 CSS、HTML、JavaScript 等都是页面中的核心文件,所以优先级最高;而图片、视频、音频这类资源就不是核心资源,优先级就比较低。通常当后者遇到前者时,就需要“让路”,进入待排队状态。其次,浏览器会为每个域名最多维护 6 个 TCP 连接,如果发起一个 HTTP 请求时,这 6 个 TCP 连接都处于忙碌状态,那么这个请求就会处于排队状态。最后,网路进程在为数据分配磁盘空间时,新的 HTTP 请求也需要短暂的等到磁盘分配结束。)。Stalled
上,它表示停滞的意思。Proxy Negotiation
阶段,也就是代理协商阶段,它表示代理服务器连接协商所用的时间Initial connection/SSL阶段
,也就是和服务器建立连接的阶段,还需要一个额外的 SSL 握手时间,这个过程主要用来协商一些加密信息Request sent
阶段。通常这个阶段非常快,因为只需要把浏览器缓冲区的数据发送出去就结束了,并不需要判断服务器是否接收到。Waiting(TTFB)
,通常也称为"第一时间"
,是反映服务器端响应速度的重要指标(它包含了 TCP 连接时间、发送 HTTP 请求时间和获得响应消息第一个字节时间。如果 TTFB 时间过大,说明服务器性能较差)Content Download
,这意味着第一字节时间到接收到全部响应数据所用的时间Queuing
时间过长,大概率是由浏览器为每个域名最多维护 6 个连接导致的。基于这个原因,可以让 1 个站点下面的资源放在多个域名下面,比如放到 3 个域名下就可以支持 18 个连接了,这种方法称为域名切片技术。另外,因为 HTTP2 已经没有每个域名最多维护 6 个 TCP 连接的限制了,所以把站点升级到 HTTP2 也不失为一个方法。