从输入 URL 到页面展示

一次页面访问并非严格串行，浏览器会并行请求子资源、复用连接、使用缓存。下面是便于面试表达的主链路。

1. 解析 URL 与浏览器预处理

浏览器解析协议、主机、端口、路径、查询参数与片段：

https://www.example.com:443/products?id=1#comment
└协议┘ └────主机────┘ └端口┘ └─路径─┘ └查询┘ └片段（不发给服务器）

接着会进行：

• 检查 HSTS：若站点被记录为仅 HTTPS，浏览器会将 http 升级为 https；
• 检查 Service Worker、内存缓存和磁盘缓存；命中强缓存时可不发网络请求；
• 检查是否已有可复用的连接、是否可用 HTTP/2 或 HTTP/3。

2. DNS 解析

若没有可用的 DNS 结果，浏览器/操作系统的 stub resolver 向配置的递归 DNS 解析器查询。解析器可能命中缓存；否则依次向根、顶级域（TLD）和权威 DNS 服务器进行迭代查询，取得 A/AAAA 等记录，并按 TTL 缓存。

hosts 文件、浏览器/操作系统缓存及本地 DNS 缓存通常会优先参与；“路由器缓存”不是 DNS 解析的必经标准步骤。

3. 建立传输与安全连接

• HTTP/1.1、HTTP/2：通常先通过 TCP 三次握手建立连接；HTTPS 随后完成 TLS 握手和证书校验。
• HTTP/3：基于 QUIC（运行在 UDP 上）。QUIC 在自身协议内完成传输连接和 TLS 1.3 握手，不使用 TCP 三次握手。

TLS 完成后，浏览器会协商 HTTP 协议版本（如 TLS ALPN 协商 h2）。会话恢复可减少往返；TLS 1.3 的 0-RTT 仅适用于恢复连接，且存在重放风险。

4. 发送 HTTP 请求并处理响应

浏览器构造请求行、请求头和可选请求体，并按 Cookie 的 Domain、Path、SameSite、Secure 等规则附带匹配的 Cookie。服务器经由负载均衡、CDN 或反向代理后处理请求，返回状态行、响应头和响应体。

响应处理的典型分支：

• 301/302/307/308：根据 Location 发起重定向；
• 304 Not Modified：复用本地协商缓存中的响应体；
• Content-Disposition: attachment 或不支持的 MIME 类型：交给下载流程；
• HTML：进入解析和渲染；
• CSS、JS、图片、字体等：根据 HTML、CSS 和脚本发现过程继续并行请求。

现代 HTTP 默认倾向连接复用，因此拿到一个响应后不一定立即 TCP 四次挥手。连接何时关闭取决于协议、Connection、服务器策略和空闲超时。

5. 解析、渲染与合成

1. HTML 解析器将字节流解码、分词并构建 DOM；预加载扫描器会尽早发现部分子资源。
2. CSS 解析为 CSSOM。CSS 是渲染阻塞资源：浏览器需要可靠样式才能绘制。
3. DOM 与已计算样式形成渲染树（不可见节点通常不参与），然后进行 Style、Layout/Reflow，计算几何位置与大小。
4. 浏览器进行 Paint（绘制文本、颜色、边框等绘制指令），再由合成器分层并 Composite 到屏幕。
5. JavaScript 可能修改 DOM/CSSOM，触发重新计算样式、回流或重绘；外部普通脚本会阻塞 HTML 解析，defer 和 async 的执行时机不同。

面试速答

从 URL 到页面的关键步骤：URL 解析与缓存检查 → DNS → TCP/TLS 或 QUIC 连接 → HTTP 请求/响应 → HTML/CSS/JS 解析 → DOM/CSSOM → 样式计算、布局、绘制、合成。强调缓存、连接复用和子资源并行使真实流程并不完全串行。