必须配合 contain-intrinsic-size 使用 content-visibility: auto，否则因离屏元素高度被算为0导致滚动错乱；该值需用px精确设置且宁大勿小，并通过css变量+js动态更新以匹配真实高度。
直接加 content-visibility: auto 不但不解决卡顿，反而会让滚动条猛缩、内容上跳、手指拖动错位——根本原因是没配 contain-intrinsic-size，浏览器把所有离屏项高度算成 0px。
为什么只写 content-visibility: auto 会更卡
浏览器对设了 content-visibility: auto 的元素，默认跳过 layout 和 paint，getBoundingClientRect().height 返回 0。1000 条列表全按 0 高计算，滚动容器总高度塌陷，用户一滑，滚动条突然回弹、内容往上猛跳。
- 这不是“渲染慢”，是布局错乱：滚动位置和 DOM 高度严重脱节
-
display: none是清空占位，content-visibility: auto是保留占位但暂缓渲染——语义完全不同 - 子元素的
height或min-height不会覆盖它，contain-intrinsic-size优先级更高
contain-intrinsic-size 怎么设才不翻车
这不是估算，是向浏览器做的尺寸占位承诺。写错值或留空，效果等同于没设。
- 固定高卡片（如商品项）：
contain-intrinsic-size: 120px - 含多行文字或图片的流式项：
contain-intrinsic-size: 160px（宁大勿小） - 网格项需控宽高：
contain-intrinsic-size: 300px 240px - 横向长表格只控宽：
contain-intrinsic-size: 800px 0（高度仍由内容撑开） - 严禁用
%、em、rem；移动端必须用px，否则失效
移动端 Flex/Grid 容器里容易失效的坑
content-visibility: auto 在 Flex/Grid 中不是不能用，而是结构稍有偏差就白忙活。
- Flex 容器默认基线对齐，离屏项高度为 0，会导致父容器拉伸异常或子项错位；必须加
align-items: flex-start - Grid 容器中，
contain-intrinsic-size必须作用在每个.item上，不能指望父容器统一撑开 - 别在 flex 或 grid 的直接子项上无脑加——先确认该子项是否“可隔离”：是否独立、无跨行/跨列、无依赖外部尺寸
- 富文本或图片加载完成时，真实高度可能变化，得靠 JS 读取后动态更新变量（见下一条）
用 CSS 变量配合 JS 动态更新高度值
contain-intrinsic-size 写死 px 值扛不住动态内容，但直接 JS 改 style 属性又重排。最优解是抽成 CSS 变量，由 JS 精准喂值。
- 定义变量：
:root { --item-height: 120px; } - 样式中使用：
.item { content-visibility: auto; contain-intrinsic-size: var(--item-height); } - JS 在首次渲染后读取真实高度：
document.documentElement.style.setProperty('--item-height', '124px') - 图片加载完成或文字展开后，再次更新该变量——比重设 class 更轻量
- 最麻烦的不是写变量，而是判断何时更新、更新多少：估小 10px，滚动条就抖一次；变量没同步，首屏优化就白做了
最难的不是加那行 content-visibility: auto，而是守住 contain-intrinsic-size 这个承诺——它必须比真实高度略大，且得被 JS 拦住真实尺寸后及时修正。一旦松懈，卡顿不会消失，只会换种方式出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
