把链路拆成阶段看，性能瓶颈会非常清晰。
场景与痛点
这篇文章面向正在扩张的团队，从可维护性视角深入拆解HTTP 从建立连接到返回响应。当前定位为「入门」阶段，核心目标是建立基本概念与最小闭环。我们会从实际场景出发，结合具体代码示例，把关键知识点拆解为可落地的行动步骤。衡量标准：代码复杂度/变更频率。
当你在浏览器地址栏输入一个 URL 并按下回车，背后发生的事情远比你想象的复杂。从 DNS 解析到 TCP 握手，从 TLS 协商到 HTTP 请求发送，再到服务器处理、响应传输、浏览器渲染——每一个环节都可能成为性能瓶颈。理解这条完整链路，是做性能优化的基础。
当团队规模是正在扩张的团队时，最大的挑战不是”不会做”，而是”做了但不可复用、不可追溯”。在需要多端联动的复杂需求的背景下，我们需要一套既轻量又可靠的方案。
核心原理
很多开发者在排查”页面加载慢”的问题时，第一反应是优化后端接口。但实际上，网络层面的耗时往往占了总时间的大头。DNS 解析可能花 50-200ms，TCP 握手需要一个 RTT，TLS 1.2 还要额外两个 RTT。如果服务器在海外，光是网络往返就可能超过 500ms。不了解完整链路，优化就像蒙着眼睛射箭。
分步实施指南
一次完整的 HTTP 请求可以拆分为以下阶段：
- DNS 解析：浏览器查询域名对应的 IP 地址，依次检查浏览器缓存、系统缓存、路由器缓存、ISP DNS 服务器。
- TCP 连接：通过三次握手建立可靠连接。如果是 HTTPS，还需要 TLS 握手协商加密参数。
- 请求发送：浏览器构造 HTTP 请求报文（方法、路径、头部、Body），通过已建立的连接发送。
- 服务器处理：Web 服务器接收请求，经过路由、中间件、业务逻辑、数据库查询等处理。
- 响应传输：服务器将响应数据分块传输回客户端。
- 浏览器渲染：解析 HTML、构建 DOM、加载 CSS/JS、布局绘制。
每个阶段都有对应的优化手段：DNS 预解析（dns-prefetch）、连接复用（keep-alive）、HTTP/2 多路复用、CDN 就近访问、Gzip/Brotli 压缩、浏览器缓存策略等。
实战代码
以下代码片段经过简化，可以直接用于项目中：
# 查看完整请求各阶段耗时
curl -w "DNS: %{time_namelookup}s\nTCP: %{time_connect}s\nTLS: %{time_appconnect}s\nTTFB: %{time_starttransfer}s\nTotal: %{time_total}s\nSize: %{size_download} bytes\n" \
-o /dev/null -s https://example.com
# DNS 预解析 (HTML 中添加)
# <link rel="dns-prefetch" href="//api.example.com">
# <link rel="preconnect" href="//cdn.example.com">进阶实践
用 Chrome DevTools 的 Network 面板可以看到每个请求的 Timing 分解。curl 的 -w 参数也能输出各阶段耗时。建议在关键页面设置 Performance Budget，用 Lighthouse CI 在流水线中自动检测。对于 API 接口，在网关层记录 TTFB（Time To First Byte）作为核心监控指标。
踩坑记录
常见误区包括：只关注接口响应时间而忽略网络传输耗时；没有开启 HTTP/2 导致队头阻塞；缓存策略设置不当导致每次都回源；CDN 配置了但缓存命中率很低；以及忽略了 DNS 解析时间——特别是使用了多个第三方域名的页面。
下一步行动
如果你正处于入门阶段，建议先把核心链路的代码复杂度/变更频率监控建立起来，然后按照上面的步骤逐项推进。记住，降低理解和修改代码的成本不是一蹴而就的，而是持续迭代的过程。每次改进后都要回看数据，确认效果符合预期。