官网连接：https://developers.google.com/web/tools/chrome-devtools/network/
netWork面板包括五个部分：
- Controls：控制netWork的外观和功能
- Filters：控制Request Table的内容显示(搜索框内输入减号+文件名表示过滤掉某文件)
- Overvew：时间轴
- Request Table：请求列表，按资源获取的前后顺序显示所有的资源信息
- Summary：总请求数，数据传输量，加载时间
Request Table：
-
Name：资源名称
· Headers · Preview · Response · Cookies · Timing -
Status：http请求状态码
200：请求成功 201：创建成功 304：未修改，客户端从缓存中获取资源 400：参数错误，服务器无法理解 403：禁止访问，没有访问权限 404：没找到 409：服务器处理请求冲突 500：服务器内部错误 -
Type：请求的资源MINE类型
-
Initiator：标记请求源
Parser：Chrome的HTML解析器 Redirect：HTTP页面重定向 Script：由Script脚本发起 Other：由其他进程发起，如通过链接跳转到另一个页面或者在地址栏输入URL -
Size：请求的资源的大小，如果是从缓存中获取会显示 from cache
-
Time：请求或下载的时间，从发起Request到获取Response所用的总时间
-
Timeline：所有网络请求的时间状态轴(可视化瀑布流)
Controls：
- 抓包/停止抓包
- 清除请求
- 捕获屏幕，重新加载页面即可捕获屏幕
- 隐藏Filters窗格
- 隐藏Overview窗格
- Offline离线模式
- Network Throttling可自定义网速模拟慢速网络连接(网速阈值)
- Clear Browser Cache手动清除浏览器缓存
- Clear Browser Cookies手动清除浏览器cookies
- Disable Cache停用浏览器缓存
- Perverse log跨页面加载保存请求(保留日志)
- Replay XHR重新执行XHR请求
DOMContentLoaded和load事件：
DOMContentLoaded事件会在页面上DOM全部加载并解析完成之后触发，不会等待CSS，图片，子框架加载完成
load事件会在页面所有DOM，CSS，JS，图片完全加载完之后执行
DOMContentLoaded在Overview上以一条蓝色竖线标记，在Summary上以蓝色文字表示确切时间
load在Overview和Request Table上以一条红线竖线标记，在Summary上以红色文字表示确切时间
请求源和依赖项：
按住SHIFT键光标移上资源，第一个标记为绿色的资源就是请求源即资源的发起者，第二个为发起者的发起者，以此类推
标记为红色的资源就是该资源的依赖资源
浏览器加载时间(触发流程)：
- 解析HTML结构
- 加载外部脚本和样式表文件
- 解析执行脚本代码
- DOM树构建完成(DOMContentLoaded事件)
- 加载图片等外部文件
- 页面加载完成(load事件)
Timing：
- Queuing：排队的时间花费，如服务器不可用，超过浏览器请求最大并发连接数(Chrome的最大并发连接数是6)，存在更高优先级的请求
- Stalled：请求可能会因为Queuing停止；从HTTP建立连接到真正传输数据的时间花费，包含处理代理的时间，如果有已建立好的连接，还包含等待已建立连接被复用的时间
- Proxy Negotiation：与代理服务器建立连接的时间花费
- DNS Lookup：执行DNS查询的时间，网页上每一个新的域名都要经过一个DNS查询，第二次访问浏览器有缓存的话这个时间为0
- Initial Connection/Connecting：建立连接的时间花费，包含了TCP握手以及重试时间
- SSL：完成SSL握手的时间花费
- Request sent：发起请求的时间
- Waiting(Time to first byte (TTFB))：最初的网络请求被发起到服务器接受到第一个字节的时间花费，包含TCP连接时间，发送HTTP请求时间和获得响应消息的第一个字节的时间(超过200ms需要进行网络优化)
- Content Download：获取Response响应数据的时间花费
- Reading Push：浏览器正在读取之前收到的本地数据
- Receiving Push：浏览器正在接收服务器的响应数据
网友评论