用contain: layout paint可有效收窄局部重绘范围，因二者协同阻断布局影响链与绘制扩散链，但需容器尺寸稳定、子元素不越界且浏览器支持。
直接用 contain: layout paint 告诉浏览器：“这个容器内部自己负责布局和绘制，外部变化别牵连它，内部变化也别跑出去”——这是收窄局部重绘影响范围最有效、最常用的方式。
为什么 layout + paint 必须一起用
只设 contain: layout，子元素改颜色或透明度仍可能触发父级样式重算；只设 contain: paint，子元素尺寸一变（比如文字换行、图片加载），就可能撑开容器，导致外部布局重排。两者配合，才能真正切断“布局影响链”和“绘制扩散链”。
-
layout阻断子树对父级/兄弟节点位置与尺寸的干扰 -
paint强制内容裁剪，并让浏览器跳过不可见区域的绘制 - 缺一不可：真实组件中，单独启用任一值都达不到预期隔离效果
关键前提不能漏：尺寸要稳、内容别越界
Containment 不是魔法开关，它依赖浏览器对容器边界的可信判断。一旦条件不满足，Chrome 会静默降级（比如退化为仅 style paint），重绘范围立马扩大。
- 容器必须有明确宽高：推荐显式写
width和height，或用aspect-ratio+width: 100% - 避免
width: fit-content或min-height: max-content—— 这些会让尺寸依赖内容，破坏可预测性 - 子元素不能逃逸：
position: fixed默认参照视口，会突破容器边界；若必须用，需确保其包含块在容器内，或加contain: paint强制裁剪
JS 动态设置时的实操要点
不是加了 style 就立刻生效，时机和配套操作决定成败。
立即学习“前端免费学习笔记（深入）”；
- 插入大量子节点前先设
element.style.contain = 'layout paint'，避免插入过程触发父级重排 - 折叠面板收起后建议清空
contain（设为空字符串），否则contain: size可能锁死高度，阻碍收缩动画 - 监听
resize时，只对已知固定尺寸的区域（如顶部工具栏）补layout paint，动态宽度侧边栏不能加size - 验证是否生效别只看
getComputedStyle，打开 DevTools 的 Paint Flashing，观察重绘区域是否真的被框定在容器内
慎用 strict 和 size：强约束带来强风险
contain: strict 等价于 layout paint style size，隔离最强，但要求最严——稍有不慎反而拖慢性能。
-
size要求浏览器“绝对相信”容器尺寸永不变化，必须同步声明width和height（哪怕用 JS 读取当前值再写回） - 含
transform或will-change的动画组件，加strict可能强制创建额外合成层，增加内存与合成开销 - Flex/Grid 容器内的子项，
contain: layout无法切断轴向分配逻辑，此时加strict不仅无效，还可能引发意外交互
