content-visibility: auto 必须配 contain-intrinsic-size 才有效，否则浏览器按高度0计算未渲染元素，导致页面塌陷、滚动抖动、cls飙升；值须用绝对像素（如120px），禁用相对单位或0/auto。
单独加 content-visibility: auto 不仅不提速，反而会让滚动条猛缩、内容上跳——真正起效必须配 contain-intrinsic-size，且值不能靠猜。
为什么只写 content-visibility: auto 在 Chrome 里更卡
Chrome 85+ 确实支持该属性，但默认把未渲染元素高度算作 0px。1000 个真实高 120px 的卡片，全按 0 算，整个页面高度塌成一条线。用户一滑，滚动条突然回弹、内容往上猛跳、手指拖动位置错乱。
-
clientHeight和getBoundingClientRect().height全返回0，JS 获取尺寸也失效 - 子元素的
height或min-height不会覆盖它，contain-intrinsic-size优先级更高 - 值写成
0、留空、或用%/em/rem，效果等同于没设 - 移动端尤其忌讳照搬 PC 写法，首屏就抖
contain-intrinsic-size 怎么设才不翻车
这不是估算，是向浏览器做的尺寸占位承诺。写错值或留空，等于没设，轻则撑破占位触发重排，重则布局塌陷。
- 卡片类（固定高）：
contain-intrinsic-size: 120px - 文字流式项（多行、图片浮动）：
contain-intrinsic-size: 160px（宁大勿小） - 网格项需控宽高：
contain-intrinsic-size: 300px 240px - 横向长表格只控宽：
contain-intrinsic-size: 800px 0（高度仍由内容撑开） - 双值语法中第二个值是 height，不能省略；
auto值部分浏览器支持有限，生产环境慎用
在 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 交互避坑
Firefox for Android、iOS Safari ≤ 16.4、所有 IE 版本都不支持 content-visibility。强行使用且无降级，页面会退化成全量渲染。
- 必须用
@supports (content-visibility: auto)包裹规则，里面写降级方案，比如opacity: 0.99 - 千万别用
element.style.display = 'block'切换显隐——这会清掉渲染缓存，下次显示又要重 layout/paint - 内容更新后需强制重绘？临时加 class 更安全：
element.classList.add('force-repaint')
最容易被忽略的是：这个优化不是“加了就快”，而是“加对了才快”。占位尺寸写错、结构没隔离、降级没兜住，任何一个环节出问题，都会让性能更差而不是更好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
