content-visibility: auto 单独使用会导致滚动条猛缩、内容上跳，必须配合 contain-intrinsic-size 设置准确占位高度，且需用 @supports 兜底兼容性。
content-visibility: auto 单独加在列表项上不仅不提速，反而会让滚动条猛缩、内容上跳——真正起效必须配 contain-intrinsic-size，且值不能靠猜。
为什么只写 content-visibility: auto 会更卡
浏览器对设了该属性的元素，默认跳过 layout 和 paint，clientHeight 和 getBoundingClientRect().height 全返回 0。1000 个真实高 120px 的卡片，未渲染时全算成 0，整个滚动容器高度塌成一条线。用户一滑，滚动条突然回弹、内容往上猛跳、手指拖动位置错乱。
- 这不是“小抖动”，是用户可感知的交互断裂
-
display: none是移除占位，content-visibility: auto是保留占位但暂缓渲染——语义和行为完全不同 - 子元素上写的
height或min-height不会覆盖它，优先级更低 - 值写成
0、留空、或用%/em，效果等同于没设
怎么设 contain-intrinsic-size 才不翻车
这不是估算，是向浏览器做的尺寸占位承诺。写错值，轻则撑破占位触发重排，重则布局塌陷。
- 卡片类（固定高）：
contain-intrinsic-size: 120px - 文字流式项（多行、图片浮动）：
contain-intrinsic-size: 160px（宁大勿小） - 网格项需控宽高：
contain-intrinsic-size: 300px 240px - 横向长表格只控宽：
contain-intrinsic-size: 800px 0（第二个值是 height，不能省略）
在 Flex/Grid 容器里加 content-visibility: auto 容易失效
Flex 容器默认基线对齐，未渲染项高度为 0，会导致父容器拉伸异常或子项错位；Grid 中若只在父级设 contain-intrinsic-size，子项仍可能塌陷。
- Flex 容器必须补
align-items: flex-start，否则对齐错乱 - Grid 容器建议直接在 grid item 上设
contain-intrinsic-size，别指望父容器统一撑开 - 别在 flex 或 grid 的直接子项上无脑加，先确认结构是否“可隔离”
必须用 @supports 兜底，否则老浏览器会退化成全量渲染
content-visibility 在 Firefox for Android、iOS Safari ≤ 16.4、所有 IE 版本中都不支持。强行使用且无降级，页面在这些环境里会退化成全量渲染，甚至布局错乱。
- 必须用
@supports (content-visibility: auto)包裹规则 - 降级方案推荐
opacity: 0.99（保留占位 + 无障碍）或visibility: hidden（比display: none更轻） - JS 动态控制显隐时，千万别用
element.style.display = 'block'切换——这会清掉渲染缓存
真正难的不是加两行 CSS，而是估算好 contain-intrinsic-size 的值、处理好 Flex/Grid 的对齐副作用、以及在不支持的浏览器里不破坏原有布局。这三个点漏掉任何一个，性能优化都会变成负优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
