[6-1] DOM/BOM 与宿主环境机制 · DOM 树与渲染机制 (DOM & Rendering)

所属板块：6. DOM/BOM 与宿主环境机制

记录日期：2026-03-xx
更新：遇到页面性能或重排重绘相关题时补充

1. 浏览器渲染流水线（关键渲染路径 CRP）

浏览器把 HTML 代码变成屏幕上像素的完整过程叫关键渲染路径（Critical Rendering Path）。
整个流程分为五步：

1. 解析 HTML → 构建 DOM 树
2. 解析 CSS → 构建 CSSOM 树
3. 合并 DOM + CSSOM → 生成渲染树（Render Tree）
   （注意：display: none 的节点不会进入渲染树，但 visibility: hidden 会）
4. 布局（Layout / Reflow） → 计算每个节点的位置和大小
5. 绘制（Paint / Repaint） → 把像素画到屏幕上

记住：CRP 是性能优化的起点，任何一步卡住都会导致页面卡顿。

2. 重排（Reflow / 回流） vs 重绘（Repaint）

维度	重排 (Reflow)	重绘 (Repaint)	代价对比
触发条件	几何属性变化（宽高、margin、位置、添加/删除节点等）	外观属性变化（color、background、visibility 等）	重排 >> 重绘
是否影响布局	是	否	重排更昂贵
必然结果	必定引发重绘	不一定引发重排	-

核心定律：一次重排必定引发一次重绘，但一次重绘不一定引发重排。

3. 强制同步布局（Forced Synchronous Layout）——隐形杀手

当 JS 代码读取某些几何属性时，浏览器会立即强制执行重排以返回最新值：

// 以下操作都会触发强制同步布局
element.offsetHeight
element.getBoundingClientRect()
getComputedStyle(element).width
element.scrollTop

经典性能陷阱：

for (let i = 0; i < 10000; i++) {
  console.log(box.offsetHeight);   // 每次循环都强制重排 → 灾难
}

4. 常见性能优化策略

1. 批量操作 DOM
   使用 DocumentFragment：

   const fragment = document.createDocumentFragment();
   for (...) {
     fragment.appendChild(item);
   }
   container.appendChild(fragment);
   

2. 脱离文档流后再操作

   • display: none → 操作 → display: block
   • 或使用 absolute / fixed 定位

3. CSS3 硬件加速
   使用 transform、opacity、will-change 等属性，让操作在合成器线程完成，避开主线程重排重绘。

5. 小结 & 复习时的“渲染视角”

• 理解 CRP + 重排/重绘是优化页面卡顿的根本
• 读写分离、批量操作、硬件加速是三大实战技巧
• [6-1] 的渲染机制 + 接下来的 [6-2] 事件模型，共同构成了浏览器与 JS 交互的核心底层

下一篇文章会进入 [6-2]：事件模型与交互机制（事件流三阶段、事件委托、阻止默认行为等）。

返回总目录：戳这里