contain: layout paint 是列表更新时唯一有效的组合，单用任一属性均无法同时阻止布局传播和绘制扩散，必须绑定使用并配合显式高度控制才能生效。
contain: layout paint 是列表更新时唯一有效的组合
单用 contain: layout 无法阻止高亮、颜色等视觉变化触发的整页重绘；单用 contain: paint 又拦不住新增/删除项导致的父容器高度跳变。只有两者绑定，才能同时切断布局传播链和绘制扩散链。
常见错误现象：v-for 列表滚动卡顿、某一项 v-model 更新后整列闪烁、折叠展开时工具栏位置抖动——这些都不是 Vue 响应式本身的问题，而是浏览器没被明确告知“这里可以局部处理”。
-
contain: content已被 Chrome 120+ 废弃，MDN 明确标记为不推荐，行为不稳定，别用 -
contain: strict在响应式列表中极易塌陷：它强制忽略子内容对高度的贡献，而列表项高度往往随字体、图片加载浮动 - 移动端 Safari 和微信 X5 内核对
size子项支持极差，strict几乎等同于无效
必须显式控制容器高度，否则 contain 形同虚设
浏览器对 contain: layout paint 有硬性尺寸要求：若容器未提供可预测的高度上下文，声明会被静默忽略——你查 getComputedStyle(el).contain 看起来生效了，但 DevTools 里 Paint Flashing 仍满屏乱闪。
响应式场景下，不能依赖 height: auto 或 min-content 这类内容驱动的值，否则 containment 不启动。
立即学习“前端免费学习笔记（深入）”；
- 固定高度卡片：直接写
height: 120px - 流式列表：用
min-height: 300px+max-height: 600px+overflow-y: auto - 宽高比可控区域：优先用
aspect-ratio: 16/9+width: 100%，避免flex/grid父容器未设尺寸时子项加 contain 失效
Vue 中加在哪儿？别加错层级
contain 必须作用于列表的**外层包裹容器**，而不是 v-for 每一项内部，更不能加在 contenteditable 或 slot 根节点上。
典型结构：<div class="list-container"><item v-for="..." :key="..."></item></div>，隔离声明只加在 .list-container 上。
- 给每一项加
contain: content是浪费：每项自身尺寸小，重排开销本就不大；真正要锁住的是整个列表区的布局震荡 - 在
el-collapse-item的 body 区域加contain: layout paint，而非 header 或整个 collapse 组件 - 绝对定位子元素（如角标、气泡提示）若依赖外部 scrollY 计算
top，加了layout后会切断该依赖，需改用getBoundingClientRect()或 CSSposition: fixed替代
验证是否真生效，别信声明写了就算
打开 Chrome DevTools → Rendering 面板 → 勾选 “Paint Flashing” 和 “Layout Shift Regions”。真实效果看行为，不看样式面板。
- 滚动或触发列表更新时，闪光区域应严格收缩到
.list-container边界内，不外溢 - 折叠/展开某一项，周围兄弟节点不再出现 Layout Shift 红色高亮
- Performance 面板录制相同操作，对比 “Layout” 和 “Update Layer Tree” 时间下降明显才说明隔离成功
最易被忽略的一点：JS 动态插入大量项前，必须先设好 contain 和尺寸；插入后再动画展开，收起时记得清掉 el.style.contain = ''，否则后续 resize 可能锁死高度。
