从输入网址到页面显示的全过程
这是理解 Web 技术核心的基石，这个过程涉及多个技术和协议的协同工作。
总览核心过程
- URL 解析：浏览器解析网址，确定协议、域名、资源路径
- DNS 查询：将域名转换为服务器的 IP 地址
- 建立 TCP 连接：与服务器通过「三次握手」建立可靠连接
- 发送 HTTP 请求：浏览器向服务器发送一个 HTTP 请求报文
- 服务器处理请求并返回 HTTP 响应：服务器处理请求，并返回包含状态码和请求数据的响应报文
- 浏览器解析并渲染页面：浏览器接收响应，解析 HTML、CSS、JavaScript，并最终渲染出页面
- 连接终止：通过「四次挥手」关闭 TCP 连接（对于 HTTP/1.1 默认持久连接，会在传输完成后或超时后关闭）
详细分步解析
阶段一：URL 解析
当你在地址栏输入 https://www.example.com/index.html 并按下回车后，浏览器会：
- 分解 URL：
- 协议：
https→ 使用 HTTPS 协议，需要加密和身份验证 - 域名：
www.example.com→ 需要找到这个服务器的地址 - 端口：未指定，使用默认端口（HTTPS 为 443，HTTP 为 80）
- 路径：
/index.html→ 要请求服务器上的哪个资源
- 协议：
- 检查 HSTS 预加载列表：浏览器会检查该站点是否在 HSTS 列表中，如果是，即使你输入
http://，也会强制使用https://访问 - 检查缓存：浏览器可能会检查本地缓存（如 DNS 缓存、资源缓存），如果缓存有效且新鲜，可能会直接使用缓存内容，跳过后续网络请求
阶段二：DNS 查询（域名解析）
浏览器不知道 www.example.com 在哪里，它需要知道其对应的 IP 地址（如 93.184.216.34）。这个过程是：
- 浏览器缓存：浏览器查看自己的缓存中是否有该域名的 IP
- 操作系统缓存：如果浏览器缓存没有，会去查询操作系统的 hosts 文件和 DNS 解析器缓存
- 路由器缓存：请求会发送到路由器，路由器可能有自己的缓存
- ISP DNS 服务器：如果以上都没有，计算机会向互联网服务提供商（ISP）的 DNS 服务器发起查询请求
- 递归/迭代查询：
- 本地 DNS 服务器会从 根域名服务器（.）开始查询
- 根服务器告知应去查询 .com 顶级域名服务器（TLD）
- TLD 服务器告知应去查询该域名的 权威域名服务器
- 权威域名服务器返回
www.example.com的准确 IP 地址
- 本地 DNS 服务器将 IP 返回给操作系统，并缓存起来。操作系统再将其返回给浏览器，并缓存起来
注意：DNS 查询本身可能使用 UDP 协议，以减少开销。
阶段三：建立 TCP 连接（三次握手）
拿到 IP 地址后，浏览器需要通过 TCP 与服务器建立一个可靠的连接。因为 HTTPS 使用了 TLS/SSL 加密，所以这个过程稍复杂：
- TCP 三次握手：
- SYN：浏览器向服务器发送一个 SYN 包（序列号 = x），请求建立连接
- SYN-ACK：服务器收到后，回复一个 SYN-ACK 包（序列号 = y，确认号 = x+1）
- ACK：浏览器再回复一个 ACK 包（确认号 = y+1）。至此，TCP 连接建立成功
- TLS 握手（仅 HTTPS）：
- Client Hello：浏览器向服务器发送支持的 TLS 版本、加密套件列表和一个随机数
- Server Hello：服务器选择 TLS 版本和加密套件，并发送自己的数字证书和一个随机数
- 验证证书：浏览器验证服务器证书的合法性（是否由可信机构颁发、域名是否匹配、是否过期）
- Premaster Secret：浏览器用证书中的公钥加密一个「预主密钥」发送给服务器
- 生成会话密钥：服务器用私钥解密出「预主密钥」，然后双方利用三个随机数（客户端、服务端、预主密钥）生成相同的对称会话密钥
- 加密通信：后续的 HTTP 通信都将使用这个对称密钥进行加密解密
阶段四：发送 HTTP 请求
连接建立后，浏览器会组装一个 HTTP 请求报文，并通过连接发送给服务器。报文主要包括：
- 请求行：方法（GET, POST 等）、URL 路径、HTTP 版本
- 例如：
GET /index.html HTTP/1.1
- 例如：
- 请求头：包含元数据，如：
Host: www.example.comUser-Agent：浏览器身份标识Accept：能接收的响应数据类型（如 text/html, image/png）Cookie：本地存储的该站点的用户信息Connection: keep-alive（表示希望保持连接）
- 请求体：对于 POST 等方法，会包含发送给服务器的数据（如表单数据）
阶段五：服务器处理并返回 HTTP 响应
服务器接收到请求后，会进行处理：
- 处理请求：Web 服务器软件（如 Nginx, Apache）将请求转发给相应的后端应用（如 PHP, Python, Node.js）。应用处理业务逻辑，可能查询数据库，最终生成一个 HTTP 响应
- 返回响应：服务器发回一个 HTTP 响应报文，包括：
- 状态行：HTTP 版本、状态码和状态信息
- 例如：
HTTP/1.1 200 OK（成功）或404 Not Found（未找到）
- 例如：
- 响应头：包含响应的元数据，如：
Content-Type: text/html; charset=UTF-8（响应体的数据类型）Content-Length（响应体的大小）Set-Cookie（指示浏览器设置 Cookie）Cache-Control（指示浏览器如何缓存该资源）
- 响应体：实际请求的数据，通常是 HTML 文档内容
- 状态行：HTTP 版本、状态码和状态信息
阶段六：浏览器解析和渲染页面
这是最复杂的一步。浏览器拿到 HTML 文档后：
- 构建 DOM 树：
- 浏览器解析 HTML，将标签转换为 DOM（文档对象模型）树中的节点
- 构建 CSSOM 树：
- 同时，浏览器解析外部 CSS 文件和内联样式，构建 CSSOM（CSS 对象模型）树，它描述了各个节点的样式规则
- 执行 JavaScript：
- 在解析过程中，如果遇到
<script>标签，会暂停 HTML 解析，立即加载并执行 JavaScript 代码（除非标记为async或defer）。JS 可以修改 DOM 和 CSSOM
- 在解析过程中，如果遇到
- 构建渲染树：
- 将 DOM 树和 CSSOM 树合并，生成渲染树。渲染树只包含可见的节点（不包括
head,display: none的元素）
- 将 DOM 树和 CSSOM 树合并，生成渲染树。渲染树只包含可见的节点（不包括
- 布局：
- 计算渲染树中每个节点的确切位置和大小（又称「重排」）
- 绘制：
- 将布局计算后的每个节点转换为屏幕上的实际像素（又称「重绘」）。这包括绘制文本、颜色、图像、边框等
- 合成：
- 将页面的不同层（如可能由 GPU 加速的元素）合并到一起，最终显示在屏幕上
注意：为了优化性能，浏览器会尝试尽可能早地将内容显示出来，因此我们常会看到页面逐步加载的现象。
阶段七：连接终止
当页面和所有资源都加载完成后，TCP 连接不会立即关闭。在 HTTP/1.1 中，默认使用持久连接，允许在同一个连接上发送多个请求。连接会保持一段时间，如果在此期间有新的请求，可以复用这个连接，避免了重复握手开销。最终，当连接空闲超时后，会通过 TCP 四次挥手 来优雅地关闭连接。
流程图
graph TDA[输入 URL] --> B[URL 解析]B --> C[DNS 查询]C --> D[建立 TCP 连接]D --> E[发送 HTTP/HTTPS 请求]E --> F[服务器处理并返回响应]F --> G{状态码?}G -- 200 OK --> H[浏览器解析渲染]G -- 301/302 --> C[重定向 DNS]G -- 404/500 --> I[错误处理]H --> J[显示页面]subgraph H [浏览器渲染]H1[构建 DOM 树] --> H2[构建 CSSOM 树]H2 --> H3[执行 JavaScript]H3 --> H4[构建渲染树]H4 --> H5[布局]H5 --> H6[绘制]H6 --> H7[合成显示]end