Chrome开发者工具连接ID [英] Chrome Developer Tools Connection ID

问题描述

我正在使用Chrome Developer工具(版本49).在网络"选项卡下，有一系列列，例如名称"，状态"，类型..etc".是否有人知道连接ID"列的用途?每一行都有一个ID，例如13461、14410、8738、8741、13516....这些数字又意味着什么?

解决方案

HTTP在幕后使用了称为TCP的网络协议.浏览器维护TCP套接字和连接池. DevTools中的连接ID 数字指的是特定的TCP连接.为什么有用?好吧，来自Umar Hamsa(Google开发人员专家)的此帖子:

金丝雀(Canary)中新的 Connection ID Network Panel(连接ID网络面板)列可以帮助您指示TCP连接已被重用，而不是握手和建立新的连接.

让我解释一下这是什么意思

• 第一次 ，您会看到一个特定的连接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涉及开销，因为分别设置连接72218和79146需要TCP握手.但是bar.jpg，baz.jpg和dog.jpg没有开销，因为它们正在重用各自的TCP连接.

---

注1:重复使用TCP连接以避免重复的TCP握手的想法是HTTP 1.1的一项功能，称为 永久连接 .默认情况下，所有HTTP 1.1连接都使用持久连接，所有现代浏览器都使用HTTP 1.1.有关更多信息，建议阅读高性能浏览器网络本书的第11章和第14章.

注2:如果HTTP请求需要进行TCP握手，则您会在DevTools瀑布中看到一个橙色条，如果将鼠标悬停在该条上，则会看到初始连接"-这表明您握手花费了多长时间(毫秒). TCP连接可能会在选项卡和窗口之间重复使用，因此请当心-您可能会第一次看到一个ID，但可能没有TCP握手！这可能是因为您以前访问过该页面并打开了与该主机的连接.可能是因为Chrome浏览器从主机中预取了资源-例如，当您在栏中键入地址时，Chrome浏览器就预取了一个图标.

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

I am using Chrome Developer tools (version 49). Under the Network tab, there is a series of columns such as Name, Status, Type..etc. Does anyone know what the purpose of the Connection ID column Each row has an ID such as 13461, 14410, 8738, 8741, 13516.... Also what do the numbers mean?

解决方案

HTTP uses a networking protocol called TCP behind the scenes. Browsers maintain pools of TCP sockets and connections. The Connection ID numbers in DevTools refer to a particular TCP connection. Why are they useful? Well, from this post by Umar Hamsa (a Google Developer Expert):

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.

Let me explain what this means:

• The first time you see a particular connection ID, a new connection will (probably) need to be established via a so-called TCP handshake. This is important for performance reasons because a TCP handshake can incur a relatively large networking overhead. We're creating a new connection and so it takes a little longer to get the HTTP response.

• However, for the subsequent times that you see that same ID, this overhead will not be incurred. That is, the browser not need a perform a TCP handshake and will reuse that same connection. Here we say the TCP connection is still "open". Already established connections get the HTTP response data more quickly.

So these numbers basically help check/debug if there is an networking overhead caused by TCP handshakes.

---

For example:

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

Here, there's an overhead involved in downloading foo.jpg and cat.jpg because a TCP handshake is required to setup connections 72218 and 79146 respectively. However bar.jpg, baz.jpg and dog.jpg do not have an overhead because they are reusing their respective TCP connections.

---

Note 1: This idea of reusing of a TCP connection to avoid repeated TCP handshakes is a feature of HTTP 1.1 called Persistent Connections. All HTTP 1.1 connections use persistent connections by default and all modern browsers use HTTP 1.1. For more information, I recommend reading Chapters 11 and 14 of the High Performance Browser Networking book.

Note 2: If a TCP handshake was needed for a HTTP request, you'll see an orange bar in the DevTools waterfall and, if you hover over it, you'll see "Initial connection" - this tells you how long the handshake took in milliseconds. TCP connections may be reused across tabs and windows so watch out -- you might see an ID for the first time but it may not have a TCP handshake! This likely because you visited the page previously and opened a connection with that host. It may also be because Chrome prefetched a resource from the host -- Chrome prefetches a favicon for example when you type an address in the bar.

Note 3: In newer versions of Chrome, you can view a list of the HTTP connections at chrome://net-internals/#http2 where the connection id and hosts are shown.

这篇关于Chrome开发者工具连接ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！