加 content-visibility: auto 能显著提速，但必须配 contain-intrinsic-size 否则导致滚动跳动、高度塌陷；移动端因视口小、DOM 多，跳过离屏项的 layout/paint 效果更明显，首屏渲染可从 800ms 降至 200ms，内存降超 70%。
直接加 content-visibility: auto 能显著提速，但不配 contain-intrinsic-size 会导致滚动跳动、高度塌陷，实际体验更差。
为什么移动端加 content-visibility: auto 特别有效
移动端视口小，通常只显示 3–5 个列表项，但 DOM 可能有几百甚至上千个。浏览器默认仍为所有项执行 layout + paint，哪怕它们完全在屏幕外。而 content-visibility: auto 让浏览器跳过离屏项的样式计算、布局和绘制，只保留 DOM 占位——实测在 iOS Safari（16.4+）或 Chrome for Android 上，1000 条列表的首屏渲染时间可从 800ms 降至 200ms 左右，内存占用下降超 70%。
它不是隐藏，也不是懒加载，而是让浏览器在渲染流水线早期就决定：“这个先不画、不排”。同时自动启用 contain: layout paint style，隔离内部变化，避免牵连全局重排。
必须设 contain-intrinsic-size，否则滚动会“抽搐”
未渲染的元素高度是 0px，浏览器按 0 高度计算滚动区域总高度，等它滚入视口才渲染并撑开真实高度——结果就是滚动条突然变短、内容上跳、用户手指位置错乱。
立即学习“前端免费学习笔记（深入）”；
-
contain-intrinsic-size值应尽量接近单个列表项的真实高度（比如卡片固定高 120px，就写120px） - 高度不固定时（如含多行文字），取保守估计值（如
160px），宁大勿小 - 不能依赖子元素的
height或min-height，contain-intrinsic-size优先级更高 - 严禁写成
contain-intrinsic-size: 0或留空，这等于没设
content-visibility: auto 和 display: none 别混用
两者语义和行为完全不同：
-
display: none移除布局空间，屏幕阅读器不可读，getBoundingClientRect()返回全 0 -
content-visibility: auto保留占位、可聚焦、可被查找、无障碍友好，且滚动进入后自动恢复渲染 - 若在 JS 中动态控制显隐（如下拉加载后手动 show/hide），别用
display切换——这会破坏缓存机制，导致重复 layout/paint - 需要手动触发重绘时（如内容更新后），临时加 class 再移除更安全：
element.classList.add('force-update'); setTimeout(() => element.classList.remove('force-update'), 1)
兼容性与降级必须做，不能只靠 CSS
content-visibility 在 Firefox Android 和旧版 Safari（iOS ≤ 16.4）中仍不支持，Chrome 85+、Edge 85+ 可用。上线前必须用 @supports (content-visibility: auto) 包裹，并提供降级方案：
- 简单 fallback：如
opacity: 0.99或visibility: hidden（注意后者仍会渲染） - 结构降级：把长列表拆成多个区块，每个区块单独加
content-visibility: auto，比全量应用更稳 - Flex 容器里设该属性时，父容器需加
align-items: flex-start，否则可能因基线对齐出错
最易被忽略的是：动态内容（如展开/收起、富文本加载）后，contain-intrinsic-size 的值若未同步更新，占位就会失真——这问题不会报错，但滚动体验会悄悄变差。
