从输入 URL 到页面展示的完整链路解析

“从输入 URL 到页面展示，这中间发生了什么？”

这是一道计算机网络与浏览器原理的经典面试题。它看似基础，实则深不见底。对于初级开发者，可能只需要回答“DNS 解析、建立连接、下载文件、渲染页面”即可；但对于高级工程师而言，这道题考察的是对网络协议栈、浏览器多进程架构、渲染流水线以及性能优化的系统性理解。

本文将剥离表象，深入底层，以专业的视角还原这一过程的全貌。

一、 URL 解析与 DNS 查询

1. URL 结构拆解

URL（Uniform Resource Locator），统一资源定位符。浏览器首先会对用户输入的字符串进行解析。如果不符合 URL 规则，浏览器会将其视为搜索关键字传给默认搜索引擎；如果符合规则，则拆解为以下部分：

scheme://host.domain:port/path/filename?query#fragment

• Scheme: 协议类型（HTTP/HTTPS/FTP 等）。
• Host/Domain: 域名（如 http://juejin.cn）。
• Port: 端口号（HTTP 默认为 80，HTTPS 默认为 443）。
• Path: 资源路径。
• Query: 查询参数。
• Fragment: 锚点（注意：锚点不会被发送到服务器）。

2. DNS 解析流程

网络通讯是基于 TCP/IP 协议的，是通过 IP 地址而非域名进行定位。因此，浏览器的第一步是获取目标服务器的 IP 地址。

DNS 查询遵循级联缓存策略，查找顺序如下：

1. 浏览器缓存: 浏览器会检查自身维护的 DNS 缓存。
2. 系统缓存: 检查操作系统的 hosts 文件。
3. 路由器缓存: 检查路由器的 DNS 记录。
4. ISP DNS 缓存: 也就是本地 DNS 服务器（Local DNS），通常由网络服务提供商提供。

如果上述缓存均未命中，则发起递归查询与迭代查询：

1. 递归查询: 客户端向本地 DNS 服务器发起请求，如果本地 DNS 不知道，它会作为代理去替客户端查询。
2. 迭代查询: 本地 DNS 服务器依次向根域名服务器、顶级域名服务器、权威域名服务器发起请求，最终获取 IP 地址并返回给客户端。

进阶优化：

• DNS Prefetch: 现代前端通过 提前解析域名，减少后续请求的延迟。
• CDN 负载均衡: 在 DNS 解析阶段，智能 DNS 会根据用户的地理位置，返回距离用户最近的 CDN 节点 IP，而非源站 IP，从而实现内容分发加速。

二、 TCP 连接与 HTTP 请求

拿到 IP 地址后，浏览器与服务器建立连接。这是数据传输的基础。

1. TCP 三次握手

TCP（Transmission Control Protocol）提供可靠的传输服务。建立连接需要经过三次握手，确认双方的收发能力。

• 第一次握手（SYN）: 客户端发送 SYN=1, Seq=x。客户端进入 SYN_SEND 状态。此时证明客户端有发送能力。
• 第二次握手（SYN+ACK）: 服务端接收报文，回复 SYN=1, ACK=1, seq=y, ack=x+1。服务端进入 SYN_RCVD 状态。此时证明服务端有接收和发送能力。
• 第三次握手（ACK）: 客户端接收报文，回复 ACK=1, seq=x+1, ack=y+1。双方进入 ESTABLISHED 状态。此时证明客户端有接收能力。

核心问题：为什么是三次而不是两次？

主要是为了防止已失效的连接请求报文段又传送到了服务端，产生错误。如果只有两次握手，服务端收到失效的 SYN 包后误以为建立了新连接，会一直等待客户端发送数据，造成资源浪费。

2. TLS/SSL 握手（HTTPS）

如果是 HTTPS 协议，在 TCP 建立后，还需要进行 TLS 四次握手以协商加密密钥（Session Key）。过程包括交换支持的加密套件、验证服务器证书、通过非对称加密交换随机数等，最终生成对称加密密钥用于后续通信。

3. 发送 HTTP 请求

连接建立完毕，浏览器构建 HTTP 请求报文并发送。

• 请求行: 方法（GET/POST）、URL、协议版本。
• 请求头: User-Agent、Accept、Cookie 等。
• 请求体: POST 请求携带的数据。

服务器处理请求后，返回 HTTP 响应报文（状态行、响应头、响应体）。浏览器拿到响应体（通常是 HTML 文件），准备开始渲染。

三、 浏览器解析与渲染（核心重点）

这是前端工程师最需要关注的环节。现代浏览器采用多进程架构，主要包括Browser 进程（主控）、网络进程和渲染进程。

当网络进程下载完 HTML 数据后，会通过 IPC 通信将数据交给渲染进程（Renderer Process）。渲染主流程如下：

1. 解析 HTML 构建 DOM 树

浏览器无法直接理解 HTML 字符串，需要将其转化为对象模型（DOM）。

流程：Bytes（字节流） -> Characters（字符） -> Tokens（词法分析） -> Nodes（节点） -> DOM Tree。

注意：遇到

2. 解析 CSS 构建 CSSOM 树

浏览器下载 CSS 文件（.css）并解析为 CSSOM（CSS Object Model）。

关键点：

• CSS 下载不阻塞DOM 树的解析。
• CSS 下载阻塞Render Tree 的构建（因此会阻塞页面渲染）。

3. 生成渲染树（Render Tree）

DOM 树与 CSSOM 树结合，生成 Render Tree。

• 浏览器遍历 DOM 树的根节点，在 CSSOM 中找到对应的样式。
• 忽略不可见节点：display: none 的节点不会出现在 Render Tree 中（但 visibility: hidden 的节点会存在，因为它占据空间）。
• 去除元数据：head、script 等非视觉节点会被去除。

4. 布局（Layout / Reflow）

有了 Render Tree，浏览器已经知道有哪些节点以及样式，但还不知道它们的几何信息（位置、大小）。
布局阶段会从根节点递归计算每个元素在视口中的确切坐标和尺寸。这个过程在技术上被称为Reflow（回流）。

5. 绘制（Paint）

布局确定后，浏览器会生成绘制指令列表（如“在 x,y 处画一个红色矩形”）。这个过程并不直接显示在屏幕上，而是生成图层（Layer）的绘制记录。

6. 合成（Composite）与显示

这是现代浏览器渲染优化的核心。

• 分层：浏览器会将页面分为不同的图层（Layer）。拥有 transform (3D)、will-change、position: fixed 等属性的元素会被提升为单独的合成层。
• 光栅化（Raster）：合成线程将图层切分为图块（Tile），并发送给 GPU 进行光栅化（生成位图）。
• 显示：一旦所有图块都被光栅化，浏览器会生成一个 DrawQuad 命令提交给 GPU 进程，最终将像素显示在屏幕上。

脚本阻塞与优化：

为了避免 JS 阻塞 DOM 构建，可以使用 defer 和 async：

• defer: 异步下载，文档解析完成后、DOMContentLoaded 事件前按照顺序执行。
• async: 异步下载，下载完成后立即执行（可能打断 HTML 解析），执行顺序不固定。

四、 连接断开

当页面资源加载完毕，且不再需要通信时，通过TCP 四次挥手断开连接。

1. 第一次挥手（FIN）: 主动方发送 FIN，进入 FIN_WAIT_1。
2. 第二次挥手（ACK）: 被动方发送 ACK，进入 CLOSE_WAIT。主动方进入 FIN_WAIT_2。此时连接处于半关闭状态。
3. 第三次挥手（FIN）: 被动方数据发送完毕，发送 FIN，进入 LAST_ACK。
4. 第四次挥手（ACK）: 主动方发送 ACK，进入 TIME_WAIT。等待 2MSL（报文最大生存时间）后释放连接。

为什么需要 TIME_WAIT？确保被动方收到了最后的 ACK。如果 ACK 丢失，被动方重传 FIN，主动方还能在 2MSL 内响应。

五、 面试高分指南（场景模拟）

场景：面试官问：“请详细描述从输入 URL 到页面展示发生了什么？”

回答策略范本：

1. 总述（宏观骨架）

“这个过程主要分为两个阶段：网络通信阶段和页面渲染阶段。网络阶段负责将 URL 转换为 IP 并获取资源，渲染阶段负责将 HTML 代码转化为像素点。”

2. 网络通信阶段（突出细节）

• “首先是DNS 解析。浏览器会依次查询浏览器缓存、系统 hosts、路由器缓存，最后发起递归或迭代查询拿到 IP。这里可以提到CDN是如何通过 DNS 实现就近访问的。”
• “拿到 IP 后进行TCP 三次握手建立连接。如果是 HTTPS，还涉及 TLS 握手协商密钥。”
• “连接建立后发送 HTTP 请求。需要注意HTTP/1.1 的 Keep-Alive可以复用 TCP 连接，而HTTP/2更是通过多路复用解决了队头阻塞问题。”

3. 页面渲染阶段（展示深度）

• “浏览器解析 HTML 构建 DOM 树，解析 CSS 构建 CSSOM 树，两者合并生成Render Tree。”
• “接着进行Layout（回流）计算位置大小，然后进行Paint（重绘）生成绘制指令。”
• “这里有一个关键点是Composite（合成）。现代浏览器会利用 GPU 加速，将 transform 或 opacity 的元素提升为独立图层。修改这些属性不会触发 Reflow 和 Repaint，只会触发 Composite，这是性能优化的核心。”

4. 脚本执行（补充）

• “在解析过程中，遇到 JS 会阻塞 DOM 构建。为了优化首屏，我们通常使用 defer 属性让脚本异步加载并在 HTML 解析完成后执行。”

总结

“整个流程结束于 TCP 四次挥手断开连接。这就构成了一个完整的浏览闭环。”