【前端】Chrome DevTools 笔记

2023-10-17 09:55:37 浏览数 (2)

1. 查看网络耗时 timeline

生命周期按照以下类别显示花费的时间:

  • Queuing
  • Stalled
  • 如果适用:DNS lookup、initial connection、SSL handshake
  • Request sent
  • Waiting (TTFB)
  • Content Download

详细解释:

  • Queuing 如果某个请求正在排队,则指示: 请求已被渲染引擎推迟,因为该请求的优先级被视为低于关键资源(例如脚本/样式)的优先级。 图像经常发生这种情况。 请求已被暂停,以等待将要释放的不可用 TCP 套接字。 请求已被暂停,因为在 HTTP 1 上,浏览器仅允许每个源拥有六个 TCP 连接。 生成磁盘缓存条目所用的时间(通常非常迅速)
  • Stalled/Blocking 请求等待发送所用的时间。 可以是等待 Queueing 中介绍的任何一个原因。 此外,此时间包含代理协商所用的任何时间。
  • Proxy Negotiation 与代理服务器连接协商所用的时间。
  • DNS Lookup 执行 DNS 查询所用的时间。 页面上的每一个新域都需要完整的往返才能执行 DNS 查询。
  • Initial Connection / Connecting 建立连接所用的时间,包括 TCP 握手/重试和协商 SSL 的时间。
  • SSL 完成 SSL 握手所用的时间。
  • Request Sent / Sending 发出网络请求所用的时间。 通常不到一毫秒。
  • Waiting (TTFB) 等待初始响应所用的时间,也称为至第一字节的时间。 此时间将捕捉到服务器往返的延迟时间,以及等待服务器传送响应所用的时间。
  • Content Download / Downloading 接收响应数据所用的时间。

0 人点赞