浏览器加载网页时，先解析HTML构建DOM树，再解析CSS生成CSSOM树；两者结合形成渲染树，随后计算布局（重排）并绘制（重绘）各元素为像素，最后通过合成图层利用GPU提升性能，完成页面显示。
当您在浏览器中加载一个网页时，浏览器需要将HTML、CSS和JavaScript等资源转换为用户可见的页面内容。这一过程涉及多个阶段的解析与处理，以确保页面正确显示。
本文运行环境：MacBook Pro，macOS Sonoma
一、构建DOM树
浏览器接收到HTML文档后，会逐行解析其中的标签，并将其转化为节点对象，最终形成一个树状结构，称为文档对象模型（DOM）。这个结构反映了页面元素的层级关系。
1、浏览器开始读取HTML字节流并进行字节解码。
立即学习“前端免费学习笔记（深入）”；
2、将解码后的字符按照HTML规范进行分词，生成标记（tokens）。
3、根据标记创建对应的节点，并建立父子兄弟关系，逐步构建完整的DOM树。
二、构建CSSOM树
CSS资源会被独立解析，因为样式规则会影响页面布局与外观。浏览器需要将CSS规则也转化为可操作的对象模型，即CSS对象模型（CSSOM），它同样是一个树形结构。
1、下载页面引用的所有CSS文件，包括内联样式和外部链接。
2、对CSS文本进行词法分析和语法分析，识别选择器、属性和值。
3、构造包含所有样式规则的CSSOM树，该树具有层级性和继承性。
注意：CSSOM的构建是阻塞渲染的，未完成前不会进行布局计算。
三、生成渲染树
渲染树是DOM和CSSOM结合的结果，仅包含需要显示的节点及其计算后的样式信息。隐藏元素如display: none的节点不会被加入此树。
1、遍历DOM树中的每个可见节点。
2、查找对应节点在CSSOM中的匹配规则，并应用最终的计算样式。
3、将带有样式的可见节点组合成一个新的树结构——渲染树。
四、布局计算（重排）
在渲染树构建完成后，浏览器需要确定每个元素在视口内的确切位置和尺寸，这个过程被称为布局或重排。
1、从根元素开始，递归遍历渲染树中的每个节点。
2、根据盒模型计算每个元素的几何信息，包括宽度、高度、偏移量等。
3、输出一个包含所有元素位置和大小的布局树。
重要提示：任何改变元素几何属性的操作都会触发重新布局。
五、绘制（重绘）
布局完成后，浏览器进入绘制阶段，将各个元素的视觉部分转换为屏幕上的像素，这一步也叫重绘。
1、将渲染树中的每个元素拆分为多个图层。
2、对每个图层进行绘图指令的生成，如绘制文本、边框、背景色等。
3、调用图形库将这些指令转化为实际的像素点，填充到屏幕上。
六、合成图层
为了提高性能，现代浏览器会将某些元素提升为独立图层，最后由合成器合并所有图层，生成最终画面。
1、识别可以独立合成的元素，例如设置了transform或opacity的元素。
2、将这些元素分配到不同的合成图层中。
3、使用GPU加速机制并行处理各图层的渲染与动画效果。
优化建议：合理使用will-change或transform可减少重排重绘开销。
