有没有办法调试 chrome 请求排队的原因?

问题描述 投票:0回答:1

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

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

源代码

chrome 文档

google-chrome networking chromium request-queueing
1个回答
7
投票

HTTP/1.1 vs HTTP/2 vs HTTP/3

HTTP/1.1:浏览器请求排队。请参阅下面的部分。

HTTP/2:排队与HTTP/1.1有不同的含义和分析。阅读这篇关于队头阻塞 (HOLB) 的精彩文章。

HTTP/3:QUIC 协议大大减少了队头阻塞,但仍然可能发生在流级别。 深度文章

这是我使用 Wireshark 对 TTFB 时序进行的分析,这可以作为调试工作的补充。

HTTP/3

来自上文来源

这意味着即使在 QUIC 中,我们仍然存在某种形式的 HOL 阻塞:如果单个流内存在字节间隙,则流的后面部分仍然会卡住,等待该间隙被填充。

只需选择 HTTP/3 协议即可使用下面描述的时序分析方法

jq -c '.log.entries | to_entries[] | select(.value.response.httpVersion == "HTTP/3" and .value.timings.blocked > 0) | [.key, .value.timings.blocked, .value.request.url]' some_http3_enabled_site.com_Archive.har.json

HTTP/2

HOLB 可能有 2 个原因:HTTP 和 TCP。请求阻塞仍然可能发生(可能是由于 TCP 原因)。

拥有页面/站点的 HAR 文件,查找带有

.blocked > 50
超过
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

结果

[12,"https://www.gravatar.com/avatar/05b09a797fd0c59d1627b30fb4cdba01?s=32&d=identicon&r=PG&f=1",140]
[19,"https://i.sstatic.net/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.sstatic.net/kdIyT.jpg?s=32&g=1",314]
[48,"https://i.sstatic.net/65UsL.jpg?s=32&g=1",297]
[61,"https://i.sstatic.net/KLQJy.jpg?s=32&g=1",286]

HTTP/1.1

Chrome 排队请求(与任何其他浏览器一样)有多种原因

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

  • 有更高优先级的请求。
  • 已为此源打开 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
进行过滤,例如使用
_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

结果:

[
  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


或获得

最高dns


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


438.551 https://example.com
Google 提供了一个

在线 HAR 分析器,其使用方式与开发工具网络窗格类似。

将鼠标悬停在

Waterfall

栏上的请求上,可以看到请求的详细信息。作为第一种方法,长时间排队请求之前可以是一个或多个对任何项目具有高值的请求。

enter image description here

使用下面的命令行获取 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

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.