如何在Chrome中查看网站TCP连接？DevTools能否实现？XHR性能排查

嘿，我刚好碰到过类似的Chrome连接限制问题，太懂这种加载慢到抓狂的感受了！先直接给你说怎么用Chrome DevTools看所有TCP连接，然后再给你几个针对这个6连接限制的优化思路，帮你解决那个1分钟加载的噩梦。

一、用Chrome DevTools查看TCP连接的两种实用方法 #

方法1：通过网络面板的「连接」列直观查看 #

• 打开Chrome DevTools（按F12或者右键页面→「检查」）
• 切换到Network面板
• 点击面板顶部的「Columns」按钮（带加号的那个图标），勾选Connection选项
• 现在每一条网络请求都会显示对应的TCP连接ID，你能清晰看到哪些请求共用了同一个连接，哪些在排队等待新连接建立
• 还可以点击「Connection」列的标题排序，把同一个连接的请求归到一起，方便观察连接的复用和排队情况

方法2：用Performance面板追踪连接全生命周期 #

• 切换到Performance面板
• 点击左上角的录制按钮（圆形红点），然后重现你的请求加载场景
• 录制结束后，在左侧的Network下拉菜单里展开Connections，就能看到所有TCP连接的建立时间、持续时长，以及每个连接上处理的所有请求
• 这里能直观看到哪些请求在等待连接释放，或者连接建立过程中的耗时瓶颈

二、针对Chrome 6个TCP连接限制的优化方案 #

既然你已经定位到是Chrome的并行连接限制导致的延迟，这些方法能帮你快速缓解：

• 启用HTTP/2或HTTP/3：这是最有效的解决方案！HTTP/2支持多路复用，同一个TCP连接可以同时处理多个请求，直接绕过6连接限制。只要你的服务器支持（现在Nginx、Apache等主流服务器都能轻松配置），Chrome会自动启用这个特性
• 资源合并与压缩：把多个JS/CSS文件合并成一个，减少请求总数；同时开启Gzip或Brotli压缩，大幅减小文件体积，加快传输速度
• 域名分片（临时方案）：如果暂时没法升级HTTP/2，可以把静态资源分散到2-3个不同的子域名下（比如static1.example.com、static2.example.com），这样Chrome会给每个域名分配6个连接，变相提升并行请求数
• 延迟加载非关键资源：把不是首屏必需的JS、图片、字体等资源延迟加载，优先加载核心内容，避免抢占连接资源
• 用Service Worker缓存常用资源：把用户频繁访问的资源缓存到本地，减少重复请求，降低对TCP连接的依赖

内容的提问来源于stack exchange，提问作者MRDJR97