浏览器工作原理(21) - Chrome开发者工具：利用网络面板做性能分析

上一篇文章我们讲了async/await的用法，了解了其工作原理，接下来我们继续学习浏览器其他功能

chrome开发者工具

chrome开发者工具DevTools是浏览器的调试工具，内嵌于Google的Chrome的浏览器中

开发者工具有很多重要的面板，比如与性能相关的网络面板，Performance面板，内存面板等，与调试相关的Element面板，Source面板，Console面板等

从图中可以看出，它一共包含了 10 个功能面板，包括了 Elements、Console、Sources、NetWork、Performance、Memory、Application、Security、Audits 和 Layers，各面板的功能如下表格所示：

网络面板

网络面板由控制器、过滤器、抓图信息、时间线、详细列表和下载信息概要这 6 个区域构成（如下图所示）。

1、控制器

控制器有四个比较重要的功能

• 红色圆点的按钮，表示“开始 / 暂停抓包”
• “全局搜索”按钮，可以在所有下载资源中搜索相关内容，还可以快速定位到某几个你想要的文件上
• Disable cache，即“禁止从 Cache 中加载资源”的功能，它在调试 Web 应用的时候非常有用，因为开启了 Cache 会影响到网络性能测试的结果
• Online 按钮，是“模拟 2G/3G”功能，它可以限制带宽，模拟弱网情况下页面的展现情况

2、 过滤器

过滤想要的请求类型

3、抓图信息

抓图信息区域，可以用来分析用户等待页面加载时间内所看到的内

4、时间线

时间线，主要用来展示 HTTP、HTTPS、WebSocket 加载的状态和时间的一个关系

5、详细列表

这个区域是最重要的，它详细记录了每个资源从发起请求到完成请求这中间所有过程的状态，以及最终请求完成的数据信息

6、下载信息概要

下载信息概要中，重点关注 DOMContentLoaded 和 Load 两个事件，以及这两个事件的完成时间

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

详细列表

1、详细信息

选中详细列表中的一项，右边就会出现该项的详细信息

2、单个资源的时间线

发起一个 HTTP 请求之后，浏览器首先查找缓存，如果缓存没有命中，那么继续发起 DNS 请求获取 IP 地址，然后利用 IP 地址和服务器端建立 TCP 连接，再发送 HTTP 请求，等待服务器响应；不过，如果服务器响应头中包含了重定向的信息，那么整个流程就需要重新再走一遍。这就是在浏览器中一个 HTTP 请求的基础流程

那详细列表中是如何表示出这个流程的呢？这就要重点看下时间线面板了

Queuing: 当浏览器发起一个请求的时候，会有很多原因导致该请求不能被立即执行，而是需要排队等待。导致请求处于排队状态的原因有很多

• 首先，页面中的资源都是有优先级的，css，html，JavaScript都是页面中核心部分，优先级比较高，图片、视频、音频这些不是核心资源，优先级比较低，如果相遇，优先级高的先下载
• 其次，浏览器会为每个域名最多维护6个tcp连接，如果发起一个请求的时候，6个tcp连接都是忙碌状态，那么这个请求就要排队
• 最后网络进程在为数据分配磁盘空间时，新的HTTP请求也需要短暂的等待磁盘分配结束

排队结束之后，就要进入发起连接的状态了，发起连接之前，还有一些原因导致连接过程被推迟，这个就是stalled，表示停滞的意思

如果使用了代理服务器，还会增加一个Proxy Negotiation阶段, 表示代理服务器连接协商所有的时间

接下来就到了 initial connection/ssl 阶段了，和服务器建立连接的时间，包括了建立TCP连接所花费的时间，如果使用HTTPS，还有一个额外SSL握手时间，这个过程主要是加密信息

和服务器建立好连接之后，网络进程会准备请求数据，并将其发送至网络，这个就是 Request sent 阶段，这个阶段比较快，只需要把浏览器缓冲区的数据发送出去就行了，整个过程不足1毫秒

数据发送出去之后，接下来就是等待接受服务器第一个字节的数据，这个阶段称为waiting(TTFB) ,TTFB是反应服务器响应速度的重要指标，对服务器来说，TTFB越短，说明服务器响应越快

接收到第一个字节之后，进入陆续接收完整数据的阶段，也就是content Download阶段，这意味着从第一字节时间到接收到全部响应数据所用的时间

优化时间线上耗时项

1、排队时间过久

排队时间久，大概率是浏览器为每个域名分配6个连接导致，基于这个原因，可以让一个站点下面的资源放在多个域名下面，比如放到 3 个域名下面，这样就可以同时支持 18 个连接了，这种方案称为域名分片技术。除了域名分片技术外，还可以把站点升级到 HTTP2，因为 HTTP2 已经没有每个域名最多维护 6 个 TCP 连接的限制了。

2、TTFB时间太久

原因可能如下：

• 服务器生成页面数据的时间过久， 服务器收到用户请求时，需要去数据库取数据，服务器处理数据的时间太久
• 网络原因，网络也会导致TTFB时间过长
• 发送请求头时带上了多余的用户信息， 信息过多，导致服务器处理耗时较长

面对第一种服务器的问题，你可以想办法去提高服务器的处理速度，比如通过增加各种缓存的技术；针对第二种网络问题，你可以使用 CDN 来缓存一些静态文件；至于第三种，你在发送请求时就去尽可能地减少一些不必要的 Cookie 数据信息。

3、Content Download时间长

如果单个请求的 Content Download 花费了大量时间，有可能是字节数太多的原因导致的。这时候你就需要减少文件大小，比如压缩、去掉源码中不必要的注释等方法。