有没有办法调试 Chrome 请求排队的原因？

问题描述

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

我的问题是：我们是否有办法深入研究排队问题的根本原因？

source code

chrome doc

解决方法

Chrome 可能queuing a request（与任何其他浏览器一样）的原因有多种

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

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

从开发者工具的 Network 选项卡中，使用 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

Here's my analysis 使用 Wireshark 的 TTFB 计时，这可以作为调试工作的补充。

Google 提供了一个 online HAR Analyzer，可以类似于开发工具网络窗格使用。

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