Chrome 开发者工具

介绍

Chrome 开发者工具非常重要，所蕴含的内容也是非常多的，熟练使用它能让你更加深入地了解浏览器内部工作原理。

控制面板

时间线

时间线主要用来展示 HTTP、HTTPS、WebSocket 加载的状态和时间的一个关系，用于直观感受页面的加载过程。如果是多条竖线堆叠在一起，那说明这些资源被同时加载。至于具体到每个文件的加载信息，还需用到详细列表。

下载信息概要

下载信息概要面板中，需要关注两点：

• DOMContentLoaded 事件发生后，说明页面已经构建好 DOM 了，这就意味着构建 DOM 所需要的 HTML 文件、JavaScript 文件、CSS 文件都已经下载完成了
• Load 说明浏览器已经加载了所有的资源（图像、样式表等）

通过这个下载信息概要面板可以查看触发这两个事件所花费的时间。

请求列表

单个请求时间线

看一个请求的详细流程，可以看它的时间线面板

1. 第一个是 Queuing，也就是排队的意思，当浏览器发起一个请求时，会有很多原因导致该请求不能被立即执行，需要排队等待（首先，页面中的资源是有优先级的，比如 CSS、HTML、JavaScript 等都是页面中的核心文件，所以优先级最高；而图片、视频、音频这类资源就不是核心资源，优先级就比较低。通常当后者遇到前者时，就需要“让路”，进入待排队状态。其次，浏览器会为每个域名最多维护 6 个 TCP 连接，如果发起一个 HTTP 请求时，这 6 个 TCP 连接都处于忙碌状态，那么这个请求就会处于排队状态。最后，网路进程在为数据分配磁盘空间时，新的 HTTP 请求也需要短暂的等到磁盘分配结束。）。
2. 等待排队完成之后，就要进入发起连接的状态了。不过在这之前，还有一些原因可能导致连接过程被推迟，这个推迟就表现在面板中的 Stalled 上，它表示停滞的意思。
3. 如果使用了代理服务器，还会增加一个 Proxy Negotiation 阶段，也就是代理协商阶段，它表示代理服务器连接协商所用的时间
4. 接下来就是是 Initial connection/SSL阶段，也就是和服务器建立连接的阶段，还需要一个额外的 SSL 握手时间，这个过程主要用来协商一些加密信息
5. 和服务器建立好连接之后，网络进程会准备请求数据，并将其发送给网络，这就是 Request sent 阶段。通常这个阶段非常快，因为只需要把浏览器缓冲区的数据发送出去就结束了，并不需要判断服务器是否接收到。
6. 数据发送出去后，接下来就是等待接收服务器第一个字节的数据，这个阶段称为 Waiting(TTFB)，通常也称为"第一时间"，是反映服务器端响应速度的重要指标（它包含了 TCP 连接时间、发送 HTTP 请求时间和获得响应消息第一个字节时间。如果 TTFB 时间过大，说明服务器性能较差）
7. 接收到第一个字节之后，进入陆续接收完整数据的阶段，也就是 Content Download，这意味着第一字节时间到接收到全部响应数据所用的时间

优化时间线上耗时项

1. Queuing 时间过长
   Queuing 时间过长，大概率是由浏览器为每个域名最多维护 6 个连接导致的。基于这个原因，可以让 1 个站点下面的资源放在多个域名下面，比如放到 3 个域名下就可以支持 18 个连接了，这种方法称为域名切片技术。另外，因为 HTTP2 已经没有每个域名最多维护 6 个 TCP 连接的限制了，所以把站点升级到 HTTP2 也不失为一个方法。
2. TTFB 时间过长
   可能的原因有： 服务器生成页面数据的时间过长（对于动态网页来说，服务器收到用户打开一个页面的请求时，首先要从数据库中读取该页面所需的数据，然后把这些数据传入到模板中，模板渲染后再返回给用户，这个处理过程中，可能某个环节出现问题）、网络的原因（使用了低带宽的服务器等）、发送请求头时带上了多余的用户信息（比如一些不必要的 Cookie 信息，服务器接收到这些信息之后可能需要对每一项都做处理，加大了服务器的处理时长）。
   针对每一项采取对应措施，例如通过增加各种缓存技术来提高服务器处理速度、使用 CDN 缓存静态文件来解决网络问题、尽量减少不必要的 Cookie 数据信息等。
3. Content Download 时间过长
   可能是字节数太多的原因导致的，可以减少文件大小，比如压缩、去掉源码中不必要的注释等。