为什么修改元素样式后getBoundingClientRect返回旧值？

浏览器渲染是分阶段的，样式修改不会立即触发重排。你遇到的情况是典型的布局抖动（Layout Thrashing）问题。浏览器为了优化性能会把多次样式修改合并处理，所以getBoundingClientRect在同一个tick里拿不到最新布局。

用requestAnimationFrame比setTimeout靠谱，它专门设计用来同步视觉变化。代码可以改成这样：

function resizeBox() {

  const box = document.getElementById('dynamic-box');

  box.style.width = '300px'; // 修改宽度

  

  requestAnimationFrame(() => {

    console.log(box.getBoundingClientRect().width); // 这时候拿就准了

  });

}

要是 WP 里面折腾动态布局，建议封装个工具函数专门处理这类测量操作。遇到复杂场景还可以考虑 ResizeObserver，监听元素尺寸变化更优雅。

这个问题其实挺常见的，尤其是在涉及到 DOM 布局和渲染的场景下。下面我来详细给你分析一下原因，并提供几种解决方案。

### 问题的原因
getBoundingClientRect 返回的是当前元素在布局阶段的尺寸和位置信息。但需要注意的是，浏览器的渲染流程是异步的，分为以下几个步骤：
1. **样式计算**：应用 CSS 样式。
2. **布局**：计算每个元素的位置和尺寸（重排）。
3. **绘制**：将元素渲染到屏幕上。
4. **合成**：将多个图层合并成最终的画面。

当你直接修改 style.width 时，浏览器只是标记了这个元素需要重新布局，但实际的布局更新并不会立即发生。如果你紧接着调用 getBoundingClientRect，此时布局还没有完成，所以获取到的还是旧值。

这就是为什么你发现把 console.log 放进 setTimeout 后会正常的原因——setTimeout 强制让代码在下一帧执行，这时候布局已经完成了。

---

### 解决方案

#### 方法一：使用 requestAnimationFrame
这是最优雅的方式之一。requestAnimationFrame 会在下一个重绘之前调用你的回调函数，确保布局已经更新完毕。

function resizeBox() {

  const box = document.getElementById('dynamic-box');

  box.style.width = '300px'; // 修改宽度



  // 等待布局更新完成后获取尺寸

  requestAnimationFrame(() => {

    console.log(box.getBoundingClientRect().width); // 正确返回 300

  });

}

**原理**：requestAnimationFrame 是专门为动画设计的 API，它会在浏览器准备绘制下一帧之前触发回调。这意味着所有与布局相关的操作都已经完成。

---

#### 方法二：强制触发一次布局
你可以通过读取某些属性来强制触发布局更新。比如读取 offsetWidth 或 clientWidth 等属性，这会让浏览器提前完成布局计算。

function resizeBox() {

  const box = document.getElementById('dynamic-box');

  box.style.width = '300px'; // 修改宽度



  // 强制触发一次布局

  void box.offsetWidth; // 这里会触发浏览器的布局更新



  console.log(box.getBoundingClientRect().width); // 正确返回 300

}

**原理**：当你读取像 offsetWidth 这样的属性时，浏览器会被迫去计算布局状态，从而确保后续的 getBoundingClientRect 获取到正确的值。

> 小贴士：void 是一个 JavaScript 操作符，这里只是为了避免变量未使用警告。实际上 box.offsetWidth 自己也能触发布局更新。

---

#### 方法三：使用 MutationObserver 监听样式变化
如果你希望更通用一点的监听方式，可以使用 MutationObserver 来监听 DOM 样式的修改。不过这种方式稍微复杂一些，适合需要动态响应多次样式变更的场景。

function resizeBox() {

  const box = document.getElementById('dynamic-box');



  // 创建观察器

  const observer = new MutationObserver(() => {

    // 当样式变化后，等布局完成再获取尺寸

    requestAnimationFrame(() => {

      console.log(box.getBoundingClientRect().width); // 正确返回 300

    });



    // 停止观察

    observer.disconnect();

  });



  // 开始观察 style 属性的变化

  observer.observe(box, { attributes: true, attributeFilter: ['style'] });



  // 修改宽度

  box.style.width = '300px';

}

**原理**：MutationObserver 能够监听 DOM 的属性变化（包括样式修改），当检测到变化后，你可以结合 requestAnimationFrame 确保布局已经更新完毕。

---

### 总结
- 如果只是简单的同步操作，推荐使用方法一（requestAnimationFrame）或者方法二（强制触发布局）。
- 如果需要处理复杂的动态场景，可以考虑方法三（MutationObserver）。
- 至于你提到的“是不是浏览器把样式修改缓存了”，其实并不是缓存的问题，而是浏览器为了性能优化，将样式计算和布局更新分成了不同的阶段。

希望这些解释能帮到你！如果有其他疑问随时问，开发路上我们都是一步步踩坑长大的 😄