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