ONE实验室1. 问题现象与背景分析
上周排查一个线上性能问题时，遇到了一个令人费解的现象：某个包含约2000个DOM节点的页面，在打开弹框时出现了严重的卡顿，帧率直接掉到个位数，操作体验如同PPT放映。经过层层排查，最终发现问题竟出在一行简单的CSS代码上：
css复制body.dialog-open { overflow: hidden; }
这行看似无害的样式，为何会导致如此严重的性能问题？我们需要从浏览器渲染原理和CSS属性特性说起。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 浏览器渲染流程与重排重绘
2.1 关键渲染路径解析
当浏览器渲染页面时，会经历以下关键步骤：
- DOM树构建：解析HTML生成DOM树
- CSSOM构建：解析CSS生成CSSOM树
- 渲染树构建：合并DOM和CSSOM生成渲染树
- 布局计算（Layout/Reflow）：计算每个节点的几何信息
- 绘制（Paint）：将布局信息转换为屏幕像素
- 合成（Composite）：将各层合并显示
其中，overflow: hidden这个属性会触发哪些阶段呢？我们需要了解CSS属性对渲染流程的影响层级。
2.2 CSS属性与渲染层级
不同CSS属性触发的渲染阶段：
| 属性类型 | 触发阶段 | 性能开销 |
|---|---|---|
| 几何属性（width/height等） | 布局 → 绘制 → 合成 | 高 |
| 外观属性（color/background等） | 绘制 → 合成 | 中 |
| 合成属性（transform/opacity） | 合成 | 低 |
overflow |
布局 | 高 |
关键点在于：overflow: hidden会强制浏览器重新计算布局，因为它改变了元素的包含块特性。
3. 问题根因深度剖析
3.1 滚动锁定机制的实现
弹框出现时常见的滚动锁定方案：
- 方案A：给body添加
overflow: hidden