content-visibility: auto 必须配合 contain-intrinsic-size 使用，否则滚动条抽搐、内容上跳；需为未渲染元素预设合理占位高度，避免 flex/grid 对齐异常，并做好浏览器兼容性降级。
直接加 content-visibility: auto 不仅没提速，反而会让滚动条抽搐、内容上跳——这不是优化，是制造交互断裂。
为什么必须配 contain-intrinsic-size
浏览器对设了 content-visibility: auto 的元素，默认按高度 0px 计算滚动总高度。等它滚进视口才渲染、撑开真实高度，滚动条突然变短，内容往上跳，手指拖动位置错乱。
-
contain-intrinsic-size是给“未渲染状态”预设占位高度，让滚动容器提前知道“这里将来有内容” - 值要接近单个项的真实高度：卡片固定高 120px，就写
contain-intrinsic-size: 120px - 文字流式项（多行、图片浮动）取保守估计，如
160px，宁大勿小 - 严禁写
0或留空；子元素的height或min-height不会覆盖它
content-visibility: auto 在 Flex/Grid 里容易失效
Flex 容器默认基线对齐，未渲染项高度为 0，会导致父容器拉伸异常或子项错位；Grid 中若只在父级设 contain-intrinsic-size，子项仍可能塌陷。
- Flex 容器必须补
align-items: flex-start，否则对齐错乱 - Grid 容器建议直接在 grid item 上设
contain-intrinsic-size，别指望父容器统一撑开 - 别在
flex或grid的直接子项上无脑加，先确认结构是否“可隔离” - 子元素的
contain-intrinsic-size不会叠加，设了反而可能触发重排
兼容性兜底和 JS 交互避坑
Firefox（含 Android）、iOS Safari ≤ 16.4、所有 IE 版本都不支持 content-visibility。强行使用且无降级，页面在这些环境里会退化成全量渲染，甚至布局错乱。
- 必须用
@supports (content-visibility: auto)包裹规则，里面写降级方案，比如opacity: 0.99（保留占位+无障碍） - JS 动态控制显隐时，千万别用
element.style.display，这会清掉渲染缓存 - 内容更新后需强制重绘？临时加 class 再移除更安全：
element.classList.add('force-update')→setTimeout(() => element.classList.remove('force-update'), 1) - SSR 渲染的初始 HTML 中直接加该属性——JS 还没执行，用户看到的是空白区块，必须等 hydration 完成后再通过 class 控制启用
真正难的不是加两行 CSS，而是估算好 contain-intrinsic-size 的值、处理好 Flex/Grid 的对齐副作用、以及在不支持的浏览器里不破坏原有布局。这三个点漏掉任何一个，性能优化都会变成负优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
