必须配 contain-intrinsic-size 才能使 content-visibility: auto 有效，否则浏览器按 0px 高度计算导致滚动条抽搐、内容上跳；需“宁大勿小”设置固定值，慎用 flex/grid，且须用 @supports 降级兼容不支持的浏览器。
直接加 content-visibility: auto 不会提速，反而容易让滚动条抽搐、内容上跳——真正起效的关键是配对设置 contain-intrinsic-size，并处理好容器布局和浏览器兼容性。
必须配 contain-intrinsic-size，否则等于白加
浏览器对设了 content-visibility: auto 的元素，默认按高度 0px 计算滚动总高度。1000 个真实高 120px 的卡片，全按 0 算，页面就塌成一条线。用户一滑，滚动条猛缩、内容往上跳、手指拖动错位。
- contain-intrinsic-size 是占位承诺，不是可选项：它告诉浏览器“这里将来有内容”，提前预留空间，稳住滚动条
- 值要“宁大勿小”：卡片固定高 120px → 写
120px；文字行数不定 → 保守取160px；网格项宽高都控 → 写300px 240px - 禁用
%、em、rem；严禁写0或留空；子元素的height或min-height不会覆盖它
Flex/Grid 容器里要特别小心
Flex 默认基线对齐，未渲染项高度为 0，会导致父容器拉伸异常或子项错位；Grid 中若只在父级设 contain-intrinsic-size，子项仍可能塌陷。
- Flex 容器建议加
align-items: flex-start，避免基线对齐错位 - Grid 容器建议直接在 grid item 上设
contain-intrinsic-size，别指望父容器统一撑开 - 别在 flex 或 grid 的直接子项上无脑加，先确认结构是否“可隔离”
兼容性兜底和 JS 交互不能漏
Firefox（含 Android）、iOS Safari ≤ 16.4、所有 IE 版本都不支持该属性。强行使用且无降级，页面在这些环境里会退化成全量渲染，甚至布局错乱。
- 必须用
@supports (content-visibility: auto)包裹规则，里面写降级方案，比如opacity: 0.99（保留占位+无障碍） - 别用
element.style.display = 'block'切换显隐——这会清掉渲染缓存，下次显示又要重 layout/paint - 内容更新后需强制重绘？临时加 class 更安全：
element.classList.add('force-update')，再setTimeout(() => element.classList.remove('force-update'), 1)
真正难的不是加两行 CSS，而是估算好 contain-intrinsic-size 的值、处理好 Flex/Grid 的对齐副作用、以及在不支持的浏览器里不破坏原有布局。这三个点漏掉任何一个，性能优化都会变成负优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
