浏览器渲染HTML页面分为五步：一、构建DOM树，解析HTML生成节点树；二、构建CSSOM树，解析CSS并完成层叠计算；三、合并生成仅含可见元素的渲染树；四、布局计算各节点几何信息；五、绘制生成像素并合成显示。
当浏览器接收到HTML文档后，会启动一系列内部处理流程以将代码转化为用户可见的页面。以下是浏览器渲染HTML页面的具体过程：
一、构建DOM树
浏览器解析HTML文本，逐字节读取并识别标签、属性与内容，依据HTML规范生成节点对象，最终组织成一棵具有父子兄弟关系的文档对象模型（DOM）树。该树是后续所有渲染操作的基础结构。
1、浏览器从HTTP响应体中获取HTML字节流。
2、进行编码检测，若未声明charset，则按默认编码（如UTF-8）解码为Unicode字符。
立即学习“前端免费学习笔记（深入）”；
3、词法分析器将字符流拆分为标记（token），包括开始标签、结束标签、文本、注释等。
4、语法分析器根据HTML5规范对token序列进行解析，修正错误（如自动闭合缺失标签），生成对应节点。
5、节点按嵌套关系挂载，形成根节点为<html>的树状结构。
二、构建CSSOM树
浏览器同时或随后解析页面中所有CSS资源（内联style、style标签、link引入的外部CSS），将其转换为层叠样式表对象模型（CSSOM）树。该树描述了每个选择器及其对应的样式声明，并已按优先级完成层叠计算。
1、对每个CSS资源发起请求（若尚未加载），等待下载完成。
2、将CSS文本按字节流解码为Unicode字符，再分割为CSS token（如选择器、花括号、属性名、值等）。
3、解析token生成CSS规则对象，忽略无法识别的声明或语法错误的规则。
4、对所有规则执行层叠（cascade）、继承（inheritance）和值计算（value computation），确定每个可匹配元素的最终样式。
5、构建CSSOM树，其节点不对应HTML元素，而是表示样式规则的作用范围与属性集合。
三、生成渲染树（Render Tree）
渲染树是DOM树与CSSOM树的结合产物，仅包含需要在屏幕上绘制的节点。它剔除了head、display: none元素及不可见的伪元素，但保留了参与布局的visibility: hidden节点。
1、从DOM树根节点开始深度优先遍历每个元素。
2、对每个元素查找CSSOM中匹配的选择器规则，获取计算后的样式信息。
3、若元素无display样式或display值为none，则跳过该节点及其子树。
4、若元素为非渲染元素（如meta、script、link），则跳过。
5、为每个需渲染的元素创建对应的渲染对象（RenderObject），构成渲染树节点。
四、布局（Layout / Reflow）
布局阶段计算渲染树中每个节点在视口内的确切几何位置与尺寸，即确定x、y坐标、宽度、高度等。该过程自上而下进行，父节点先获得尺寸，再约束子节点的可用空间。
1、从根渲染对象（对应<html>）开始，设置其宽度为视口宽度，高度待定。
2、依次调用每个节点的layout方法，根据CSS盒模型、浮动、定位、Flex/Grid容器规则计算宽高与偏移。
3、处理相对定位、绝对定位、固定定位元素，将其从正常流中移出并单独定位。
4、对行内元素进行行盒（line box）划分，确定文字换行与基线对齐方式。
5、最终每个渲染对象都拥有确定的clientRect（边界矩形）。
五、绘制（Paint / Render）
绘制阶段将渲染树节点转换为屏幕上的像素，由多个绘制阶段组成：先生成图层（Layer），再为每层生成绘制列表（Display List），最后光栅化为位图。此过程通常在合成器线程中异步执行。
1、浏览器判断是否需要为某些节点创建独立图层（如video、canvas、opacity < 1、transform非none、will-change声明等）。
2、对每个图层生成绘制指令列表，包含绘制顺序、路径、颜色、字体、阴影等参数。
3、光栅化线程将绘制指令转为实际像素，可能分块（tile）并行处理。
4、将各图层位图提交至合成器线程，按z-index、透明度、变换矩阵进行合成。
5、合成后的帧被发送至GPU，最终输出到显示器。
