一、Network 面板介绍
其中:
- Controls 控制 Network 的外观和功能。
- Filters 控制 Requests Table 具体显示哪些内容。
- Overview 显示获取到资源的时间轴信息。
- Requests Table 按资源获取的前后顺序显示所有获取到的资源信息,点击资源名可以查看该资源的详细信息。
- Summary 显示总的请求数、数据传输量、加载时间信息。
二、Controls
- Record Network Log / Stop recording network log
开始/停止记录网络请求
- Clear
清空当前记录内容
- Filter
展开/收起 Filters 菜单
- Search
展开/收起 Search 菜单
- Preserve log
刷新界面时,保留/不保留上次网络请求记录
- Disable cache
禁用/不禁用网络缓存功能。当禁用时,每次界面刷新都跟首次打开界面的效果一样,可以方便优化首次进入界面的性能
- Trottling
模拟不同的网络条件
- Import HAR file
导入 HAR 格式的网络调试记录
- Export HAR file
将当前已记录的网络请求记录导出成 HAR 文件
三、Filters
- 筛选输入框
输入筛选词来筛选特定的请求,支持按以下内容筛选:
1 | 1、domain |
- Hide Data URLs
隐藏/不隐藏 Data URLs 类型的文件
- Filter requests by type
通过类型筛选请求,包含 XHR、JS、CSS、Img、Media、Font、Doc、WS(WebSocket)、Mainfest 以及其他 Other
- Has blocked cookies
有/没有 blocked cookies
- Blocked Requests
有/没有 blocked 请求
四、Overview
以时间轴方式展示所有的请求
五、Requests Table
在 Requests Table 的 Header 上可以右键显示更多的列,默认显示以下列:
- Name
请求或资源的文件名或唯一标识
- Status
HTTP 状态码
- Type
资源的 MIME 类型
- Initiator
请求发起者,共分以下几种:
Parser:Chrome 的 HTML parser
Redirect:HTTP 重定向
Script:JavaScript 脚本
Other:其它
- Size
请求 response 的 Header 和 body 大小之和
- Time
请求的全部耗时,包括请求发出到收到数据的总时间
- Waterfall
每个请求的可视化分解
六、Summary
total number of requests
total download size over network
total resources loaded by the page
DOMContentLoaded
Load
七、timing breakdown
请求耗时分解,共有以下阶段:
Resource Scheduling
- Queueing
排队中;有以下情况会导致请求排队:
1、有更高优先级的请求
2、每个域名已经建立了超过 6 个 TCP 连接(HTTP/1.0 或 HTTP/1.1 才有这个限制)
3、浏览器正在分配磁盘空间
Connection Start
- Stalled
停止;一个请求可能会因为导致 Queueing 的原因而导致 Stalled
解决 Queueing/Stalled 问题的方法:
1、如果必须使用 HTTP/1.0 或 HTTP/1.1 ,进行域名分片(domain sharding)来解决 6 个 TCP 连接的限制
2、使用 HTTP/2 以规避 6 个 TCP 连接的限制
3、删除或推迟发送不必要的请求
- DNS Lookup
DNS 寻找 IP 地址
- Initial connection
浏览器建立请求链接耗时,包括 TCP 握手/重试和 SSL 协商
- Proxy negotiation
与代理服务器协商请求
Request/Response
- Request sent
请求发送
- ServiceWorker Preparation
浏览器启动 ServiceWorker
- Request to ServiceWorker
请求正在发送给 ServiceWorker
- Waiting (TTFB)
浏览器正在等待 response 的第一个字节,TTFB 是 Time To First Byte 的缩写。这个耗时包括请求 1 个往返的延迟,以及服务器准备响应所用的时间。
可能导致 TTFB 的原因:
1、客户端和服务器的网络连接慢
2、服务器响应速度慢
对应的解决方案:
1、通过 CDN 优化客户端服务端网络连接慢问题
2、服务器优化响应速度
- Content Download
浏览器接收 response
- Receiving Push
浏览器正在接收 HTTP/2 的服务器 Push
- Reading Push
浏览器正在读取之前收到的 Push 数据
八、其它
- Use large request rows
选项开启后,会以双行的形式展示 size 列,其中上面深颜色的表示通过网络传输的大小,下面浅颜色的表示未经压缩的尺寸
- Capture screenshots
选项开启后,会新增一个显示截图的面板。重新刷新网页就能看到界面截图: