浏览器一次请求到底经历了什么？

我们每天都会在浏览器地址栏输入网址、点击链接，完成一次又一次的页面访问。看似简单的 “输入 - 回车 - 页面加载” 动作背后，是一条横跨网络协议、操作系统、浏览器内核、渲染引擎的完整技术链路，每一步环环相扣，共同决定了页面的加载速度、安全性与最终呈现效果。

接下来我们顺着时间线，完整拆解一次浏览器请求从发起到页面完全渲染的全过程。

一、导航启动：从输入框到请求前置检查

1. URL 校验与处理浏览器首先会判断输入内容是合法 URL 还是搜索关键词。如果是 URL，会自动补全协议头（默认补全http://），并解析出协议类型、域名、端口、资源路径、查询参数、哈希值等结构；如果是普通文本，则调用默认搜索引擎，将内容拼接为搜索 URL。

2. 多进程调度现代浏览器采用多进程架构，一次导航首先由浏览器主进程接收用户输入，随后通知网络进程准备发起网络请求，同时根据域名判断渲染进程分配：同站点复用已有渲染进程，跨站点新建独立渲染进程（即站点隔离机制，保障页面安全）。

3. 强缓存前置校验在真正发起网络请求前，浏览器会优先检查本地强缓存（内存缓存 Memory Cache + 磁盘缓存 Disk Cache）：根据请求 URL 和响应头的Cache-Control、Expires字段判断缓存是否过期。如果命中有效强缓存，直接返回本地资源，无需发起网络请求，整个流程在此提前结束。

二、DNS 解析：把域名翻译成网络可识别的 IP 地址

网络通信的基础是 IP 地址，而人类易记的域名需要通过 DNS（域名系统）解析为对应的 IP 地址，这是网络请求的 “地址查找” 环节。

1. 分层缓存查询机制DNS 解析遵循 “由近及远” 的缓存优先级，尽可能减少跨网查询：

• 浏览器 DNS 缓存：浏览器自身维护的域名 - IP 映射表，缓存周期通常为几分钟到几小时
• 系统级缓存：操作系统本地缓存与 Hosts 文件配置的静态映射
• 本地 DNS 服务器：运营商或企业自建的 Local DNS，具备区域级缓存能力
• 根域名服务器：全球 13 组根节点，指引顶级域名的查询路径
• 顶级域名服务器（TLD）：管理.com、.cn等后缀的域名解析入口
• 权威域名服务器：域名最终解析记录的存放节点，返回最终 IP 结果

1. 两种查询模式DNS 查询分为递归查询与迭代查询：客户端到本地 DNS 为递归查询，本地 DNS 必须返回最终解析结果；本地 DNS 向上到根、顶级域、权威域为迭代查询，逐级向下获取指引，直到拿到最终 IP。

三、连接建立：TCP 三次握手与 TLS 安全协商

拿到目标 IP 后，浏览器需要与服务器建立可靠的传输通道，根据协议不同分为 TCP 连接建立，以及 HTTPS 场景下的 TLS 加密握手。

3.1 TCP 三次握手：建立可靠传输通道

HTTP 协议底层基于 TCP 传输控制协议，三次握手的核心是双向确认双方的发送能力与接收能力均正常：

1. 客户端向服务器发送 SYN 同步报文，进入 SYN_SENT 状态
2. 服务器收到 SYN 后，回复 SYN+ACK 确认同步报文，进入 SYN_RCVD 状态
3. 客户端收到 SYN+ACK 后，回复 ACK 确认报文，双方进入 ESTABLISHED 状态，连接正式建立

采用三次握手而非两次，是为了避免历史失效的连接请求到达服务器，造成服务器资源空耗；同时双向确认收发能力，三次是理论上的最少交互次数。

3.2 TLS 握手：HTTPS 的加密身份验证

如果是 HTTPS 请求，TCP 连接建立后还会进行 TLS 握手，完成加密套件协商、密钥交换与服务器身份验证：

• TLS 1.2 版本需要 2 次往返（4 次报文交互），完成证书校验、非对称加密交换对称密钥
• TLS 1.3 优化了握手流程，支持 1-RTT 甚至 0-RTT 握手，大幅降低加密建立延迟

握手完成后，后续所有 HTTP 数据都会通过协商好的对称密钥加密传输，保障数据的机密性、完整性与防篡改能力。

四、请求发送：HTTP 报文的传输与流量控制

连接建立后，浏览器网络进程会构建并发送标准 HTTP 请求报文，同时由传输层控制实际数据传输。

1. HTTP 请求报文结构完整的请求报文由三部分组成：

• 请求行：包含请求方法（GET/POST/PUT 等）、请求资源路径、HTTP 协议版本
• 请求头：键值对形式的元信息，包括 Host、User-Agent、Cookie、Accept、Content-Type、缓存标识等
• 请求体：POST/PUT 等请求携带的业务数据，如表单参数、JSON 报文、文件二进制等

1. 不同 HTTP 版本的传输差异

• HTTP/1.1：默认开启长连接（Keep-Alive）复用 TCP 连接，但存在应用层队头阻塞，同一域名并发请求数受限制
• HTTP/2：引入二进制分帧与多路复用，同一 TCP 连接可并行传输多个请求与响应，解决应用层队头阻塞；同时支持头部压缩、服务器推送
• HTTP/3：底层基于 UDP 的 QUIC 协议，彻底解决 TCP 层队头阻塞，连接建立更快，弱网环境下传输稳定性更优

五、服务器处理与响应返回

请求到达服务器后，会经过多层业务处理逻辑，最终生成响应报文返回浏览器。

1. 典型服务端处理链路互联网服务的常规请求链路为：

• CDN 边缘节点：静态资源优先命中 CDN 缓存，直接返回响应，无需回源
• 反向代理层（Nginx 等）：负责负载均衡、请求转发、限流、跨域处理
• 应用服务层：后端业务逻辑处理、权限校验、接口计算
• 数据存储层：数据库、分布式缓存、对象存储等底层资源

1. HTTP 响应报文结构响应报文与请求对应，同样分为三部分：

• 响应行：协议版本、状态码、状态描述（如 200 OK、404 Not Found、500 Internal Server Error）
• 响应头：包含 Content-Type、Content-Length、Set-Cookie、缓存策略（Cache-Control、ETag、Last-Modified）、跨域头字段等元信息
• 响应体：实际返回的资源内容，如 HTML 文本、JSON 数据、图片二进制流等

1. 协商缓存判断如果未命中强缓存，浏览器会携带If-None-Match（对应 ETag 标识）、If-Modified-Since（对应 Last-Modified 时间）发起请求。服务器判断资源未更新时，返回 304 状态码，浏览器继续使用本地缓存，无需传输响应体，大幅节省带宽。

六、渲染阶段：从 HTML 文本到可视化页面

浏览器拿到 HTML 响应后，导航阶段结束，渲染进程接管工作，将代码解析为用户可见的页面，这一过程也被称为关键渲染路径（CRP）。

6.1 构建 DOM 树与 CSSOM 树

• DOM 树构建：渲染引擎的 HTML 解析器逐行解析 HTML 文本，将标签转换为 DOM 节点，生成文档对象模型（DOM Tree），描述页面的结构与内容。解析过程中如果遇到同步<script>标签，会暂停 DOM 解析，优先下载并执行 JS 代码（因为 JS 可能修改 DOM 结构）。
• CSSOM 树构建：同步解析内联、外链的 CSS 样式规则，生成 CSS 对象模型（CSSOM Tree），描述每个节点的样式属性。CSS 解析不会阻塞 DOM 构建，但会阻塞 JS 执行与后续渲染步骤。

6.2 生成渲染树（Render Tree）

DOM 树与 CSSOM 树结合计算，生成渲染树。渲染树只包含可见节点：display: none的节点不会出现在渲染树中，而visibility: hidden的节点会保留，因为其仍占据布局空间。

6.3 布局（Layout / 重排）

根据渲染树的节点信息，计算每个节点在视口中的精确位置与尺寸，这一步称为布局（也叫重排）。页面首次加载必然触发一次完整重排，后续修改元素尺寸、位置、内容时，会触发局部或全局重排。

6.4 绘制（Paint / 重绘）

布局完成后，渲染引擎将每个节点的视觉内容（颜色、边框、阴影、文字等）绘制到屏幕对应的像素点上，这一步称为绘制（也叫重绘）。重排一定会触发重绘，而单纯修改颜色等不影响布局的操作只会触发重绘，性能开销远低于重排。

6.5 合成（Composite）

浏览器将绘制完成的多个图层按正确层级叠加、合成，最终生成屏幕上显示的画面。CSS 的transform、opacity等属性会触发独立合成层，跳过重排重绘，直接由 GPU 加速合成，是前端性能优化的常用手段。

6.6 JS 阻塞与优化方案

JavaScript 的下载与执行默认会阻塞 DOM 解析，因此衍生出多种加载优化方案：

• 将 JS 脚本放在页面底部，避免阻塞首屏 DOM 构建
• async：异步下载脚本，下载完成后立即执行，执行时仍会阻塞 DOM，多个 async 脚本执行顺序不固定
• defer：异步下载脚本，等待 DOM 解析完成后、DOMContentLoaded 事件前执行，多个 defer 脚本按加载顺序执行

七、收尾阶段：连接关闭与缓存持久化

页面加载完成后，流程并未完全结束，还有连接管理与资源缓存的收尾工作。

1. TCP 四次挥手断开连接当所有资源传输完成，且连接没有长连接复用需求时，会通过四次挥手断开 TCP 连接：客户端发送 FIN、服务器回复 ACK、服务器发送 FIN、客户端回复 ACK，双方确认后正式关闭连接。

2. 长连接复用HTTP/1.1 与 HTTP/2 默认开启 Keep-Alive 长连接，一次 TCP 连接可以服务多个 HTTP 请求，避免重复握手的性能开销。

3. 缓存持久化浏览器将本次请求的可缓存资源写入磁盘缓存，更新缓存索引，供后续访问直接使用，减少重复网络请求。

写在最后

一次看似简单的浏览器请求，实际上串联了应用层、传输层、网络层的网络协议，覆盖了浏览器多进程协作、渲染引擎工作原理、分层缓存体系等大量技术细节。前端性能优化的核心思路，本质上就是针对这条链路的每个环节做减法：减少 DNS 解析耗时、缩短连接建立延迟、降低请求体积、优化渲染路径，最终让用户更快、更稳定地看到页面内容。