客户端到服务端请求慢的排查过程

5分钟阅读

前端排查需遵循“由外到内、由网络到渲染”的分层诊断逻辑。首先确认是否为普遍性问题（多设备/多网络复现），排除单点故障；然后利用 Network 面板查看每个请求的完整生命周期时间轴（Timing tab），定位耗时最长的子阶段；若 TTFB 高，说明问题在客户端到服务端链路（DNS/TCP/TLS/后端处理），但题干已排除后端，故聚焦前端可控层：本地 DNS 缓存、代理配置、HTTPS 证书验证、HTTP/2 多路复用是否生效、连接复用（keep-alive）是否被中断；若 TTFB 正常但 Content Download 慢，需检查资源体积、是否启用 Gzip/Brotli、CDN 缓存命中率、是否被中间设备劫持或限速；若资源加载快但页面卡顿，则转向 Performance 面板分析主线程阻塞（长任务）、JS 执行耗时、Layout/Recalculate Style、Paint、Composite 等渲染阶段瓶颈；同时必须验证是否存在前端主动引入的性能反模式，如同步 XHR、未降级的大型 bundle、未懒加载的非关键 JS/CSS、大量未优化图片、频繁 forced reflow/reflow 触发等

浏览器网络请求完整生命周期可分为 8 个标准阶段（Chrome Timing 模型）：

  1. Queueing：请求排队（因同源并发限制（HTTP/1.1 默认6个）、渲染进程繁忙、或高优先级请求抢占）；
  2. Stalled：DNS 查询前等待空闲 socket 或代理协商；
  3. DNS Lookup：解析域名（受 /etc/hosts、本地 DNS 缓存、systemd-resolved、Chrome 内置 DNS cache 影响）；
  4. Proxy Negotiation：与代理服务器协商（如企业 PAC 脚本执行慢）；
  5. Connect：TCP 三次握手（可被 TCP Fast Open 优化，但需 OS 和服务器支持）；
  6. SSL：TLS 握手（含 ClientHello/ServerHello/Certificate/KeyExchange/Finished，耗时取决于 RSA vs ECDSA、是否启用 Session Resumption（Session ID / Session Ticket）、OCSP Stapling 是否开启）；
  7. Request Sent：HTTP 请求帧发出（含 headers + body）；
  8. Waiting (TTFB)：从请求发出到收到第一个字节（含后端处理 + 网络传输，但题干已排除后端，故重点看前序链路延迟叠加）；
  9. Content Download：接收响应体（受带宽、拥塞控制算法（Cubic/BBR）、TCP window size、HTTP/2 流优先级、流控影响）。

底层依赖的关键数据结构与机制包括：
• Chrome 的 URLRequest/HttpStreamFactory：管理连接池（基于 socket key = scheme+host+port+proxy+auth），复用逻辑由 HttpStreamFactory::JobController 控制；
• DNS 缓存位于 net::HostResolverImpl 中，使用 LRU Cache（默认 100 条，TTL 取自 DNS 记录）；
• TLS 会话恢复依赖于 SSL_SESSION 结构体（OpenSSL）或 BoringSSL 的 ssl_session_st，其中 session_ticket 成员决定是否启用无状态恢复；
• HTTP/2 连接复用通过 nghttp2 库实现，每个 stream 有独立的 stream_id 和 flow_control_window（初始 64KB），若某 stream 占满 window 且未及时 consume，会导致其他 stream stall；
• 浏览器渲染管线中，JS 执行（V8 Isolate）与 Layout（Blink LayoutObject 树遍历）、Paint（GraphicsLayer 树构建）、Composite（cc::LayerTreeHost 合成）运行在不同线程，但 JS 可同步触发 layout（如 clientWidth），造成强制同步回流（forced synchronous layout），其底层是 FrameView::layout() 调用 Document::updateStyleAndLayoutTree()，触发整个 LayoutTreeBuilder 的递归构建与布局计算。

常见易忽略的前端层问题：
• Service Worker 拦截请求但未正确缓存或 await fetch() 导致阻塞（SW 在独立线程，但 fetch() 是异步 Promise，若未 await 则可能提前 resolve 空响应）；
• CORS 预检（preflight）被频繁触发：当请求含自定义 header（如 X-Trace-ID）或 method 非 GET/HEAD/POST 且 content-type 非 application/x-www-form-urlencoded 等三类之一时，浏览器自动发 OPTIONS 请求，而 OPTIONS 响应头 Access-Control-Max-Age 若设为 0 或缺失，将导致每次请求都预检；
• HTTP 缓存失效：Cache-Control: no-cache 表示“每次用前要 revalidate”，仍需发条件请求（If-None-Match/If-Modified-Since），而 no-store 才完全禁用缓存；
• 浏览器扩展干扰：某些广告拦截插件（如 uBlock Origin）会注入额外的 CSP 或重写请求，可通过无痕模式复现验证。

反向链接