浏览器渲染页面的过程是一个复杂而精细的系统工程,涉及多个步骤和模块的协同工作，从用户输入URL到页面完整呈现，浏览器需要经历解析资源、构建DOM树、构建CSSOM树、执行JavaScript、布局、绘制等多个阶段，整个过程可以大致分为以下几个关键步骤：
当用户在浏览器地址栏输入URL并按下回车键后,浏览器会开始处理请求，浏览器会先检查本地缓存中是否已存在该资源的缓存副本，如果存在且未过期，则直接使用缓存；否则，会向服务器发起HTTP请求获取资源，请求过程中，浏览器还会根据HTTP响应头中的Content-Type字段判断资源的类型，如HTML、CSS、JavaScript、图片等，并分别交给不同的处理模块。
浏览器开始解析HTML文档,构建DOM（Document Object Model）树，DOM树是HTML文档的内存表示结构，它将HTML文档解析为一个由节点和对象组成的树形结构，在解析过程中，浏览器会遵循HTML规范，将每个HTML元素（如<div>、<p>、<span>等）解析为对应的DOM节点，并按照文档的嵌套关系构建树状结构，如果HTML文档中引用了外部资源（如CSS文件、JavaScript文件、图片等），浏览器会异步发起请求获取这些资源，但不会阻塞HTML的解析过程，除非是同步加载的JavaScript脚本。
在构建DOM树的同时,浏览器还会解析CSS样式，构建CSSOM（CSS Object Model）树，CSSOM树是CSS样式规则的内存表示结构，它将CSS样式解析为一个由样式规则和属性组成的树状结构，浏览器会按照CSS的层叠规则和优先级，计算每个DOM节点的最终样式，需要注意的是，CSSOM树的构建是阻塞的，因为只有当CSSOM树构建完成后，浏览器才能知道每个节点的样式，从而进行下一步的布局计算，优化CSS加载性能（如使用内联关键CSS、减少不必要的CSS请求等）对页面渲染速度至关重要。
当DOM树和CSSOM树都构建完成后,浏览器会将两者合并成一个渲染树（Render Tree），渲染树只包含需要显示的DOM节点及其对应的样式信息，不包括不可见的节点（如<head>、<script>、<style>等）和display: none的节点，渲染树的构建过程是浏览器根据DOM树和CSSOM树，为每个可见节点计算其视觉属性（如位置、大小、颜色等），并按照文档顺序排列这些节点。
渲染树构建完成后,浏览器进入布局（Layout）阶段，也称为回流（Reflow），在布局阶段，浏览器会根据渲染树中每个节点的样式信息，计算其在页面中的确切位置和大小，这个过程从根节点开始，递归地计算每个节点的几何信息，包括位置（x、y坐标）、尺寸（宽、高）等，布局是一个计算密集型的过程，当页面中的元素位置、大小发生变化时（如窗口大小调整、元素内容变化、样式修改等），浏览器需要重新进行布局计算，这会影响页面的渲染性能。
布局完成后,浏览器进入绘制（Paint）阶段，也称为重绘（Repaint），在绘制阶段，浏览器会根据布局阶段计算出的几何信息，将渲染树中的每个节点绘制成屏幕上的像素，这个过程包括绘制文本、颜色、边框、背景、阴影等视觉效果，绘制完成后，浏览器会将这些像素组合成最终的图像，并显示在屏幕上，绘制也是一个相对耗时的过程，当元素的外观发生变化（如颜色、背景等）但布局未发生变化时，浏览器只需要重新绘制受影响的元素，而不需要重新布局。
除了上述主要步骤外,JavaScript的执行也会对页面渲染产生重要影响，在HTML解析过程中，如果遇到<script>标签，浏览器会暂停HTML的解析，先下载并执行JavaScript代码，这是因为JavaScript可能会修改DOM树或CSSOM树，从而影响后续的渲染过程，为了避免阻塞，现代浏览器通常采用异步加载（async和defer属性）的方式加载JavaScript脚本。async脚本会在下载完成后立即执行，可能会阻塞HTML解析；而defer脚本会在HTML解析完成后、DOMContentLoaded事件触发前执行，不会阻塞HTML解析。
现代浏览器还采用了分层合成（Layer Compositing）技术来优化渲染性能，浏览器会将页面中的元素分成不同的图层（如滚动图层、动画图层等），每个图层单独进行绘制和布局，最后通过合成器将多个图层合并成最终的图像，这种技术可以减少不必要的重绘和回流，提高页面的渲染效率，特别是在处理复杂动画和滚动效果时。
为了更清晰地展示浏览器渲染页面的主要步骤,可以参考以下表格：
| 阶段 | 描述 | 关键操作 |
|---|---|---|
| HTML解析 | 将HTML文档解析为DOM树 | 解析HTML标签，构建DOM节点，处理外部资源请求 |
| CSS解析 | 将CSS样式解析为CSSOM树 | 解析CSS规则，计算样式优先级，构建CSSOM树 |
| 构建渲染树 | 将DOM树和CSSOM树合并为渲染树 | 筛选可见节点，计算最终样式信息 |
| 布局（回流） | 根据渲染树计算每个节点的位置和大小 | 计算几何信息，处理布局变化 |
| 绘制（重绘） | 将渲染树中的节点绘制成屏幕像素 | 绘制文本、颜色、边框等视觉效果 |
| 合成 | 将多个图层合并为最终图像 | 分层处理，优化渲染性能 |
| JavaScript执行 | 执行JavaScript代码，可能修改DOM或CSSOM | 处理事件、动态修改页面内容 |
在实际开发中,为了优化页面渲染性能，可以采取以下措施：减少DOM操作、使用事件委托、避免不必要的重绘和回流、优化CSS和JavaScript的加载方式、使用CSS硬件加速（如transform和opacity属性）等，这些措施可以有效减少浏览器渲染页面的时间，提升用户体验。
相关问答FAQs：
-
问：为什么CSS加载会阻塞HTML解析？
答：CSS加载会阻塞HTML解析是因为浏览器需要构建CSSOM树来计算每个DOM节点的最终样式，如果CSSOM树未构建完成，浏览器无法确定节点的样式信息，从而无法进行布局和绘制，浏览器会暂停HTML解析，直到CSSOM树构建完成，为了避免阻塞，可以将关键CSS内联到HTML中，并使用preload或async属性优化CSS加载。 -
问：如何减少页面重绘和回流？
答：减少重绘和回流的方法包括：批量修改DOM（如使用DocumentFragment）、避免频繁读取布局属性（如offsetWidth、offsetHeight）、使用will-change或transform属性创建独立的图层、避免使用复杂的CSS选择器、合理使用visibility代替display: none等，可以使用requestAnimationFrame来优化动画性能，确保在浏览器的重绘周期内执行样式修改。
