前端面试：浏览器输入URL到页面展示，都经历了什么

凌晨起床
242 阅读13分钟

从浏览器地址栏输入 URL 到页面最终显示，是一个涉及 网络传输、服务器处理、浏览器渲染 的完整流程，包含多个关键阶段。面试中回答需按时间顺序梳理核心步骤，并点明各阶段的关键细节（如 DNS 缓存、TCP 握手、渲染树构建等），以下是结构化解析：

一、1. URL 解析：确定 “访问目标” 与 “协议规则”

浏览器首先对输入的 URL 进行解析，提取核心信息，判断访问方式：

  • 协议识别：区分 HTTP（80 端口，明文传输）、HTTPS（443 端口，加密传输）、FTP 等协议；若未输入协议，默认补全 http://。

  • 域名提取：从 URL 中分离出域名（如 www.baidu.com），排除路径（如 /index.html）、参数（如 ?id=1）、锚点（如 #top）。

  • 合法性校验：检查 URL 格式是否合法（如域名是否含非法字符），若不合法则提示错误（如 “无效网址”）。

示例：输入 baidu.com → 解析为 www.baidu.com:80/（协议：HTTP，域名：www.baidu.com，端口：80，路径：/）。

二、2. DNS 解析：将 “域名” 转换为 “IP 地址”

域名（如 www.baidu.com）是为了方便人类记忆，而网络中设备间通信依赖 IP 地址（如 14.215.177.38）。DNS 解析的核心是通过 “域名系统（Domain Name System）” 查询目标服务器的 IP 地址，且遵循 “缓存优先、层级查询” 原则：

（1）优先查询本地缓存（减少网络请求）

浏览器会按 “缓存层级” 依次查询，若命中则直接返回 IP，无需发起网络请求：

  1. 浏览器缓存：浏览器会缓存近期解析过的域名 - IP 映射（如 Chrome 缓存约 1 分钟），优先读取；

  2. 操作系统缓存：若浏览器缓存未命中，读取操作系统 hosts 文件（如 Windows 的 C:\Windows\System32\drivers\etc\hosts），若文件中手动配置了域名 - IP（如 127.0.0.1 localhost），则直接使用；

  3. 路由器缓存：操作系统缓存未命中时，查询路由器本地缓存（路由器会记录常用域名的 IP）。

（2）缓存未命中：发起 DNS 服务器层级查询（迭代查询）

若本地缓存均未命中，浏览器会向 本地 DNS 服务器（如宽带运营商提供的 DNS，或手动设置的 8.8.8.8（Google DNS））发起查询，后续通过 “层级迭代” 获取 IP：

  1. 本地 DNS 服务器查询：本地 DNS 先查自身缓存，未命中则向 “根 DNS 服务器” 发起请求；

  2. 根 DNS 服务器指引：根 DNS 不直接存储域名 - IP，仅返回 “顶级域 DNS 服务器” 地址（如 .com 顶级域服务器）；

  3. 顶级域 DNS 服务器指引：顶级域 DNS 返回 “二级域 DNS 服务器” 地址（如 baidu.com 二级域服务器）；

  4. 权威 DNS 服务器返回结果：二级域 DNS 是域名的 “权威服务器”（由域名服务商管理，如阿里云 DNS），存储该域名的 IP 映射，最终将 IP 地址返回给本地 DNS 服务器；

  5. 结果回传与缓存：本地 DNS 服务器将 IP 回传给浏览器，并缓存该映射（方便后续查询），浏览器拿到 IP 后进入下一步。

三、3. 建立网络连接：TCP 三次握手（HTTPS 需额外 TLS 握手）

拿到服务器 IP 后，浏览器需与服务器建立可靠的网络连接，核心是 TCP 三次握手（保证数据双向可靠传输）；若为 HTTPS 协议，还需在 TCP 基础上进行 TLS 握手（建立加密通道）。

（1）TCP 三次握手：确保 “双向通信可达”

TCP 是 “面向连接、可靠” 的传输层协议，通过三次握手建立连接：

  1. 客户端（浏览器）→ 服务器：发送 SYN 报文（同步报文），请求建立连接，附带 “客户端初始序列号（Seq=X）”；

  2. 服务器 → 客户端：收到 SYN 后，回复 SYN+ACK 报文（同步 + 确认），附带 “服务器初始序列号（Seq=Y）” 和 “确认号（Ack=X+1）”；

  3. 客户端 → 服务器：收到 SYN+ACK 后，回复 ACK 报文（确认），附带 “确认号（Ack=Y+1）”；

此时双方确认 “双向通信通道已建立”，TCP 连接生效。

（2）HTTPS 额外：TLS 握手（建立加密通道）

HTTPS = HTTP + TLS/SSL，TLS 握手的核心是协商加密算法、交换密钥，确保后续数据传输加密：

  1. 客户端发送 “加密支持列表” ：告知服务器支持的 TLS 版本、加密算法（如 AES）、随机数（Client Random）；

  2. 服务器回复 “加密选择与证书” ：选择 TLS 版本和算法，返回服务器证书（含公钥，由 CA 机构签发）、随机数（Server Random）；

  3. 客户端验证证书并生成 “会话密钥” ：

    • 验证证书合法性（如是否过期、是否由可信 CA 签发）；
    • 用服务器公钥加密 “预主密钥（Pre-Master Secret）”，发送给服务器；
    • 客户端用 Client Random + Server Random + Pre-Master Secret 生成 “会话密钥”（对称加密密钥）；

  1. 服务器生成 “会话密钥” ：用服务器私钥解密 Pre-Master Secret，再结合 Client Random + Server Random 生成与客户端相同的 “会话密钥”；

  2. 双方确认加密通道：客户端和服务器分别用会话密钥加密一条 “确认消息”，若对方能解密，则 TLS 加密通道建立成功。

四、4. 发送 HTTP 请求：向服务器 “索要资源”

TCP（或 TLS）连接建立后，浏览器会构造 HTTP 请求报文，通过连接发送给服务器，请求目标资源（如 HTML、CSS、JS）。

HTTP 请求报文结构（核心三部分）：

  1. 请求行：包含 “请求方法、请求路径、HTTP 版本”，如 GET /index.html HTTP/1.1；
    • 常见请求方法：GET（获取资源，无请求体）、POST（提交数据，有请求体）、HEAD（仅获取响应头）；
  1. 请求头：传递额外信息，如客户端信息、缓存控制、Cookie 等，示例：
Host: www.baidu.com  # 目标服务器域名+端口
User-Agent: Mozilla/5.0 (Windows NT 10.0; ...)  # 客户端浏览器/系统信息
Cookie: BAIDUID=...  # 客户端存储的 Cookie（身份标识等）
Cache-Control: max-age=0  # 缓存控制（禁止使用缓存）
  1. 请求体：仅 POST 等方法有，传递表单数据、JSON 等（如 username=admin&password=123）。

特殊情况：请求重定向

若服务器返回 3xx 状态码（如 301 永久重定向、302 临时重定向），浏览器会根据响应头中的 Location 字段，重新发起对新 URL 的请求（重复上述 DNS 解析→连接建立→请求发送流程）。

五、5. 服务器处理请求：生成 “HTTP 响应”

服务器接收到 HTTP 请求后，按 “后端处理流程” 处理请求，最终生成 HTTP 响应报文 回传给浏览器。核心处理步骤如下：

  1. 请求分发：若服务器是反向代理（如 Nginx），会根据请求路径（如 /api）将请求转发给对应的后端服务（如 Node.js 服务、Java 服务）；

  2. 业务逻辑处理：后端服务执行业务逻辑（如查询数据库、处理数据），生成需要返回的资源（如 HTML 字符串、JSON 数据）；

  3. 构造响应报文：服务器将资源封装为 HTTP 响应报文，包含 “状态码、响应头、响应体”；

  4. 返回响应：通过已建立的 TCP 连接，将响应报文发送给浏览器。

HTTP 响应报文结构（核心三部分）：

  1. 状态行：包含 “HTTP 版本、状态码、状态描述”，如 HTTP/1.1 200 OK；
    • 常见状态码：200（成功）、404（资源未找到）、500（服务器内部错误）、403（权限拒绝）；
  1. 响应头：传递服务器信息、资源描述、缓存规则等，示例：
Content-Type: text/html; charset=utf-8  # 响应体类型（HTML，编码 UTF-8）
Content-Length: 1024  # 响应体长度（字节）
Set-Cookie: SESSIONID=...  # 服务器向客户端设置 Cookie
Cache-Control: max-age=86400  # 资源缓存有效期（1 天）
  1. 响应体：服务器返回的实际资源（如 HTML 代码、CSS 代码、JS 代码、图片二进制数据）。

六、6. 浏览器渲染：将 “响应资源” 转换为 “可视页面”

浏览器接收到 HTTP 响应后，若响应体是 HTML 资源（页面核心），会进入 渲染阶段，将 HTML、CSS、JS 等资源解析并渲染为屏幕上的可视页面。核心分为 5 个步骤：

（1）1. HTML 解析：生成 DOM 树（Document Object Model）

浏览器按 “自上而下” 顺序解析 HTML 代码，将标签、属性、文本转换为 “DOM 节点”，最终形成树形结构（DOM 树）：

  • 词法分析：将 HTML 字符串拆分为 “令牌（Token）”（如 、

    、文本节点）；

  • 语法分析：将令牌按嵌套关系组装为 DOM 节点，每个节点包含 “标签名、属性、子节点”；

  • 处理阻塞：解析 HTML 时若遇到

示例：

HTML 代码

Hello
→ DOM 树结构：

Document → html → body → div → 文本节点（Hello）。

（2）2. CSS 解析：生成 CSSOM 树（CSS Object Model）

浏览器并行解析 CSS 资源（如 标签、外部 CSS 文件），将 CSS 样式规则转换为 “CSSOM 节点”，形成树形结构（CSSOM 树）：

  • 规则解析：提取 CSS 选择器（如 div、.class、#id）和对应的样式属性（如 color: red、font-size: 16px）；

  • 优先级计算：按 “specificity 规则”（内联样式 > ID 选择器 > 类选择器 > 元素选择器）确定样式优先级，解决样式冲突；

  • 继承处理：子节点会继承父节点的可继承样式（如 color、font-family），不可继承样式（如 border）需单独设置。

示例：

CSS 代码 body { color: black; } div { font-size: 16px; } → CSSOM 树中，body 节点关联 color: black，div 节点关联 font-size: 16px，且 div 继承 body 的 color: black。

（3）3. 构建渲染树（Render Tree）：关联 DOM 与 CSSOM

渲染树是 “可视元素的集合”，仅包含屏幕上可见的节点（排除不可见元素），由 DOM 树和 CSSOM 树 “匹配合并” 生成：

  • 节点筛选：排除不可见节点（如 标签、display: none 的元素、visibility: hidden 虽占位但仍会进入渲染树）；

  • 样式匹配：为每个 DOM 节点匹配对应的 CSSOM 样式（按优先级计算最终样式）；

  • 生成渲染节点：每个渲染节点包含 “元素位置、尺寸、样式” 等渲染所需信息。

示例：DOM 树中的 div 节点 + CSSOM 中的 font-size: 16px/color: black → 渲染树中生成一个包含这些样式的 div 渲染节点。

（4）4. 布局（Layout）：计算元素 “位置与尺寸”（重排）

布局（也叫 “重排 / 回流，Reflow”）是根据渲染树，计算每个渲染节点在屏幕上的 精确位置（x/y 坐标）和尺寸（宽 / 高） ：

  • 根节点开始：从渲染树的根节点（如 ）开始，递归计算所有子节点的布局；

  • 依赖计算：元素的布局会依赖父节点（如子节点宽度可能是父节点宽度的 50%）和相邻节点（如浮动元素会影响后续元素位置）；

  • 触发条件：后续若修改元素的 “布局相关属性”（如 width、height、margin、display），会重新触发布局（性能开销较大）。

（5）5. 绘制（Paint）：将元素 “绘制到屏幕”（重绘）

绘制（也叫 “重绘，Repaint”）是根据渲染树和布局结果，将每个元素的 “样式”（如颜色、背景、边框、阴影）绘制到 图层（Layer） 上：

  • 图层优化：浏览器会将复杂元素（如 、transform 动画元素）拆分为独立图层，避免单个元素绘制影响整个页面；

  • 绘制顺序：按 “z-index 优先级” 和 “文档流顺序” 绘制（如 z-index 高的元素覆盖低的，背景先于文本绘制）；

  • 触发条件：修改元素的 “非布局属性”（如 color、background-color、box-shadow），仅触发绘制（性能开销低于布局）。

（6）6. 合成（Composite）：合并图层并显示

合成是将所有绘制好的 “图层” 合并为一张完整的图像，通过 GPU 加速 渲染到屏幕上：

  • GPU 优势：GPU 擅长并行处理图像，合成阶段可利用 GPU 减少 CPU 负担；

  • 动画优化：若元素使用 transform（位移、缩放）或 opacity（透明度）实现动画，浏览器可直接在合成阶段修改图层，无需触发布局和绘制（性能最优）。

七、关闭 TCP 连接：TCP 四次挥手（可选，HTTP/1.1 可复用连接）

若服务器返回 “连接关闭” 标识（如 HTTP 响应头 Connection: close），或浏览器无需继续请求资源，会通过 TCP 四次挥手 关闭连接（保证数据传输完成后再断开）：

  1. 客户端 → 服务器：发送 FIN 报文（结束报文），表示 “客户端无数据要发送”；

  2. 服务器 → 客户端：回复 ACK 报文，确认 “收到 FIN，准备关闭”（此时服务器可能仍在发送剩余数据）；

  3. 服务器 → 客户端：服务器发送完数据后，发送 FIN 报文，表示 “服务器无数据要发送”；

  4. 客户端 → 服务器：回复 ACK 报文，确认 “收到 FIN”；

等待一段时间（确保服务器收到 ACK）后，双方关闭 TCP 连接。

注意：HTTP/1.1 默认启用 Connection: keep-alive，TCP 连接会被复用（后续请求无需重新三次握手），减少开销；HTTP/2 则通过 “多路复用” 进一步优化连接效率。

八、补充：影响流程的关键细节（面试加分点）

  1. 缓存机制：浏览器会缓存静态资源（HTML、CSS、JS、图片），通过 HTTP 响应头 Cache-Control、ETag、Last-Modified 控制缓存策略，减少重复请求；

  2. CDN 加速：若资源存储在 CDN（内容分发网络），DNS 解析会指向最近的 CDN 节点，缩短资源加载距离；

  3. 资源加载顺序：

    • CSS 阻塞 “渲染”（需 CSSOM 才能构建渲染树），但不阻塞 HTML 解析（可并行加载）；

    • JS 阻塞 “HTML 解析” 和 “渲染”（需先执行 JS，避免修改未解析的 DOM/CSSOM），可通过 async（异步加载，加载完立即执行）或 defer（异步加载，HTML 解析完再执行）优化；

  4. HTTP/2 特性：通过 “多路复用”（一个 TCP 连接传输多个请求）、“服务器推送”（主动推送依赖资源）减少网络开销，提升加载速度。

总结：完整流程梳理

  1. URL 解析：提取协议、域名、路径；

  2. DNS 解析：域名→IP（本地缓存→DNS 服务器层级查询）；

  3. 连接建立：TCP 三次握手（HTTPS 加 TLS 握手）；

  4. 发送请求：构造 HTTP 请求报文并发送；

  5. 服务器处理：请求分发→业务逻辑→构造 HTTP 响应；

  6. 接收响应：浏览器接收响应报文；

  7. 关闭连接：TCP 四次挥手（可选）；

  8. 浏览器渲染：HTML 解析（DOM）→ CSS 解析（CSSOM）→ 渲染树→布局→绘制→合成→显示页面。

每个阶段环环相扣，任何环节的优化（如 DNS 缓存、TCP 复用、渲染优化）都会直接影响页面加载速度和用户体验，也是面试中常被深入追问的方向。

avatar
文章
阅读
粉丝