content-visibility: auto 必须配 contain-intrinsic-size，否则浏览器按0px计算滚动高度导致滚动条跳变；需设接近真实项高（如120px），Flex/Grid中需额外对齐处理并避免嵌套，且须用@supports兜底。
直接结论：对长列表项加 content-visibility: auto，再配 contain-intrinsic-size，能跳过离屏渲染，首屏时间压到 1/5 以内——但不设后者或设错值，滚动会抽搐，体验反而更差。
为什么 content-visibility: auto 必须配 contain-intrinsic-size
浏览器对设了 content-visibility: auto 的元素，默认按高度 0px 计算滚动总高度。等它滚进视口才渲染、撑开真实高度——滚动条突然变短，内容上跳，手指拖动位置错乱。这不是“小问题”，是用户可感知的交互断裂。
-
contain-intrinsic-size就是给这个“未渲染状态”预设一个占位高度，让滚动容器提前知道“这里将来有内容”，从而稳定滚动条 - 值要接近单个项的真实高度：卡片固定高
120px，就写120px；文字行数不固定，取保守估计（如160px），宁大勿小 - 严禁写
0或留空，这等于没设；子元素的height或min-height不会覆盖它
content-visibility: auto 在 Flex/Grid 容器里容易失效
Flex 容器默认用基线对齐，content-visibility: auto 的项初始高度为 0，会导致父容器拉伸异常或子项错位；Grid 容器中若只在父级设 contain-intrinsic-size，子项仍可能塌陷。
- Flex 父容器必须加
align-items: flex-start，避免基线对齐干扰 - Grid 布局建议直接在每个 grid item 上设
content-visibility: auto和contain-intrinsic-size，别指望父容器统一撑开 - 不要嵌套使用：父元素设了
auto，子元素再设不会叠加效果，反而可能触发意外重排
兼容性兜底和 JS 交互避坑
Firefox（含 Android）、iOS Safari ≤ 16.4、所有 IE 版本都不支持 content-visibility。强行使用且无降级，页面在这些环境里会退化成全量渲染，甚至布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 必须用
@supports (content-visibility: auto)包裹规则，里面写降级方案，比如opacity: 0.99（保留占位+无障碍）或visibility: hidden（比display: none更轻） - JS 动态控制显隐时，千万别用
display: none切换——这会清掉渲染缓存，下次显示又要重 layout/paint - 内容更新后需强制重绘？临时加 class 再移除更安全：
element.classList.add('force-update')→setTimeout(() => element.classList.remove('force-update'), 1)
真正难的不是加两行 CSS，而是估算好 contain-intrinsic-size 的值、处理好 Flex/Grid 的对齐副作用、以及在不支持的浏览器里不破坏原有布局。这三个点漏掉任何一个，性能优化都会变成负优化。
