Network 面板
Network(网络)面板包含5个窗格：
- Controls(控件): 使用这些选项可以控制 Network(网络)面板的外观和功能。
- Filters(过滤器): 使用这些选项可以控制在请求列表中显示哪些资源。提示：按住Cmd（Mac）或Ctrl（Window / Linux），然后点击过滤器可以同时选择多个过滤器。
- Overview(概览): 这个图表显示检索资源的时间轴。如果您看到多个垂直堆叠的栏，这意味着这些资源被同时检索。
- Requests Table(请求列表): 此列表列出了检索的每个资源。默认情况下，此表按时间顺序排序，也就是最早的资源在顶部。单击资源名称可以获得更多信息。提示：右键单击列表的任何标题栏可以以添加或删除信息列。
- Summary(概要): 概要窗格告诉您请求的总数，传输的数据量，和加载时间。
Filter requests
Filter requests by properties
图示：
如果Network面板没有filter相关项
点击下列图标：
Filter输入框可以输入不同的属性组合，以空格分隔，来过滤请求。支持的属性如下：
domain. 只展示来自指定域名的资源，可以使用通配符*来筛选多个域名
has-response-header: 显示包含指定 HTTP response header的资源。
is:is-running查找WebSocekt资源。
larger-than: 显示大于指定大小的资源。比如：设置1000相当于设置1K。method：显示指定的HTTP请求方式mime-type: 显示指定的 MIME type 资源。mixed-contentscheme: 显示指定的http、https、ws协议的资源。set-cookie-domain: 显示Response header 中Set-Cookie配置带有的Domain属性与指定的值匹配的资源。set-cookie-value：显示Set-Cookie中的value与指定的value匹配的资源。status-code：显示与指定的状态码匹配的HTTP 状态码的资源。
Filter requests by type
通过请求类型过滤请求，点击Network面板中XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Manifest, or Other。 同时过滤多种类型，快捷键：Command（MAC）/ Control(Window,Linux)，然后click。
Filter requests by time
在10S-20S的区间里，只有ws请求是仍在活动的。
Hide data URLs
Data URLs即前缀为 data: 协议的URL，其允许内容创建者向文档中嵌入小文件。
语法
前缀(data:)、指示数据类型的MIME类型、如果非文本则为可选的base64标记、数据本身：
data:[<mediatype>][;base64],<data>
mediatype 是个 MIME 类型的字符串，例如 "image/jpeg" 表示 JPEG 图像文件。如果被省略，则默认值为 text/plain;charset=US-ASCII
🌰 简单的 text/plain 类型数据
data:,Hello%2C%20World!
🌰上一条示例的 base64 编码版本 可以通过window.btoa('Hello%2C%20World!')创建一个 base-64 编码的字符串,base-64 解码使用方法是 atob() 。
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
选中Hide data URLs后，以下data:前缀的资源不可见。
Sort requests
根据请求的表头字段来排序
Sort by activity phase
在表头右键，hover Waterfall选项，二级选项有：
- Start Time： 按照请求开始时间先后排序
- Response Time：按照请求开始下载的先后时间排序。
- End Time：按照请求结束的时间先后排序。
- Total Duration: The request with the shortest connection setup and request / response is at the top.
- Latency：排在首个得失请求响应等待最短的时间。
可以选择正序或者倒叙：
View the timing breakdown of a request
选择一个请求查看 Timing Tab
Timing tab 下的字段分析
- Queueing，下列情况，浏览器会让请求排队:
- 有更高优先级的请求。
- 当前域名下已经开启了6个TCP链接，限制不能超过六个，只适用于 HTTP/1.0 和 HTTP/1.1。
- 浏览器正在生成磁盘缓存条目（通常非常快）
- Stalled/Blocking (停止/阻塞)： 发送请求之前等待的时间。它可能因为进入队列的任意原因而被阻塞。这个时间包括代理协商的时间。
- DNS Lookup：浏览器正在执行DNS解析即请求的IP地址。 页面上的每个新域都需要完整的往返(roundtrip)才能进行DNS查找。
- Proxy negotiation（代理协商）：浏览器正在与请求的代理服务器协商。
- Request Sent / Sending (请求已发送/正在发送)：发出网络请求所花费的时间。 通常是几分之一毫秒。
- ServiceWorker Preparation. The browser is starting up the service worker. Request to ServiceWorker. The request is being sent to the service worker.
- Waiting (TTFB)：等待初始响应所花费的时间，也称为
Time To First Byte(接收到第一个字节所花费的时间)。这个时间除了等待服务器传递响应所花费的时间之外，还捕获到服务器发送数据的延迟时间。 - Receiving Push：浏览器正在通过HTTP/2 Server Push接收数据。
- Reading Push：浏览器正在读取本地接收到的数据。
- Content Download / Downloading (内容下载/下载)：接收响应数据所花费的时间，从接收到第一个字节开始，到下载完最后一个字节结束
如果您看到Content Download(内容下载)阶段花费了很多时间，提高服务响应速度、并行下载等优化措施帮助都不大。 主要的解决方案是发送更少的字节。（比如，下载一张高质量的大图，可能是几兆，这个时候你需要优化图片。）
View initiators and dependencie
查看某一个请求的发起者和依赖, 在请求列表中选中某个请求，按住 Shift， initiators 是绿色，dependencie为红色。
View the uncompressed size of a resource
所选接口压缩后的尺寸是3.3KB，而未压缩尺寸是53.9KB。
