谷歌浏览器 Network使用

浏览器 Network使用"/>

谷歌浏览器 Network使用

• Preserve log：刷新或跳转页面，不会清空之前的请求记录
  • 页面跳转后，查看跳转前发了什么请求
  • 登录成功后，返回了什么数据，又发了什么请求，重定向到什么地址
• Disable cache：停用浏览器缓存

过滤器

• XHR: 异步请求资源

• 过滤文件类型
  

• domain 过滤域
  

• has-response-header：过滤响应头属性
  

• larger-than：过滤资源大小，默认单位（byte，缺省）
  

• method：过滤HTTP请求类型
  

• status-code: 过滤HTTP状态码
  

• is

  • is:running：查找WebSocket资源
  • is:from-cache：查找从缓存读取的资源
    

资源内容

• Size：从服务器下载的文件和服务器返回资源大小，包括请求头和响应体。如果是从缓存中获取的资源，显示from cache
• Time：持续时间，从请求开始到拿到服务器响应数据的最后一个字节

资源内容操作

右键资源内容

• Copy link address: 复制请求地址 e.g.

单个资源内容查看

• Hearders: 查看请求头，响应头
• Preview: 根据选择的资源类型(JSON、图片、文本、JS、CSS)显示相应的预览
• Response: 根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response响应内容(纯字符串)
• Timing: 显示资源在整个请求过程中各部分的时间花费
• Cookies: 查看发起请求和服务器响应时携带的cookies
  • Name: cookie名称
  • Value: cookie的值
  • Domain: cookie所属的域名
  • Path: cookie所属的URL
  • Expire/Max-Age: cookie的存活时间
  • Size: cookie的字节大小
  • HTTP: 表示cookie只能被浏览器设置，而且JS不能修改
  • Secure: cookie只能在安全连接(https)上传输
    
    

Timing

• Queueing: 排队

  • 存在更高优先级请求
  • 超过浏览器最大并发请求，谷歌浏览器最大并发连接数为6个（HTTP/1.0 | HTTP/1.1)
  • 服务器不可用

• Stalled：阻塞，因放入队列而发生的停滞时间

• DNS Lookup: 域名解析时间，请求某域名下的资源，浏览器先通过DNS解析器得到该域名服务器的IP地址

• Initial Connection: 建立连接的时间花费，包含TCP握手和重试时间

• Request sent: 发送请求消耗的时间

• Wating(TTFB: time to firrst byte) : 最初的网络请求发起到服务器接收到第一个字节的时间。如果超过200ms，应该进行性能优化

• Content Dowload: 获得response响应数据的时间

• 橙色：初始连接

• 绿色：等待中

• 蓝色：内容下载

• 深灰：停滞，代理转发、请求发送

• 浅灰：查询中

资源概况

• 总共发起62个请求
• 加载数据量3.3MB
• 完成时间
• DOMContentLoaded: 页面上DOM完全加载并解析完毕后触发，不会等待CSS、图片、子框架加载完成
• Load: 页面上所有DOM、CSS、JS、图片完全加载完毕后触发

DOMContentLoaded事件/Load事件触发时机：

1. 解析HTML结构
2. 加载外部脚本和样式表文件
3. 解析并执行脚本代码 // 部分脚本会阻塞页面的加载
4. DOM树构建完成 // DOMContentLoaded事件
5. 加载图片等外部文件
6. 页面加载完毕 // Load事件