面经策

从网络角度来看，用户从输入网址到网页显示，期间发生了什么？ ​

  • 标签：网络

🏛 业务架构师 ​

这个问题我按一次电商访问的成本链讲，每一环都标注业务视角的关注点：

  1. DNS 解析：浏览器缓存→系统→递归 DNS。业务关注：域名解析的 TTL 与多线路智能解析（用户到哪个机房）、HTTPDNS 解决运营商劫持；
  2. TCP 三次握手：一个 RTT。关注：机房选址与 CDN 就近接入，握手延迟由物理距离决定；
  3. TLS 握手（HTTPS）：再一两个 RTT。关注：会话复用/TLS 1.3 的 0-RTT 对移动端体验的提升、证书成本与到期监控（证书过期=全站瘫痪的经典事故）；
  4. HTTP 请求→CDN/负载均衡→网关→服务：静态资源 CDN 命中直接返回；动态请求过 LB → API 网关（鉴权限流）→ 微服务链路；
  5. 服务内部：缓存（Redis）→ DB → 组装响应。关注：每一跳的超时预算（网关 1s、服务 800ms、DB 100ms 递减），超时预算不齐就会出现"上游已超时、下游还在跑"的资源浪费；
  6. 响应与渲染：浏览器解析 DOM/CSS、执行 JS、再次发起静态资源请求。

架构师怎么用这条链：

  • SLO 分解：页面 2 秒打开的目标，按环节分解——DNS 50ms、TCP+TLS 200ms、服务端 500ms、渲染 800ms，每个环节有自己的预算和负责人，优化才有抓手；
  • 排障定位：用户说慢，先拆"哪个环节慢"——curl 的耗时分解（dns/connect/ttfb/total）配合 APM 全链路 trace，把"感觉慢"翻译成"某环节超预算"；
  • 成本地图：CDN 省源站带宽、keep-alive 省握手、HTTP/2 省连接数——每个环节都有明码标价的优化项。

这条题的本质是考系统观：眼里只有代码的工程师优化代码，有全链路视野的架构师优化路径。

🏗 系统架构师 ​

这是道链路综合题，我按数据流顺序走一遍，每步点到关键协议：

  1. URL 解析：浏览器拆协议/域名/路径，检查 HSTS、补全；
  2. DNS 解析：浏览器缓存 → 系统缓存 → 本地 DNS（运营商/公共递归）→ 根 → 顶级域 → 权威，拿到 IP；智能 DNS/GSLB 可能就近返回 CDN 节点；
  3. 建立连接：HTTPS 先 TCP 三次握手（1 RTT），TLS1.2 再 1~2 RTT 完成证书验证与密钥协商（TLS1.3/0-RTT 优化），HTTP/3 直接 QUIC 握手合并；
  4. 发送请求：浏览器组装 HTTP 请求（方法、头部、Cookie），经 TLS 加密、TCP 分段（MSS）、IP 路由（ hops 间 ARP 找下一跳 MAC）、可能过 NAT 与防火墙；
  5. 服务端处理（负载均衡 → 网关 → 应用）：LVS/Nginx 四七层负载均衡 → API 网关鉴权限流 → 应用查 Redis 缓存 / DB → 组装响应；其间可能回源静态资源（CDN 命中则边缘直接返回，根本不到源站）；
  6. 接收渲染：响应经网络回传，浏览器解析 HTML 建 DOM、CSS 建 CSSOM，遇到 js/css/图片再发起并发子请求（域名分片/HTTP2 多路复用），合成渲染树 layout → paint → composite 呈现。

面试抓手：DNS 缓存层次、TCP/TLS 握手 RTT、CDN 与负载均衡的位置——把"一次请求"讲成一张架构图，顺带展示全局视野。

💻 全栈开发专家 ​

我按"一跳一跳"过，并在每层挂上可优化的工程点：

  1. URL 解析与 DNS：浏览器缓存 → 系统缓存/hosts → 本地 DNS 递归到权威，拿回 IP。优化点：HTTPDNS、预解析（<link rel="dns-prefetch">）、减少域名数。
  2. 建立 TCP 连接：三次握手，1 个 RTT。优化点：连接复用（keep-alive）、HTTP/2 多路复用。
  3. TLS 握手（HTTPS）：1~2 个 RTT（TLS1.3 可 1-RTT/0-RTT），证书链校验。优化点：session 复用、OCSP stapling、开 HTTP/3。
  4. HTTP 请求 → 负载均衡/网关：DNS 轮询/LVS/Nginx/网关层进入后端，TLS 在网关卸载。优化点：CDN 就近接入静态资源。
  5. 服务端处理：网关鉴权限流 → 业务服务（缓存 → DB/RPC 聚合）→ 返回响应。优化点：Redis 缓存、并行调用、异步化。
  6. 浏览器渲染：HTML 解析成 DOM、CSSOM，合成渲染树 → 布局 layout → 绘制 paint → 合成。JS/CSS 阻塞解析（script defer/async、CSS 放头）。优化点：SSR/首屏直出、关键 CSS 内联、图片懒加载、骨架屏。

排查思路：打开 DevTools 的 Network 面板看瀑布图——DNS/Connect/TLS/Waiting(TTFB)/Download 各阶段耗时一眼定位是网络慢、后端慢还是资源加载慢，TTFB 长查后端，Download 长查带宽和资源体积，这是我和前端联调的通用语言。