强制浏览器 reflow（重排）

访问某些布局相关属性（offsetLeft / offsetTop / offsetWidth / clientWidth / getComputedStyle 等）会让浏览器 强制刷新布局，以便获得一个最新、真实的数值。

浏览器为何会“强制重排”

浏览器为了性能会进行 layout（重排） 和 paint（重绘） 的优化：

• 不会每次 DOM 改变就立即计算布局
• 会等待、合并多个 DOM 改动
• 等到下一帧（约 16ms），统一执行布局计算

但是！当 JS 访问某些属性时，浏览器 必须 给出确切数值！
例如：

indicator.offsetLeft

offsetLeft 是个 布局属性（layout property）
浏览器如果要返回正确的值，就必须确保布局是最新的。

因此浏览器会：

1. 立即执行 layout（重排）
2. 更新所有 layout 相关计算
3. 返回最新的 offsetLeft 值

这称为：
Forced Synchronous Layout（强制同步布局，也叫强制 reflow）

会触发强制 reflow的属性

属性	会强制 Reflow
offsetLeft / offsetTop	✔
offsetWidth / offsetHeight	✔
scrollWidth / scrollHeight	✔
clientWidth / clientHeight	✔
getBoundingClientRect()	✔
getComputedStyle()	✔

真实使用场景：CSS 动画重触发

最典型的代码：

element.classList.remove("animate");
void element.offsetWidth; // 强制 reflow
element.classList.add("animate");

这能让 CSS 动画从头开始执行。

为什么？

• 移除类 → 动画属性被移除，但浏览器还没计算布局
• 强制 reflow → 浏览器计算新的布局
• 再添加类 → 动画重新触发

如果没有 reflow，浏览器可能把两次操作合并，导致动画 不重新触发。