浏览器从输入 URL 到最终显示页面的过程是一个复杂且高度优化的流程，涉及多个阶段的协同工作。以下是详细拆解：

---

1. 输入 URL 并解析

• 用户输入：在地址栏输入 https://example.com 或搜索关键词。
• 浏览器解析 URL：
  • 提取协议（HTTP/HTTPS）、域名（example.com）、端口（默认 80/443）和路径（如 /index.html）。
  • 检查缓存：浏览器会先查找本地缓存（如内存缓存、磁盘缓存）是否有该资源的副本。

---

2. DNS 解析：域名 → IP 地址

• 目的：将域名转换为服务器的 IP 地址。
• 步骤：
  1. 浏览器缓存检查：是否有近期缓存的 DNS 记录。
  2. 系统缓存检查：操作系统是否有缓存的 DNS 记录。
  3. 路由器/ISP DNS 查询：向本地路由器或互联网服务提供商（ISP）的 DNS 服务器发起查询。
  4. 根域名服务器：如果未找到，逐级查询顶级域（TLD）服务器（如 .com）和权威 DNS 服务器。
• 结果：获取目标服务器的 IP 地址（如 93.184.216.34）。

---

3. 建立 TCP 连接（HTTP）或 TLS 握手（HTTPS）

• HTTP：通过 TCP 三次握手 建立与服务器的连接。
• HTTPS：
  1. TLS 握手：协商加密协议（如 TLS 1.3）、交换密钥，确保通信安全。
  2. 证书验证：浏览器验证服务器的 SSL/TLS 证书是否合法（由可信 CA 签发、未过期、域名匹配）。

---

4. 发起 HTTP 请求

• 请求内容：浏览器发送 HTTP 请求报文，包含：
  • 方法：GET、POST 等。
  • 请求头：Host、User-Agent、Accept-Language、Cookie 等元数据。
  • 请求体（仅 POST）：表单数据或 JSON。
• 示例请求：

  GET /index.html HTTP/1.1
  Host: example.com
  User-Agent: Chrome/120
  Accept-Language: en-US

---

5. 服务器处理请求并返回响应

• 服务器处理：
  • 接收请求后，服务器根据路径、参数等执行逻辑（如查询数据库、动态生成页面）。
  • 生成响应报文，包含状态码（如 200 OK）、响应头（Content-Type、Set-Cookie）和响应体（HTML 内容）。
• 常见响应状态码：
  • 200 OK：请求成功，返回资源。
  • 301/302 Redirect：重定向到新 URL。
  • 404 Not Found：资源不存在。
  • 500 Server Error：服务器内部错误。

---

6. 浏览器解析响应并构建渲染树

(1) 解析 HTML，构建 DOM 树

• 浏览器逐行解析 HTML，将标签转换为 DOM 节点，形成 DOM 树。
• 遇到 <script> 标签时，默认会暂停 HTML 解析，下载并执行脚本（除非添加 async 或 defer 属性）。

(2) 解析 CSS，构建 CSSOM

• 下载并解析 CSS 文件，生成 CSS 规则树（CSSOM）。
• CSS 是渲染阻塞资源，需等待 CSSOM 构建完成后才能进入下一步。

(3) 合并 DOM 和 CSSOM，生成渲染树

• 渲染树包含所有可见节点（如 <div>、<p>），但不包括隐藏元素（如 display: none）。

(4) 布局（Layout）

• 计算每个节点的几何位置和尺寸（如宽度、高度、位置）。
• 此过程也称为 重排（Reflow）。

(5) 绘制（Paint）

• 将渲染树节点转换为像素，生成图层（Layer）。
• 包括绘制文本、颜色、边框、阴影等。

(6) 合成（Composite）

• 将多个图层合并为最终页面，提交给 GPU 渲染到屏幕上。

---

7. 加载静态资源

• 图片、视频、字体等：按需加载，可能触发多次 HTTP 请求。
• 异步脚本：<script async> 或 defer 的脚本会并行加载，执行时机不同。

---

8. 关键事件触发

• DOMContentLoaded：DOM 树构建完成，CSSOM 也已就绪，但图片等资源可能未加载。
• load：所有资源（包括图片、字体）加载完成，页面完全渲染。

---

9. 页面交互

• JavaScript 开始执行，绑定事件监听器（如点击、滚动）。
• 用户可以与页面交互（如填写表单、点击按钮）。

---

10. 动态更新（可选）

• 通过 JavaScript 动态修改 DOM/CSSOM（如 AJAX 请求、前端框架更新）。
• 触发重新布局、绘制或合成（Reflow → Repaint → Composite）。

---

关键性能优化点

阶段	优化策略
DNS 解析	使用 CDN、DNS 预解析（<link rel="dns-prefetch">）
TCP/TLS 连接	保持连接复用（HTTP/2、Keep-Alive）
请求/响应	减少请求体积（压缩、合并文件）、服务端缓存（ETag、Cache-Control）
渲染阻塞	异步加载 JS/CSS、内联关键 CSS
首屏加载	预加载关键资源（<link rel="preload">）、懒加载图片（loading="lazy"）

---

总结流程图

输入 URL
↓
DNS 解析 → 获取 IP
↓
建立 TCP/TLS 连接
↓
发送 HTTP 请求
↓
服务器响应（HTML）
↓
解析 HTML → 构建 DOM
↓
解析 CSS → 构建 CSSOM
↓
生成渲染树
↓
布局（Layout）→ 绘制（Paint）→ 合成（Composite）
↓
加载静态资源（图片、字体等）
↓
触发 DOMContentLoaded 和 load 事件
↓
页面交互与动态更新

通过理解这一流程，开发者可以针对性优化性能，例如减少关键渲染路径上的阻塞资源、利用浏览器缓存、使用异步加载等。