组件尺寸在运行时变化时，怎样保证页面稳定并控制渲染成本？

# 核心结论

组件尺寸在运行时变化时，页面稳定性与渲染成本应从三个方向治理：提前为可预测内容保留空间，减少会扩大布局影响范围的修改，并把必须发生的几何读取与样式写入进行批处理。图片、广告、异步组件和字体替换应在内容到达前提供稳定占位；动画优先使用通常不触发布局的 transform 和 opacity；代码应先批量读取尺寸，再批量写入样式，避免读写交错导致强制同步布局。组件确实需要响应容器尺寸时，可使用 ResizeObserver，但必须合并通知、防止自激循环，并在卸载时取消观察。

# 底层机制

浏览器渲染通常包括样式计算、布局、绘制和合成。修改宽高、边距、位置或文档流内容后，已有布局信息可能失效。如果代码随