如何避免获取元素尺寸时等待recalculate style阻塞动画

所有同步读取DOM布局属性（offsetTop/offsetHeight/getBoundingClientRect等）的操作，都会强制浏览器清空当前待执行的样式变更队列，完成全量样式重计算、布局计算后才会返回值，这就是你遇到百毫秒级阻塞的核心原因——动画帧同步绘制流程中读取布局的时机，刚好撞上了前面积压的未落地样式变更，渲染线程会被完全挂起直到重算完成。

以下方案按改造成本从低到高排序，全部满足「允许尺寸数据延迟更新、不阻塞高频动画」的需求：

方案1：布局读写与渲染循环完全解耦（优先推荐，零侵入改造成本低） #

核心逻辑是永远不在PIXI动画渲染循环里直接读取DOM布局属性，维护一份独立的尺寸缓存供渲染使用，DOM读取逻辑全部放到不阻塞动画的时机执行：

• 给所有和canvas行对应的HTML行元素绑定ResizeObserver与IntersectionObserver，仅当监听到元素尺寸、位置发生实际变更时才更新缓存值。两个API均为异步触发，回调执行时机在浏览器完成布局计算后的空闲阶段，不会阻塞动画帧执行。
• 增加兜底轮询逻辑，把主动读取DOM尺寸的操作全部放到requestIdleCallback中执行，设置12ms的超时阈值，仅在浏览器每帧处理完动画、用户交互等高优任务后，才悄悄更新尺寸缓存。就算读取操作触发了样式重算，也是在空闲时间完成，完全不会卡正在运行的动画。
• 强制约束：PIXI的requestAnimationFrame渲染循环中，只能读取缓存中的尺寸值做位置、高度计算，绝对不能直接调用任何DOM布局读取API。缓存值比真实DOM值延迟几十到上百毫秒更新完全符合你的业务容忍度，高频动画不会再被重算阻塞。
• 附加优化：给所有HTML行元素添加CSS属性contain: layout size;，让浏览器把这些元素的布局计算从全文档树中剥离，单独做局部重算，就算偶发触发重算，耗时也会从百毫秒级降到1ms以内，不会产生可感知的卡顿。

方案2：预读脏值Hack（适配极端场景，改造成本极低） #

如果不想引入观察者逻辑，可以利用浏览器布局队列的特性绕开强制重算：

• 在页面初始化阶段、以及每帧所有DOM样式写操作执行之前，提前把所有需要用到的DOM行位置、高度值全部读一遍存入缓存。这个时机浏览器没有积压的待处理样式变更，读取操作不会触发任何重算，单帧读取耗时通常<1ms。
• 把所有修改DOM样式、结构的写操作，统一收拢到requestAnimationFrame回调的最开头执行，绝对不要在写操作之后、同一帧内执行DOM布局读操作，从根源上避免触发强制同步布局。
• 动画渲染循环全程使用预读的缓存值，等下一帧写操作开始前再同步更新缓存即可，尺寸更新的延迟最多只有一帧（16ms左右），完全感知不到。

方案3：彻底剥离DOM布局依赖（根治方案，适配极高性能要求场景） #

如果以上方案仍存在偶发卡顿，可以直接绕开浏览器的布局计算逻辑：

• 把HTML行的布局规则（字体、字号、行高、内边距、边框、文本内容）同步维护一份配置，在PIXI渲染层用Canvas文本测量API（measureText）自行计算每一行的高度、位置，完全不读取真实DOM的布局属性，从根源上杜绝和浏览器样式重计算流程产生交集。
• 若需要兼容复杂HTML内容的行高计算，可以把所有行的DOM节点放到一个离屏隔离容器中，容器设置contain: strict; position: absolute; top: -10000px; visibility: hidden; pointer-events: none;，所有尺寸读取操作都在离屏容器的副本节点上执行，离屏容器的重算不会和主页面的渲染流程抢主线程时间。

注意：getComputedStyle读取布局相关属性时同样会触发强制同步重算，不存在所谓的异步读接口可以绕开这个逻辑，不要在动画帧里调用。
常见会触发重排的属性包括但不限于：offsetWidth/offsetHeight/offsetTop/offsetLeft/clientWidth/clientHeight/getBoundingClientRect()/scrollTop/scrollHeight，以及getComputedStyle返回的width/height/margin/padding/top/left等布局类属性。

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