网络面板

Network 面板记录页面上每个网络操作的相关信息，包括详细的耗时数据、HTTP 请求与响应标头和 Cookie，等等。

面板介绍

Network 面板由五个窗格组成：

1. Controls。使用这些选项可以控制 Network 面板的外观和功能。
2. Filters。 使用这些选项可以控制在 Requests Table 中显示哪些资源。提示：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 并点击过滤器可以同时选择多个过滤器。
3. Overview。 此图表显示了资源检索时间的时间线。如果您看到多条竖线堆叠在一起，则说明这些资源被同时检索。
4. Requests Table。 此表格列出了检索的每一个资源。 默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。 提示：右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列。
5. Summary。 此窗格可以一目了然地告诉您请求总数、传输的数据量和加载时间。

其中的Requests Table会显示以下列：

1. Name。资源的名称。
2. Status。HTTP 状态代码。
3. Type。已请求资源的 MIME 类型。
4. Initiator。发起请求的对象或进程。值为以下选项之一：
   4.1. Parser。Chrome 的 HTML 解析器发起请求。
   4.2. Redirect。HTTP 重定向发起请求。
   4.3. Script。脚本发起请求。
   4.4. Other。某些其他进程或操作发起请求，例如用户通过链接或者在地址栏中输入网址导航到页面。
5. Size。响应标头（通常为数百字节）加响应正文（由服务器提供）的组合大小。
6. Time。从请求开始至在响应中接收到最终字节的总持续时间。
7. Timeline。Timeline 列可以显示所有网络请求的可视瀑布。 点击此列的标题可以显示一个包含更多排序字段的菜单。

功能

1. 可以通过工具栏来记录网络活动和在记录期间捕捉屏幕截图。
2. 可以通过Summary窗格查看DOMContentLoaded和load事件信息。
3. 可以点击单个资源来查看它的详细信息，包括Headers（HTTP报文头部）、Preview（JSON、图像、文本资源的预览）、Response（响应数据）、Timing（资源请求生命周期）、Cookies、WebSocket
4. 按住Shift并将鼠标悬停在资源上，可以查看其发起者和依赖项。目标上方的第一个绿色编码资源为目标的发起者。 如果上方存在第二个也是绿色编码的资源，那么该资源将是发起者的发起者。 目标下方红色编码的任何资源都是目标的依赖项。
5. 过滤请求，支持使用关键字来过滤，也支持通过点击特点的资源类型来过滤请求（比如：XHR、JS、CSS、Img等等）
6. 可以复制、保存和清除网络信息

Requests Table 的排序

1. Timeline。按每个网络请求的开始时间排序。这是默认排序方式，与按 Start Time 选项排序相同。
2. Start Time。按每个网络请求的开始时间排序（与按 Timeline 选项排序相同）。
3. Response Time。按每个请求的响应时间排序。
4. End Time。按每个请求完成的时间排序。
5. Duration。按每个请求的总时间排序。选择此过滤器可以确定哪些资源的加载时间最长。
6. Latency。按请求开始与响应开始之间的时间排序。 选择此过滤器可以确定哪些资源至第一字节 (TTFB) 的时间最长。

Timing里的名词解释：

1. Queuing，在队列中时间。可能是因为请求已被渲染引擎推迟、请求已被暂停（以等待将要释放的不可用 TCP 套接字或者因为在 HTTP 1 上，浏览器仅允许每个源拥有六个 TCP 连接）、生成磁盘缓存条目所用的时间（通常非常迅速）
2. Stalled/Blocking，请求等待发送所用的时间。
3. 与代理服务器连接协商所用的时间。
4. DNS lookup，执行 DNS 查询所用的时间。
5. initial connection / Connecting，建立连接所用的时间，包括 TCP 握手/重试和协商 SSL 的时间。
6. SSL，完成 SSL 握手所用的时间。
7. Request sent / Sending，发出网络请求所用的时间。 通常不到一毫秒。
8. Waiting (TTFB)，等待初始响应所用的时间，也称为至第一字节的时间。 此时间将捕捉到服务器往返的延迟时间，以及等待服务器传送响应所用的时间。
9. Content Download，接收响应数据所用的时间。

通过Timing可以诊断的网络问题

1. 很多请求列表罗列，表明正在从单个网域检索太多的资源。可以借助HTTP 2或者HTTP 1的域分片解决
2. 单条请求的返回第一字节的时间过于漫长，有可能是网络拥堵，也有可能是服务器响应太慢
3. 单条请求的Content Download花费了大量时间，有可能是因为字节数太多

Cookie表的字段说明：

1. Name。Cookie 的名称。
2. Value。Cookie 的值。
3. Domain。Cookie 所属的域。
4. Path。Cookie 来源的网址路径。
5. Expires / Max-Age。Cookie 的 expires 或 max-age 属性的值。
6. Size。Cookie 的大小（以字节为单位）。
7. HTTP。指示 Cookie 应仅由浏览器在 HTTP 请求中设置，而无法通过 JavaScript 访问。
8. Secure。如果存在此属性，则指示 Cookie 应仅通过安全连接传输。

WebSocket表的字段说明：

1. Data。消息负载。如果消息为纯文本，将在此处显示。 对于二进制操作码，此字段将显示操作码的名称和代码。 支持以下操作码：
   1.1. 延续框架
   1.2. 二进制框架
   1.3. 连接关闭框架
   1.4. Ping 框架
   1.5. Pong 框架
2. Length。消息负载的长度（以字节为单位）。
3. Time。消息创建时的时间戳。

消息根据其类型进行彩色编码：

1. 传出文本消息为浅绿色。
2. 传入文本消息为白色。
3. WebSocket 操作码为浅黄色。
4. 错误为浅红色。

Filter文本字段支持的关键字：

1. domain。仅显示来自指定域的资源。您可以使用通配符字符 () 来包含多个域。 例如，.com 将显示来自以 .com 结尾的所有域名的资源。 DevTools 会使用它遇到的所有域填充自动填充下拉菜单。
2. has-response-header。显示包含指定 HTTP 响应标头的资源。 DevTools 会使用它遇到的所有响应标头填充自动填充下拉菜单。
3. is。使用 is:running 可以查找 WebSocket 资源。
4. larger-than。显示大于指定大小的资源（以字节为单位）。 将值设为 1000 等同于设置为 1k。
5. method。显示通过指定 HTTP 方法类型检索的资源。 DevTools 会使用它遇到的所有 HTTP 方法填充下拉菜单。
6. mime-type。显示指定 MIME 类型的资源。DevTools 会使用它遇到的所有 MIME 类型填充下拉菜单。
7. mixed-content。显示所有混合内容资源 (mixed-content:all)，或者仅显示当前显示的资源 (mixed-content:displayed)。
8. scheme。显示通过未保护 HTTP (scheme:http) 或受保护 HTTPS (scheme:https) 检索的资源。
9. set-cookie-domain。显示具有 Set-Cookie 标头并带有与指定值匹配的 Domain 属性的资源。 DevTools 会使用它遇到的所有 Cookie 域填充自动填充下拉菜单。
10. set-cookie-name。显示具有 Set-Cookie 标头并且名称与指定值匹配的资源。 DevTools 会使用它遇到的所有 Cookie 名称填充自动填充下拉菜单。
11. set-cookie-value。显示具有 Set-Cookie 标头并且值与指定值匹配的资源。 DevTools 会使用它遇到的所有 Cookie 值填充自动填充下拉菜单。
12. status-code。仅显示 HTTP 状态代码与指定代码匹配的资源。 DevTools 会使用它遇到的所有状态代码填充自动填充下拉菜单。

参考

测量资源加载时间
了解 Resource Timing
在不断变化的网络条件下优化性能