重构人生

外观

浏览器加载和渲染网页的过程

约 909 字大约 3 分钟

2025-03-15

总结

浏览器渲染和加载网页的过程可以分为以下几个主要阶段：

  1. 发送请求并获取 HTML。
  2. 解析 HTML 和 CSS，构建 DOM 树和 CSSOM 树。
  3. 生成渲染树并计算布局。
  4. 绘制页面并合成最终图像。
  5. 加载并执行 JavaScript。
  6. 进入交互阶段。

浏览器渲染和加载网页的过程是一个复杂的多步骤流程，涉及网络请求、资源解析、渲染树构建、布局计算和绘制等环节。以下是浏览器加载和渲染网页的详细过程：

1. 输入 URL 并发送请求

  • 用户在地址栏输入 URL 并按下回车。
  • 浏览器检查缓存（如 HTTP 缓存、Service Worker 缓存）是否有可用的资源副本。
  • 如果没有缓存或缓存过期，浏览器通过 DNS 解析将域名转换为 IP 地址，然后向服务器发送 HTTP 请求。

2. 服务器响应

  • 服务器接收到请求后，返回 HTML 文件（通常是 index.html）。
  • 浏览器开始解析 HTML 文件。

3. 解析 HTML 并构建 DOM 树

  • 浏览器逐行解析 HTML 文件，将标签转换为 DOM（Document Object Model）节点。
  • 解析过程中，如果遇到外部资源（如 CSS、JavaScript、图片），浏览器会发起额外的网络请求。
  • 最终生成一棵 DOM 树，表示网页的结构。

4. 解析 CSS 并构建 CSSOM 树

  • 浏览器解析外部 CSS 文件和内联样式，生成 CSSOM（CSS Object Model）树。
  • CSSOM 树描述了每个 DOM 节点的样式信息。

5. 构建渲染树（Render Tree）

  • 浏览器将 DOM 树和 CSSOM 树结合，生成 渲染树。
  • 渲染树只包含需要显示的节点（例如，display: none 的元素不会包含在渲染树中）。

6. 布局（Layout）

  • 浏览器根据渲染树计算每个节点的几何信息（如位置、大小）。
  • 这个过程也称为 回流（Reflow），是浏览器确定页面布局的关键步骤。

7. 绘制（Paint）

  • 浏览器将渲染树中的每个节点绘制到屏幕上。
  • 这个过程包括填充颜色、绘制边框、渲染文本等。

8. 合成（Compositing）

  • 如果页面包含分层（如 z-index 或 transform），浏览器会将不同的层分开绘制，然后合成最终的图像。
  • 这个过程可以提高渲染性能，尤其是在动画和滚动时。

9. 加载 JavaScript 并执行

  • 如果 HTML 中包含 <script> 标签，浏览器会下载并执行 JavaScript 代码。
  • JavaScript 的执行可能会阻塞 DOM 构建和渲染（除非使用 async 或 defer 属性）。
  • JavaScript 可以动态修改 DOM 或 CSSOM，触发重新布局和绘制。

10. 交互阶段

  • 页面加载完成后，浏览器进入交互阶段。
  • 用户可以与页面交互（如点击按钮、滚动页面），浏览器会根据需要更新渲染树、布局和绘制。

关键优化点

  1. 减少关键资源数量：
    • 通过压缩、合并 CSS 和 JavaScript 文件，减少关键资源的数量。
  2. 优化关键渲染路径：
    • 将 CSS 放在 <head> 中，JavaScript 放在 <body> 末尾或使用 async/defer。
  3. 使用缓存：
    • 利用 HTTP 缓存、Service Worker 缓存减少重复请求。
  4. 减少重排和重绘：
    • 避免频繁操作 DOM 或修改样式，使用 transform 和 opacity 等属性优化动画性能。

理解这一过程有助于开发者优化网页性能，提升用户体验。

更新日志

2025/8/24 08:17
查看所有更新日志
  • e7112-1于