JS/JQuery动态修改元素CSS后，如何等待样式更新再获取元素尺寸

这个问题的核心原因是浏览器的渲染线程与JS执行线程的互斥运行规则：

• JS执行栈跑完所有同步代码前，浏览器不会启动新的重排、重绘流程
• 同一段同步代码内，刚把元素的display设为block就读取outerHeight时，浏览器还没根据新样式更新布局信息，返回的仍是上一版布局的旧值（即元素隐藏状态下的0高度）
• 1ms的setTimeout能拿到正确值，是因为setTimeout回调属于下一个宏任务，等当前同步JS执行完毕后，浏览器会按渲染优先级走完布局、绘制流程，再执行setTimeout里的代码，这时候读到的就是最新的布局值。但这种靠固定延迟的方式可靠性很低，遇到系统性能波动时很容易失效。

• 实际项目里最常用的跨浏览器稳定方案：requestAnimationFrame（rAF）
  这个API的回调触发时机固定为浏览器准备进入下一次重绘的节点，时机比setTimeout精准，不会受宏任务排队干扰。遇到复杂嵌套布局时，嵌套两层rAF就能确保浏览器走完完整的「样式计算→布局计算」流程，示例代码：

  $element.css({ display: "block" });
  requestAnimationFrame(() => {
      requestAnimationFrame(() => {
          console.log($element.outerHeight()); // 稳定获取到元素真实高度
      })
  });
  

• 无需异步等待的同步获取方案：触发强制同步重排
  如果业务上必须在设置样式后立刻拿到准确高度，不需要等下一帧渲染，可以主动触发浏览器的同步重排流程——设置完新样式后，读取一次元素的几何属性（比如offsetHeight、clientWidth这类会强制触发重排的属性），浏览器会立刻同步完成新样式的布局计算，示例代码：

  $element.css({ display: "block" });
  // 读取offsetHeight会强制浏览器立即完成重排，同步生成最新布局值
  const realHeight = $element[0].offsetHeight;
  console.log(realHeight); // 无需延迟即可拿到准确高度
  

  注意：这种强制重排的方式如果在循环中频繁调用，会造成不必要的性能损耗，仅适合单次读取的场景，不要滥用
• jQuery 0时长动画方案失效的原因
  之前尝试的duration:0的jQuery动画，本质上是基于JS定时器实现的异步队列，即使设置为0时长，依然是把任务排到了定时器队列中等待执行，并没有对接浏览器原生的重绘完成回调，和直接写setTimeout没有本质区别，自然没法稳定拿到正确的布局值。

内容的提问来源于stack exchange，提问作者Darkbound