content-visibility: auto 必须配合合理设置的 contain-intrinsic-size 才有效，否则会导致滚动抖动、高度塌陷和布局错乱；需按内容类型设固定值，禁用相对单位，并在 flex/grid 中谨慎使用，同时做好浏览器兼容降级。
直接加 content-visibility: auto 不会提速，反而会让滚动条抽搐、内容上跳——真正起效的前提是配对设置 contain-intrinsic-size，且值必须合理。
为什么只写 content-visibility: auto 在 Chrome 里更卡
Chrome（85+）确实支持该属性，但默认把未渲染元素高度算作 0px。1000 个真实高 120px 的卡片，全按 0 算，整个页面高度塌成一条线。用户一滑，滚动条猛缩、内容往上跳、手指拖动位置错乱——这不是优化，是布局抖动。
- 根本原因是
content-visibility: auto默认启用size containment，没contain-intrinsic-size就等于告诉浏览器：“这盒子就是空的” -
clientHeight和getBoundingClientRect().height全返回0，JS 获取尺寸也失效 - 子元素的
height或min-height不会覆盖它，优先级更低
contain-intrinsic-size 怎么设才不翻车
这不是估算，是向浏览器做的尺寸占位承诺。写错值或留空，效果等同于没设。
- 卡片类（固定高）：
contain-intrinsic-size: 120px - 文字流式项（多行、图片浮动）：
contain-intrinsic-size: 160px（宁大勿小，小了会撑破占位触发重排） - 网格项需控宽高：
contain-intrinsic-size: 300px 240px - 横向长表格只控宽：
contain-intrinsic-size: 800px 0（高度仍由内容撑开） - 禁止用
%、em、rem；移动端尤其忌讳照搬 PC 写法
Flex/Grid 容器里加 content-visibility: auto 容易失效
Flex 默认基线对齐，未渲染项高度为 0，会导致父容器拉伸异常或子项错位；Grid 中若只在父级设 contain-intrinsic-size，子项仍可能塌陷。
- Flex 容器建议加
align-items: flex-start，避免基线对齐错位 - Grid 容器建议直接在 grid item 上设
contain-intrinsic-size，别指望父容器统一撑开 - 别在 flex 或 grid 的直接子项上无脑加，先确认结构是否“可隔离”
兼容性兜底和 JS 交互避坑
Chrome 85+ 支持完整，但 Firefox for Android 和 iOS Safari ≤ 16.4 仍不支持——上线前必须做降级。
- 必须用
@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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
