HTTP/1.1:浏览器请求排队。请参阅下面的部分。
HTTP/2:排队与HTTP/1.1有不同的含义和分析。阅读这篇关于队头阻塞 (HOLB) 的精彩文章。
HTTP/3:QUIC 协议大大减少了队头阻塞,但仍然可能发生在流级别。 深度文章
这是我使用 Wireshark 对 TTFB 时序进行的分析,这可以作为调试工作的补充。
来自上文来源:
这意味着即使在 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
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]
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
栏上的请求上,可以看到请求的详细信息。作为第一种方法,长时间排队请求之前可以是一个或多个对任何项目具有高值的请求。使用下面的命令行获取 csv,然后使用
制作图表
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