浏览器渲染是一个复杂的过程，它将 HTML、CSS 和 JavaScript 代码转换为用户在屏幕上看到的网页。以下是浏览器渲染的详细步骤：
1. 解析 HTML 构建 DOM 树
- 字节流转换为字符流：当浏览器接收到 HTML 文档时，首先将其从字节流（网络传输的格式）转换为字符流，这一步是为后续的解析做准备。
- 词法分析：将字符流按照 HTML 的语法规则进行词法分析，把字符流分解成一个个的标记（tokens），例如标签名、属性名、属性值、文本内容等。例如，对于
<html><body><h1>Hello World</h1></body></html>这段 HTML，会被分解为<html>、<body>、<h1>、Hello World、</h1>、</body>、</html>等标记。 - 语法分析与 DOM 树构建：在词法分析的基础上，浏览器通过语法分析器将这些标记构建成一个树形结构，即文档对象模型（DOM - Document Object Model）树。在 DOM 树中，每个节点代表一个 HTML 元素或文本内容。比如，
<html>标签是根节点，<body>是<html>的子节点，<h1>又是<body>的子节点，文本Hello World是<h1>的子节点。
2. 解析 CSS 构建 CSSOM 树
- 样式表获取：浏览器会从多个来源获取样式信息，包括 HTML 文件中的内联样式、
<link>标签引入的外部样式表文件以及<style>标签中的内部样式表。 - CSS 解析：和 HTML 解析类似，CSS 也会进行词法分析和语法分析。CSS 解析器会把 CSS 规则分解为一个个的声明块（declaration blocks），每个声明块包含了选择器和相应的样式属性及值。例如，对于
body { color: red; background - color: blue; }这条 CSS 规则，body是选择器，color: red和background - color: blue是样式声明。 - CSSOM 树构建：根据 CSS 解析的结果，浏览器构建 CSS 样式对象模型（CSSOM - CSS Object Model）树。CSSOM 树的节点代表了样式规则，它与 DOM 树相对应，用于确定每个 DOM 元素的样式。
3. 合并 DOM 树和 CSSOM 树生成渲染树
- 排除不可见元素：在合并过程中，并非所有的 DOM 元素都会进入渲染树。例如，那些设置了
display: none的元素不会被包含在渲染树中，因为它们在页面上是不可见的。 - 计算样式：对于每个在渲染树中的元素，浏览器需要根据 CSSOM 树来计算其样式。这个过程可能涉及到样式的继承、层叠等规则。例如，如果一个元素没有设置
font - size，但它的父元素设置了，那么该元素会继承父元素的font - size值。 - 生成渲染树：经过上述步骤，最终生成渲染树。渲染树中的每个节点都包含了对应的 DOM 元素信息和计算后的样式信息，它是浏览器进行页面布局和绘制的基础。
4. 布局（Layout）
- 确定元素位置和尺寸：根据渲染树，浏览器开始进行布局操作。布局过程会确定每个元素在页面中的位置和尺寸，这个过程需要考虑多种因素，如元素的类型（块级元素、行内元素等）、盒模型（内容、边框、内边距、外边距）、浮动和定位规则等。例如，对于一个块级元素，它会占据一行的宽度，并且如果设置了
width和height属性，会按照这些属性值确定其尺寸；如果没有设置，会根据父元素的尺寸和自身的内容来确定尺寸。 - 处理复杂布局情况：在处理复杂布局时，浏览器还需要考虑诸如多列布局、弹性布局（
flexbox）和网格布局（grid）等布局模式。这些布局模式都有各自的规则和计算方式。比如在弹性布局中，浏览器需要根据flex属性来分配容器中各元素的空间。
5. 绘制（Paint）
- 分层策略：为了提高绘制效率，浏览器通常会采用分层策略。对于页面中的一些元素，如具有动画效果、3D 变换或透明度变化的元素，会被分离到单独的层中。这样在进行绘制和更新时，可以只对受影响的层进行操作，而不必重新绘制整个页面。
- 绘制过程：在绘制阶段，浏览器会根据渲染树和布局结果，将每个元素的内容绘制到屏幕上。绘制过程从根节点开始，按照渲染树的层次顺序依次对每个节点进行绘制。对于文本元素，会使用系统的字体渲染库将文本绘制出来；对于图像元素，会从缓存或网络中获取图像资源并绘制到相应位置。
6. 合成（Composite）
- 图层合并：在绘制完成后，对于分层绘制的元素，浏览器需要将各个图层合并成一个最终的图像。这个过程称为合成。合成过程中，浏览器会根据元素的层级关系和透明度等属性，将各个图层的图像叠加在一起，形成完整的页面图像。
- 优化与更新：合成操作也会进行优化，例如对于没有发生变化的图层，在后续的页面更新中可以直接使用，不必重新绘制和合成。同时，当页面中的元素发生变化（如动画效果、用户交互导致的元素位置或状态改变）时，浏览器会重新进行渲染相关的步骤，但会尽量减少不必要的操作，只对受影响的部分进行重新布局、绘制和合成。
浏览器渲染是一个持续优化的过程，不同的浏览器在实现细节和优化策略上可能会有所不同，但基本原理和步骤是相似的。
