google-chrome-devtools - Chrome 开发者工具连接 ID

Question

我正在使用 Chrome 开发者工具(版本 49)。在网络选项卡下，有一系列列，例如名称、状态、类型..等。有谁知道 Connection ID 列的用途 每行都有一个 ID，例如 13461、14410、8738、8741、13516.... 还有这些数字是什么意思？

Answer 1

HTTP 在幕后使用称为 TCP 的网络协议(protocol)。浏览器维护 TCP 套接字和连接池。 DevTools 中的连接 ID 号指的是特定的 TCP 连接。为什么它们有用？好吧，来自 this post作者:Umar Hamsa(谷歌开发专家):

The new Connection ID Network Panel column in Canary can help indicate to you that a TCP connection was reused instead of handshaking and establishing a new one.

让我解释一下这意味着什么:

第一次如果您看到一个特定的连接 ID，则(可能)需要通过所谓的 TCP 握手建立一个新连接。出于性能原因，这很重要，因为 TCP 握手会产生相对较大的网络开销。我们正在创建一个新连接，因此获得 HTTP 响应需要更长的时间。

但是，对于 随后的时间如果您看到相同的 ID，则不会产生此开销。也就是说，浏览器不需要执行 TCP 握手，并且会重用相同的连接。这里我们说 TCP 连接仍然是“打开的”。已经建立的连接可以更快地获取 HTTP 响应数据。

所以这些数字基本上有助于检查/调试是否存在由 TCP 握手引起的网络开销。

例如:

Name      Connection ID    (TCP Handshake / Reused Connection)
foo.jpg   72218            Handshake
bar.jpg   72218            Reused
cat.jpg   79146            Handshake
baz.jpg   72218            Reused
dog.jpg   79146            Reused

在这里，下载 foo.jpg 会产生开销。和 cat.jpg因为建立连接需要 TCP 握手 72218和 79146分别。然而 bar.jpg , baz.jpg和 dog.jpg没有开销，因为它们正在重用各自的 TCP 连接。

注 1:重用 TCP 连接以避免重复 TCP 握手的想法是 HTTP 1.1 的一个特性，称为 Persistent Connections。 .默认情况下，所有 HTTP 1.1 连接都使用持久连接，所有现代浏览器都使用 HTTP 1.1。更多信息，我推荐阅读 High Performance Browser Networking 的第 11 章和第 14 章。书。

注意 2:如果 HTTP 请求需要 TCP 握手，您将在 DevTools 瀑布中看到一个橙色条，如果您将鼠标悬停在它上面，您将看到“初始连接” - 这告诉您握手花了多长时间以毫秒为单位。 TCP 连接可能会在选项卡和窗口之间重复使用，因此请注意——您可能第一次看到一个 ID，但它可能没有 TCP 握手!这可能是因为您之前访问过该页面并打开了与该主机的连接。也可能是因为 Chrome 预取了来自主机的资源 - 例如，当您在栏中键入地址时，Chrome 预取了一个网站图标。

注意 3:在较新版本的 Chrome 中，您可以在 chrome://net-internals/#http2 查看 HTTP 连接列表，其中显示了连接 ID 和主机。