图 1：本文封面，点明题目与完整链路。
先说明属性：这是一篇经典题解析，题目出自本地历史面试资料（见文末来源说明），与任何公司的当前招聘无关。这道题被称为网络面试的「总纲题」——它本身不难，但回答的颗粒度直接暴露你的网络知识是成体系的还是零散的。
想象面试现场，面试官靠在椅背上问：「你在浏览器里输入一个网址，按下回车，到页面显示出来，中间发生了什么？」
第一步，审题。
这是一道链路题，考的是能不能把一次页面加载拆成有序的环节，并对每个环节说出一两句有信息量的细节。建议按六段组织：URL 解析与本地缓存、域名解析、建立连接、发送请求与接收响应、解析、渲染。漏段或乱序是这道题最常见的失分方式。
第二步，基础回答：六段链路。
第一段，URL 解析与本地缓存。浏览器先拆解 URL，得到协议、域名、路径，并检查本地是否已有这份资源的有效缓存——有就直接复用，后面的网络环节全部跳过。只有缓存未命中，才进入完整的网络链路。
第二段，DNS 解析。浏览器要把域名换成 IP 地址。MDN 的浏览器工作原理文档说明：如果你从未访问过这个站点，就要发起一次 DNS 查询，由域名服务器返回 IP；查到之后结果会被缓存一段时间，后续访问直接读缓存。注意一个常被忽略的细节：页面引用的字体、图片、脚本、广告如果分布在不同域名下，每个独立域名都要各自解析一次。
第三段，建立连接。拿到 IP 后，浏览器通过 TCP 三次握手与服务器建立连接——SYN、SYN-ACK、ACK 三个报文协商好连接参数，此时一个字的业务数据都还没传。如果是 HTTPS（今天几乎总是），还要再进行 TLS 握手：商定加密算法、验证服务器证书，安全通道建好才允许发送真正的请求。这一段的关键词是「往返次数」：DNS、握手、TLS 每一步都是网络往返，移动网络下每一跳都可能上百毫秒。
第四段，请求与响应。连接就绪后浏览器发出 HTTP GET 请求，服务器返回响应头和 HTML 内容。从发出请求到收到第一个字节的时间就是 TTFB（首字节时间），MDN 文档提到响应的第一个数据块通常约为 14KB——这也是为什么首屏关键内容要尽量塞进最初的报文里。
第五段，解析。浏览器收到数据就开始解析，不用等全部下载完。HTML 被解析成 DOM 树，CSS 被解析成 CSSOM 树。这里有个机制值得点名：预加载扫描器（preload scanner）会在主解析器工作的同时提前发现高优先级资源（CSS、脚本、字体）并先行下载。而不带 async 或 defer 的脚本会阻塞 HTML 解析——这是「脚本为什么要放底部或加 defer」的原理出处。
第六段，渲染。DOM 与 CSSOM 合并成渲染树，然后依次经历布局（layout，计算每个节点的位置和尺寸）、绘制（paint，把节点画成像素）；如果页面被分成多个层，最后还要合成（compositing）。图片尺寸未声明这类问题会触发回流（reflow）——布局推倒重来。此后脚本执行完毕、页面可交互，链路才算真正走完。
图 2：一次页面加载的六段链路，以及按链路分段计时的排查思路。
第三步，可能的追问。
「哪段最可能成为性能瓶颈？」没有固定答案，但排查顺序就是链路顺序：先看 DNS 与握手（网络层），再看 TTFB（服务器层），最后看解析渲染（前端层）。「为什么刷新第二次明显更快？」本地缓存、DNS 缓存、连接复用同时生效，链路被大幅缩短甚至短路。「HTTP/2 和 HTTP/3 改变了什么？」主要改在连接与传输层——多路复用、基于 QUIC 的握手合并，但链路六段的骨架不变。
工程应用与 AI 关联。
这条链路是 AI 应用排查延迟的总纲。一个 AI 产品的请求路径是「前端 → 网关 → 推理服务 → 模型」，每一跳都对应链路里的某一环：首 token 慢，先分清是连接建立慢、网关排队慢还是推理本身慢；流式输出的首字节时间，本质上就是 AI 版的 TTFB。能把链路图画出来的人，定位问题靠分段计时，而不是凭感觉换库重启。
易错点清单。
一，把 DNS 解析和 TCP 握手混为一谈——先解析出 IP，才谈得上连谁。二，忘记 TLS 握手，直接让 HTTP 请求裸奔在三次握手之后。三，认为浏览器下载完整个 HTML 才开始渲染——实际是边收边解析。四，回答只到「服务器返回页面」为止，漏掉解析与渲染这两段，等于只答了半题。
回到面试现场，建议的答题节奏：先用一句话给出六段骨架，再逐段展开每段一个有信息量的细节（本地缓存、DNS 缓存、三次握手、TTFB、预加载扫描器、渲染流水线），最后主动补一句性能排查视角。骨架完整加细节扎实，这道题就稳了。
如果面试官追问「既然环节这么多，前端性能优化应该从哪一段先下手」，你的排查顺序和理由是什么？欢迎分享。
参考资料
- Populating the page: how browsers work（MDN：DNS 查询与缓存、每个独立主机名各查一次、TCP 三次握手、TLS 协商、TTFB 与约 14KB 首个数据块、DOM/CSSOM 解析、预加载扫描器、脚本阻塞、渲染树与布局/绘制/合成、回流） — https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/How_browsers_work