为什么Chrome访问本地Node.js服务时会通过两个端口建立连接？

问题原因分析 #

你观察到的Chrome发起两次TCP连接的现象，是Chrome浏览器的预连接机制导致的，这是Chrome独有的性能优化策略，其他浏览器默认没有启用同场景下的预连接逻辑，所以不会复现。

具体触发逻辑 #

• 你首次在地址栏输入http://localhost:8080的过程中，Chrome的地址栏预测机制会判定你大概率会访问该地址，提前发起一条预连接，用于减少后续正式请求的握手等待时间
• 当你按下回车正式发起请求时，如果预连接还没有被复用，Chrome就会再发起第二条正式的TCP连接，最终你就会看到两个连续的远程端口连接记录
• 还有一种常见触发场景：Chrome会主动预拉取站点的favicon.ico图标，你的原始测试代码没有处理任何HTTP请求返回，浏览器在首次请求超时后会自动重试，也会触发第二条连接

验证方法 #

你可以给你的HTTP服务加上请求响应逻辑，避免请求超时，同时在服务端打印请求路径，就能验证第二条连接的用途：

const http = require("http");
const httpserver = http.createServer((req, res) => {
  console.log('请求路径:', req.url);
  res.end('ok');
});
httpserver.on('connection', socket=>{
    console.log(socket.remotePort, socket.address());
})
httpserver.listen(8080)

修改后重新启动服务再用Chrome访问，大概率会看到第二条请求的路径是/favicon.ico，进一步确认触发原因。

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