《浏览器渲染流程》你说我要背这个东西吗？

1. HTML解析 (DOM构建)

• 浏览器从网络获取到 HTML 文件后，会从上到下进行解析。

• 解析过程中会把标签转换成 DOM 节点，最终形成 DOM 树 (Document Object Model)。

  • 例子：<div><p>Hello</p></div> → DOM树里就有一个 div 节点，里面嵌套一个 p 节点。

2. CSS解析 (CSSOM构建)

• 浏览器同时会解析 CSS 文件、<style> 标签、行内样式等。

• 解析结果是 CSSOM (CSS Object Model)，它描述了所有元素的样式规则。

  • 例如：p { color: red } 这条规则会进入 CSSOM。

3. 渲染树构建 (Render Tree)

• 浏览器会把 DOM 和 CSSOM 结合起来，生成一棵 渲染树。
• 渲染树只包含 可见元素（比如 display: none 的不会进入渲染树）。
• 每个渲染树节点都包含它的 内容和计算后的样式。

4. 布局 (Layout / Reflow / 重排)

• 有了渲染树，还需要知道元素的 几何信息：位置、大小、相对关系。
• 布局过程就是计算出每个节点在屏幕上应该出现的位置。
• 当页面结构或大小改变时（比如调整窗口大小、修改元素宽高），会触发 重排 (Reflow)。

5. 绘制 (Painting / 重绘)

• 最后一步是 把元素绘制到屏幕上。
• 包括颜色填充、文字绘制、图片渲染、阴影效果等。
• 如果只是颜色改变（没影响布局），会触发 重绘 (Repaint)，比重排代价小。

👉 整个过程是：

HTML → DOM → CSS → CSSOM → Render Tree → Layout → Paint → 显示到屏幕