深入解析浏览器的渲染过程

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 一、浏览器渲染的总体流程
- [二、1. 网络请求与资源加载](#二、1. 网络请求与资源加载)
- - [（1）DNS 解析](#（1）DNS 解析)
  - [（2）TCP 连接](#（2）TCP 连接)
  - [（3）HTTP 请求与响应](#（3）HTTP 请求与响应)
  - （4）资源加载
- [三、2. 解析 HTML 构建 DOM 树](#三、2. 解析 HTML 构建 DOM 树)
- - [（1）DOM 树的构建](#（1）DOM 树的构建)
  - [（2）解析中断与 JavaScript 执行](#（2）解析中断与 JavaScript 执行)
- [四、3. 解析 CSS 构建 CSSOM 树](#四、3. 解析 CSS 构建 CSSOM 树)
- - [（1）CSSOM 树的构建](#（1）CSSOM 树的构建)
  - [（2）CSS 的加载与阻塞](#（2）CSS 的加载与阻塞)
- [五、4. 构建渲染树](#五、4. 构建渲染树)
- - （1）渲染树的构建过程
  - （2）隐藏元素的处理
- [六、5. 布局（Layout）](#六、5. 布局（Layout）)
- - （1）布局的计算过程
  - （2）布局的性能影响
- [七、6. 绘制（Paint）](#七、6. 绘制（Paint）)
- - （1）绘制的内容
  - （2）绘制的性能影响
- [八、7. 合成（Composite）](#八、7. 合成（Composite）)
- - （1）图层的划分
  - （2）合成的性能优化
- 九、浏览器渲染的优化策略
- - （1）优化资源加载
  - [（2）优化 CSS 和 JavaScript](#（2）优化 CSS 和 JavaScript)
  - （3）合理使用图层
  - （4）监控性能
- 十、总结

在现代 Web 开发中，浏览器的渲染过程是前端开发者必须了解的核心知识之一。了解浏览器如何将 HTML、CSS 和 JavaScript 转换为用户可以看到的页面，不仅可以帮助我们优化页面性能，还能让我们更好地理解前端开发中的各种现象和问题。本文将深入解析浏览器的渲染过程，从网络请求到页面渲染完成，逐步剖析其中的关键步骤和机制。

一、浏览器渲染的总体流程

浏览器渲染页面的过程可以大致分为以下几个阶段：

网络请求与资源加载：浏览器发起网络请求，获取页面所需的资源（HTML、CSS、JavaScript、图片等）。
解析 HTML 构建 DOM 树：浏览器解析 HTML 文档，构建 DOM（文档对象模型）树。
解析 CSS 构建 CSSOM 树：浏览器解析 CSS 文件，构建 CSSOM（CSS 对象模型）树。
构建渲染树：将 DOM 树和 CSSOM 树结合，生成渲染树。
布局（Layout）：计算渲染树中每个节点的位置和尺寸。
绘制（Paint）：将渲染树的每个节点绘制到屏幕上。
合成（Composite）：将绘制好的图层合成最终的页面。

这些步骤并不是完全独立的，它们之间存在相互依赖和交互。例如，JavaScript 的执行可能会阻塞 HTML 的解析，CSS 的加载也会影响页面的渲染。接下来，我们将详细探讨每个阶段的具体内容。

二、1. 网络请求与资源加载

当用户在浏览器地址栏输入一个 URL 并按下回车时，浏览器会发起一个 HTTP 请求，从服务器获取页面的 HTML 文件。这个过程涉及到 DNS 解析、TCP 连接建立、HTTP 请求发送和响应接收等多个步骤。

（1）DNS 解析

DNS（域名系统）解析是将域名（如 www.example.com）转换为对应的 IP 地址的过程。浏览器会查询本地缓存、系统缓存或网络中的 DNS 服务器，获取目标服务器的 IP 地址。

（2）TCP 连接

获取到 IP 地址后，浏览器会与服务器建立一个 TCP 连接。TCP 是一种可靠的网络协议，确保数据能够正确传输。建立连接后，浏览器会发送一个 HTTP 请求。

（3）HTTP 请求与响应

浏览器通过 HTTP 协议向服务器请求页面资源。HTTP 请求包括请求行、请求头和请求体。服务器接收到请求后，会返回一个 HTTP 响应，其中包含状态码、响应头和响应体。响应体通常是一个 HTML 文件。

（4）资源加载

HTML 文件中可能包含其他资源的引用，如 CSS 文件、JavaScript 文件、图片等。浏览器会解析 HTML 文件，发现这些资源后，会继续发起网络请求，将这些资源加载到本地。

关键点：

浏览器会根据资源的优先级进行加载。例如，CSS 文件通常会被优先加载，因为它们直接影响页面的渲染。
JavaScript 文件的加载和执行可能会阻塞 HTML 的解析，导致页面渲染延迟。

三、2. 解析 HTML 构建 DOM 树

当浏览器获取到 HTML 文件后，会开始解析 HTML 文档。HTML 解析器会将 HTML 文档中的标签和内容转换为一个树形结构，称为 DOM 树。

（1）DOM 树的构建

DOM 树的构建过程是从上到下逐行解析 HTML 文档。每个 HTML 标签都对应一个 DOM 节点，例如：

<html> 标签对应一个 HTML 节点。
<body> 标签对应一个 Body 节点。
<div> 标签对应一个 Div 节点。

DOM 树的构建是逐步进行的，浏览器会根据已解析的内容逐步构建 DOM 树。

（2）解析中断与 JavaScript 执行

如果 HTML 文档中包含 <script> 标签，浏览器会暂停 HTML 的解析，立即执行该脚本。这是因为 JavaScript 可能会修改 DOM 树，或者动态加载其他资源。例如：

html 复制代码

<div id="example">Hello</div>
<script>
  document.getElementById("example").style.color = "red";
</script>

在执行 JavaScript 时，浏览器需要暂停 HTML 的解析，因为 JavaScript 可能会修改 DOM 树。

关键点：

JavaScript 的执行会阻塞 HTML 的解析，导致页面渲染延迟。
为了优化性能，建议将 JavaScript 文件放在页面底部，或者使用 async 和 defer 属性。

四、3. 解析 CSS 构建 CSSOM 树

与 DOM 树类似，浏览器会解析 CSS 文件，构建一个 CSSOM 树。CSSOM 树是一个树形结构，用于表示页面的样式规则。

（1）CSSOM 树的构建

浏览器会解析 CSS 文件中的选择器和样式规则，并将它们存储在 CSSOM 树中。例如：

css 复制代码

body {
  font-size: 16px;
  color: blue;
}
div {
  margin: 10px;
}

在 CSSOM 树中，body 和 div 是节点，它们的样式规则（如 font-size、color、margin）是节点的属性。

（2）CSS 的加载与阻塞

CSS 文件的加载会阻塞页面的渲染，因为浏览器需要先解析 CSS 文件，构建 CSSOM 树，才能确定页面的样式。如果 CSS 文件较大，或者加载时间较长，会导致页面渲染延迟。

关键点：

CSS 的加载会阻塞页面渲染，因此建议优化 CSS 文件的大小和加载速度。
可以使用媒体查询（@media）来异步加载某些 CSS 文件，减少阻塞。

五、4. 构建渲染树

当 DOM 树和 CSSOM 树都构建完成后，浏览器会将它们结合在一起，生成一个渲染树。渲染树是一个包含 DOM 节点和样式信息的树形结构，用于表示页面的最终布局和样式。

（1）渲染树的构建过程

浏览器会遍历 DOM 树，对于每个节点，查找 CSSOM 树中对应的样式规则，并将样式应用到 DOM 节点上。最终生成的渲染树包含了每个节点的位置、尺寸和样式信息。

（2）隐藏元素的处理

在构建渲染树时，浏览器会忽略那些不可见的元素（如 display: none 的元素）。这些元素不会出现在渲染树中，也不会影响页面的布局和绘制。

关键点：

渲染树的构建依赖于 DOM 树和 CSSOM 树，因此 CSS 和 JavaScript 的加载和执行会直接影响渲染树的生成速度。

六、5. 布局（Layout）

布局阶段是浏览器根据渲染树计算每个节点的位置和尺寸的过程。布局也被称为"重排"（Reflow）。

（1）布局的计算过程

浏览器会从渲染树的根节点开始，逐层计算每个节点的布局信息。布局的计算需要考虑以下因素：

父节点的尺寸和位置。
当前节点的样式（如 width、height、margin、padding 等）。
内容的大小（如文本、图片等）。

例如，一个 div 元素的宽度可能由其父元素的宽度和自身的 width 样式决定。

（2）布局的性能影响

布局是一个比较耗时的过程，尤其是当页面中有大量元素时。频繁的布局计算会导致页面性能下降，因此需要尽量减少布局的触发。

关键点：

修改 DOM 节点的布局属性（如 width、height、margin 等）会触发布局。
尽量减少对 DOM 的操作，避免频繁触发布局。

七、6. 绘制（Paint）

绘制阶段是浏览器将渲染树的每个节点绘制到屏幕上的过程。绘制也被称为"重绘"（Repaint）。

（1）绘制的内容

绘制阶段包括以下内容：

文本的绘制。
背景颜色或背景图片的绘制。
边框的绘制。
盒子模型的绘制。

绘制过程是逐像素进行的，浏览器会根据每个节点的样式和布局信息，将内容绘制到屏幕上。

（2）绘制的性能影响

绘制过程也比较耗时，尤其是当页面中有大量复杂的样式时。频繁的绘制会导致页面性能下降，因此需要尽量减少绘制的触发。

关键点：

修改 DOM 节点的样式（如 color、background-color 等）会触发绘制。
尽量减少对 DOM 的操作，避免频繁触发绘制。

八、7. 合成（Composite）

合成阶段是浏览器将绘制好的图层合成最终页面的过程。在现代浏览器中，页面的绘制通常会被分解为多个图层，每个图层独立绘制，然后在合成阶段将它们合并在一起。

（1）图层的划分

浏览器会根据页面的结构和样式，将页面划分为多个图层。例如：

一个 div 元素可能是一个图层。
一个 canvas 元素可能是一个图层。
一个 video 元素可能是一个图层。

图层的划分可以提高绘制的效率，因为浏览器可以只重新绘制发生变化的图层，而不是整个页面。

（2）合成的性能优化

合成阶段的性能优化主要依赖于图层的合理划分。如果图层划分不合理，可能会导致过多的图层绘制，影响性能。因此，需要合理使用 CSS 属性（如 will-change、transform 等）来优化图层的划分。

关键点：

合成阶段的性能优化主要依赖于图层的合理划分。
合成阶段不会阻塞主线程，因此不会导致页面卡顿。

九、浏览器渲染的优化策略

了解浏览器的渲染过程后，我们可以采取以下策略来优化页面的渲染性能：

（1）优化资源加载

减少 HTTP 请求：合并 CSS 和 JavaScript 文件，减少图片数量。
使用缓存：为静态资源设置合理的缓存策略，减少重复加载。
优化图片加载：使用懒加载技术，延迟加载非关键图片。

（2）优化 CSS 和 JavaScript

减少 CSS 的复杂性：避免使用过多的嵌套和选择器。
异步加载 JavaScript ：使用 async 和 defer 属性，避免阻塞 HTML 解析。
减少 DOM 操作：尽量减少对 DOM 的频繁操作，避免触发过多的布局和绘制。

（3）合理使用图层

合理划分图层 ：使用 CSS 属性（如 will-change、transform 等）优化图层的划分。
减少图层数量：避免过多的图层划分，减少合成阶段的性能开销。

（4）监控性能

使用开发者工具：通过浏览器的开发者工具（如 Chrome DevTools）监控页面的渲染性能。
分析性能瓶颈：通过性能分析工具（如 Lighthouse）分析页面的性能瓶颈，针对性地优化。

十、总结

浏览器的渲染过程是一个复杂而精细的流程，涉及多个阶段和机制。从网络请求到页面渲染完成，每个阶段都可能影响页面的性能和用户体验。通过深入了解浏览器的渲染过程，我们可以采取有效的优化策略，提高页面的加载速度和渲染效率。

在实际开发中，开发者需要综合考虑资源加载、CSS 和 JavaScript 的优化、图层的合理划分以及性能监控等多个方面，才能构建出高效、流畅的 Web 应用。希望本文能够帮助你更好地理解浏览器的渲染过程，并在实际开发中应用这些知识。