10分钟教你看懂谷歌浏览器的Network分析

/ 2021-05-25 / 22人浏览 / 0人评论

众所周知,Network的功能强大,很多开发者或者是网站从业人员都是需要会熟练使用它,通过分析它能获取很多重要信息,所以它很重要。

打开方式

常用打开方式,是键盘F12键位或者鼠标右键选择检查。打开后如下图所示 Network

常用

看上图中请求列表区域,以列表显示的,就是通过分析这块数据,来判断网站、接口、静态文件等异常情况,也可以根据列表数据来看具体的细节 Network 如上图所示,我们能看到每一个请求的详细数据(所以有些敏感数据是需要进行加密的,不然一目了然),同时可以看到接口传参、请求头以及返回值,来判断接口调用是否OK。 Timing 还可以通过Timing去分析,接口、页面加载快慢,详细分析可以知道慢在什么地方,是慢的DNS解析,还是程序代码亦或者是数据传输过程慢。

Network组成结构

Chrome的Network面板主要由5个部分组成,包括控制器、过滤器、概览、请求列表、概要,下面简单介绍下这5个部分的作用。

  • 控制器:主要是一些设定以及相关功能
  • 过滤器:过滤请求列表中显示的资源,按住Command(Mac)或Ctrl(Window/Linux),然后点击过滤器可以同时选择多个过滤器。
  • 概览:显示HTTP请求、响应的时间轴。
  • 概要:请求总数、总数据量、总花费时间等。
  • 请求列表:默认时间排序,可选择显示列。可以看到所有的资源请求,包括网络请求,图片资源,html,css,js文件等请求,可以根据需求筛选请求项,一般多用于网络请求的查看和分析,分析后端接口是否正确传输,获取的数据是否准确,请求头,请求参数的查看

控制器

直接截图来说明控制器: 控制器 补充:offline 表示离线模式

过滤器

过滤器最前面的输入框可以输入关键词,下面请求列表会进行过滤。输入框之后的都是快速过滤按钮,只看js,css,img等。

请求列表

不管是控制器、过滤器都是最终为了展示请求列表的,毕竟请求才是核心,所以详细说明下请求列表这块。 请求列表 列表默认展示 name、status、type 、Initiaor 、size 、time 、 waterfall几个字段组成,同时你可以根据你的需要,右击标题行,调整字段,还可以设置排序字段以及响应头。 还能够查看请求上下游,按住 shift 键悬停请求上,绿色是上游,红色是下游。 基本组成字段的含义:

Name:资源的名称
Status:HTTP状态代码
Type:请求的资源的MIME类型
Initiator:发起请求的对象或进程。它可能有以下几种值:
Size:服务器返回的响应大小(包括头部和包体),可显示解压后大小
Time:总持续时间,从请求的开始到接受响应中的最后一个字节
Waterfall:各请求相关活动的直观分析图

单个请求

请求列表中点击单个请求,获得如下页面: 单个请求

从图上可以看到如下信息:

查看头部,包括请求头、响应头。

查看Cookie

预览响应正文:查看图像用

查看响应正文

时间详细分布

导出数据为HAR格式

查看未压缩的资源大小:Use Large Request Rows

浏览器加载时间(概览、概要、请求列表)DOMContentLoaded 事件的颜色设置为蓝色,而load事件设置为红色

将请求数据复制到剪贴板

	Copy Link Address:将请求的网址复制到剪贴板
	Copy Response:将响应包体复制到剪贴板
	Cop as cURL:以 cURL 命令形式复制请求
	Copy All as cURL:以一系列 cURL 命令形式复制所有请求
	Copy All as HAR:以 HAR 数据形式复制所有请求

Waterfall 详解

每个请求都有一个 Waterfal diagrams(瀑布图) Waterfall 图上字段表示的意思:

  • Queueing. 出现下面的情况时,浏览器会把当前请求放入队列中进行排队
    • 有更高优先级的请求时.
    • 和目标服务器已经建立了6个TCP连接(最多6个,适用于HTTP/1.0和HTTP/1.1)
    • 浏览器正在硬盘缓存上简单的分配空间
  • Stalled. 请求会因为上面的任一个原因而阻塞
  • DNS Lookup. 浏览器起正在解析IP地址.
  • Proxy negotiation. The browser is negotiating the request with a proxy server.
  • Request sent. The request is being sent.
  • ServiceWorker Preparation. The browser is starting up the service worker.
  • Request to ServiceWorker. The request is being sent to the service worker.
  • Waiting (TTFB). 浏览器等待响应第一个字节到达的时间. 包含来回的延迟时间和服务器准备响应的时间.
  • Content Download. The browser is receiving the response.
  • Receiving Push. The browser is receiving data for this response via HTTP/2 Server Push.
  • Reading Push. The browser is reading the local data previously received.
  • DNS Lookup - 在浏览器和服务器进行通信之前, 必须经过DNS查询, 将域名转换成IP地址. 在这个阶段, 你可以处理的东西很少. 但幸运的是, 并非所有的请求都需要经过这一阶段.
  • Initial Connection - 在浏览器发送请求之前, 必须建立TCP连接. 这个过程仅仅发生在瀑布图中的开头几行, 否则这就是个性能问题(后边细说).
  • SSL/TLS Negotiation - 如果你的页面是通过SSL/TLS这类安全协议加载资源, 这段时间就是浏览器建立安全连接的过程. 目前Google将HTTPS作为其 搜索排名因素 之一, SSL/TLS 协商的使用变得越来越普遍了.
  • Time To First Byte (TTFB) - TTFB 是浏览器请求发送到服务器的时间+服务器处理请求时间+响应报文的第一字节到达浏览器的时间. 我们用这个指标来判断你的web服务器是否性能不够, 或者说你是否需要使用CDN.
  • Downloading - 这是浏览器用来下载资源所用的时间. 这段时间越长, 说明资源越大. 理想情况下, 你可以通过控制资源的大小来控制这段时间的长度.

全部评论