为什么页面会出现强制同步布局和布局抖动，工程上应如何治理？

# 核心结论

强制同步布局通常源于代码在同一个主线程任务中先修改可能影响几何关系的样式或节点，再立即读取必须基于最新布局才能返回的几何信息。浏览器为了给出准确结果，只能提前完成原本可以延迟并合并的样式计算和布局。若循环中反复交替写入与读取，就会把一次布局放大成多次布局，形成布局抖动。工程治理的核心是先集中读取、完成计算，再批量写入；同时减少布局影响范围、为异步内容预留空间，并优先使用不改变文档几何关系的动画属性。

# 底层机制

浏览器的一帧可能包含脚本执行、样式计算、布局、绘制与合成，但会根据实际变更跳过不必要的阶段。修改宽高、边距、字体、内容或文档流位置，可能使祖先、后代及相邻节点的几何信息失效；修改颜色通常主要触发绘制