web性能优化工具篇之 Network 面板

牛牛_lz
1,404 阅读4分钟

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

本篇介绍 chrome 中的 Network 面板。

打开方式

  1. 在 chrome 浏览器上按 F12
  2. 在 chrome 浏览器上右键选择检查
  3. 在 chrome 浏览器上 Control + Shift + J(Windows、Linux) 或 Command + Option + J(Mac OS)

整体图

按照上述打开方式打开 NetWork 面板后，可以看到如下的界面。主要由五个区域组成。

image.png

  1. 控制器：控制面板的外观与功能。 
  2. 过滤器：过滤请求列表中显示的资源,按住Command（Mac）或Ctrl（Window/Linux），然后点击过滤器可以同时选择多个过滤器。
  3. 概览：显示HTTP请求、响应的时间轴，展示请求的轮廓图。
  4. 请求列表：默认时间排序，可选择显示列。可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看。
  5. 概要：请求总数、总数据量、总花费时间等。

控制器

image.png

  1. Stop recording / Record Network Log 抓包/停止抓包。
  2. Clear 清除请求列表中的请求。
  3. Filter 显示/隐藏筛选。
  4. Search 搜索。
  5. Preserve log 勾选后可保持上一次的请求，可以在页面跳转时使用。
  6. Disable cache 勾选后禁用浏览器缓存。
  7. No throttling 可以切换网络状态，模拟弱网环境。
  8. More Network Conditions 网络更多设置。
  9. 导入/导出 HAR 文件。

过滤器

在控制器中的 Filter 按钮点击显示筛选，过滤器才会展示。 image.png

  1. 文本框筛选。
  2. invert 反选。
  3. Hide data URLS：隐藏前缀为 data: 协议的 URL，其允许内容创建者向文档中嵌入小文件。比如：用 base64 展示图片。
  4. 具体类型筛选，All (全部)、XHR (XMLHttpRequest 和 fetch)、JS（JavaScript）、CSS (样式表)、Img (图片资源)、Media (媒体资源)、Font (字体资源)、Doc（Documents）、WS (WebSocket)、Wasm（WebAssembly）、MainFest、Other。
  5. has Blocked cookies：是否展示被阻止的 cookies；blocked requests： 是否展示被阻止的 request。

概览

勾选 showOverview 后会展示轮廓图，通常不勾选。

请求列表

在 Name 处右键可以选择/取消展示的字段。 image.png

  • Name：资源名称。
  • URL：请求的 URL。
  • Method：请求方式，GET、POST等。
  • Status：HTTP状态代码。
  • Protocol：请求协议。
  • Domain：域名。
  • Type：请求的资源的MIME类型。
  • Initiator：发起请求的对象或进程。它可能有以下几种值：
    • Parser（解析器）：Chrome的 HTML 解析器发起了请求（鼠标悬停显示JS脚本）。
    • Redirect（重定向）：HTTP重定向启动了请求。
    • Script（脚本）：脚本启动了请求。
  • Cookies：该请求包含的 cookies 个数。
  • Size：服务器返回的响应大小（包括头部和包体），可显示解压后大小。
  • Time：总持续时间，从请求的开始到接受响应中的最后一个字节。
  • ConnectionId：链接ID。
  • Waterfall：各请求相关活动的直观分析图。

image.png

  • Queuedat：执行到 Initator 的时间
  • Startedat：开始请求流程的时间
  • Queueing：排队：已有高优先级的请求、已经达到了 TCP 链接数量、浏览器正在磁盘缓存中短暂分配空间
  • Stalled：由于排队而停下来等待的时间
  • DNSLookup：DNS 查找 IP
  • Initialconnection：初始化链接
  • Proxynegotiation：代理协商
  • Requestsent：请求发送
  • ServiceWorkerPreparation：浏览器准备启动 ServiceWorker
  • RequesttoServiceWorker：向 ServiceWorker 发送请求
  • Waiting(TTFB)：第一个字节返回的时间。TTFB 代表到第一个字节的时间。此时间包括一次往返延迟和服务器准备响应所花费的时间。
  • ContentDownload：浏览器正在接收响应
  • ReceivingPush：浏览器正在通过 HTTP/2 服务器推送接收数据
  • ReadingPush：浏览器正在读取先前接收的本地数据

概要

image.png

  • requests：若勾选Hide data URLs，会屏蔽掉 data: 开头的资源。
  • transferred：所有资源的压缩大小即网络传输的资源大小。
  • resources：所有资源未压缩的大小。
  • Finish：页面上所有 http 请求发送到响应完成的时间总和。
  • DOMContentLoaded：DOM 树构建完成的时间。
  • Load：页面加载完毕的时间。

最后说一句

如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。

avatar
文章
阅读
粉丝