背景：Chrome 有一个请求队列。在某些情况下，它会对可延迟的请求进行排队。但我发现很难确定哪些请求导致请求排队。

我的问题是：我们有办法深入了解排队问题的根本原因吗？

源代码 https://chromium.googlesource.com/chromium/src/+/refs/tags/74.0.3693.6/services/network/resource_scheduler.cc#388

镀铬文档 https://developer.chrome.com/docs/devtools/network/reference/#timing

HTTP/1.1 与 HTTP/2

对于HTTP/2排队有不同的含义和分析。阅读这篇精彩的文章队头阻塞 (HOLB) https://engineering.salesforce.com/the-full-picture-on-http-2-and-hol-blocking-7f964b34d205/.

这是我的分析 https://stackoverflow.com/a/52770802/2834978使用 Wireshark 进行 TTFB 计时，这可以作为调试工作的补充。

HTTP/2

HOLB 可能有 2 个原因：HTTP 和 TCP。请求阻塞仍然可能发生（可能是由于 TCP 原因）。

拥有页面/站点的 HAR 文件，使用以下命令查找条目.blocked > 50 over timings（请阅读下面的HTTP/1.1分析）

    "timings": {
      "blocked": 286,
      "dns": 0,
      "connect": 0,
      "ssl": 0,
      "send": 0,
      "wait": 605,
      "receive": 163
    }

jq -r '.log.entries | to_entries[] | select(.value.response.httpVersion == "HTTP/2" and .value.timings.blocked > 0) | [.key, .value.request.url, .value.timings.blocked]' stackoverflow.com.har

Result

[12,"https://www.gravatar.com/avatar/05b09a797fd0c59d1627b30fb4cdba01?s=32&d=identicon&r=PG&f=1",140]
[19,"https://i.stack.imgur.com/jHqqo.jpg?s=32&g=1",319]
[22,"https://lh3.googleusercontent.com/a/AItbvmmvptZFLppl8vyYo83v1QOQJwt-90sdRzBnyw9Z=k-s32",7]
[23,"https://lh3.googleusercontent.com/a/AATXAJwXX0y4AkD3eL_6KvrwRXLmBviBVEXEb7X6U1WA=k-s32",6]
[27,"https://i.stack.imgur.com/kdIyT.jpg?s=32&g=1",314]
[48,"https://i.stack.imgur.com/65UsL.jpg?s=32&g=1",297]
[61,"https://i.stack.imgur.com/KLQJy.jpg?s=32&g=1",286]

HTTP/1.1

Chrome 可能有多种原因将请求排队 https://developer.chrome.com/docs/devtools/network/reference/#timing-explanation（与任何其他浏览器一样）

排队。浏览器在以下情况下对请求进行排队：

• 有更高优先级的请求。
• 已为此源打开 6 个 TCP 连接，这是限制。仅适用于 HTTP/1.0 和 HTTP/1.1。
• 浏览器正在短暂分配磁盘缓存空间

从开发人员工具的“网络”选项卡中，保存请求Save all as HAR with content并分析timings每个请求的对象

    "timings": {
      "blocked": 2.0329999979403803,
      "dns": -1,
      "ssl": -1,
      "connect": -1,
      "send": 0.397,
      "wait": 189.6199999998943,
      "receive": 296.10200000024633,
      "_blocked_queueing": 1.1759999979403801
    }

HAR 可以通过以下方式过滤jq, e.g. 查找条目_blocked_queueing > 50

jq -r '.log.entries | to_entries[] | if(.value.timings._blocked_queueing > 50) then [.key, .value.request.url, .value.timings._blocked_queueing,.value.timings.blocked ] else empty end' stackoverflow.com.har

Result:

[
  21,
  "https://graph.facebook.com/4191055284264423/picture?type=large",
  160.28299999743467,
  160.66799999743466
]
[
  66,
  "https://fonts.gstatic.com/s/robotoslab/v13/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjojISmb2Rm.ttf",
  55.99899999651825,
  109.53999999651825
]
[
  67,
  "https://fonts.gstatic.com/s/robotoslab/v13/BngbUXZYTXPIvIBgJJSb6s3BzlRRfKOFbvjoa4Omb2Rm.ttf",
  56.85599999560509,
  56.85599999560509
]

那么我们就可以检查 6 个前面的条目其中一项请求

jq -r --argjson idx 67 '.log.entries[($idx - 6):($idx + 1)] | .[] | [.request.url, .time, .timings]' stackoverflow.com.har

或者获取highest dns

jq -r '.log.entries | sort_by(.timings.dns|floor)[-1] | .timings.dns, .request.url' stackoverflow.com.har

438.551
https://example.com

谷歌提供了一个在线HAR分析仪 https://toolbox.googleapps.com/apps/har_analyzer/可以类似于开发工具网络窗格使用。

将鼠标悬停在请求上Waterfall栏，可以看到请求的详细信息。作为第一种方法，长排队请求之前可以是对任何项目具有高值的一个或多个请求。

使用下面的命令行获取 csv，然后使用以下命令制作图表

• 日期为 Unix 时间戳 [ms]
• 请求时间[毫秒]
• _blocked_queueing [毫秒]

jq -r '.log.entries | to_entries[] | [.value.startedDateTime, .value.serverIPAddress, .key, ((.value.startedDateTime[0:19] + "Z"|fromdateiso8601)*1000 + (.value.startedDateTime[20:23]|tonumber)), .value.time, .value.timings._blocked_queueing ] | @csv' stackoverflow.com.har | tee stackoverflow.com.har.csv