content-visibility: auto 配合 contain-intrinsic-size 可显著提升长列表性能，尤其在移动端；未设后者会导致滚动跳动，需注意兼容性、父容器布局限制及高度估算精度。
能直接跳过离屏项的 layout 和 paint，但不配
会导致滚动跳动、高度塌陷，实际体验更差。
为什么
在移动端特别有效
移动端视口小，通常只显示 3–5 个列表项，但 DOM 可能有上千个。浏览器默认仍为所有项执行完整渲染流水线。而
让它“装瞎”：保留 DOM 结构和占位，跳过离屏项的样式计算、布局、绘制——实测在 iOS Safari（16.4+）或 Chrome for Android 上，1000 条列表首屏渲染时间可从 800ms 降至 200ms，内存下降超 70%。
注意：
在 Firefox Android 和 iOS ≤ 16.4 中不支持，必须用
包裹并提供降级方案（比如 fallback 为
或简单
）。
必须设
，否则滚动会抽搐
未渲染的元素高度是 0px，浏览器按 0 计算总滚动高度；等它滚入视口才渲染并撑开真实高度——结果就是滚动条突然变短、内容上跳、手指位置错乱。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
值应尽量接近单个列表项的真实高度（如卡片固定高 120px，就写
）
高度不固定时（如含多行文字），取保守估计值（如
），宁大勿小
不能依赖子元素的
或
，
优先级更高
严禁写成
或留空，这等于没设
和
别混用
两者语义与行为完全不同：
移除布局空间，屏幕阅读器不可读，
返回全 0
保留占位、可聚焦、可被查找、无障碍友好，且滚动进入后自动恢复渲染
若在 JS 中动态控制显隐（如下拉加载后手动 show/hide），别用
切换——这会破坏缓存机制，导致重复 layout/paint
需要手动触发重绘时（如内容更新后），临时加 class 再移除更安全：
Flex/Grid 容器里容易踩的坑
不是所有父容器都“听话”：
Flex 容器中，子项设
时，父容器需加
，否则可能因基线对齐出错
Grid 容器中，建议对 grid item 单独设
，不要指望父容器统一撑开
避免在
元素或
父级下使用，containment 可能被截断或失效
真正难处理的是高度估算不准 + 滚动惯性叠加，这时候哪怕 CSS 写对了，用户快速滑动时仍可能看到短暂空白或错位——得靠
提前触发预渲染，或者干脆切到虚拟滚动。
content-visibility: autocontain-intrinsic-sizecontent-visibility: autocontent-visibility: autocontent-visibility@supports (content-visibility: auto)opacity: 0.99visibility: hiddencontain-intrinsic-sizecontain-intrinsic-size120px160pxheightmin-heightcontain-intrinsic-sizecontain-intrinsic-size: 0content-visibility: autodisplay: nonedisplay: nonegetBoundingClientRect()content-visibility: autodisplayelement.classList.add('force-update'); setTimeout(() => element.classList.remove('force-update'), 1)content-visibility: autoalign-items: flex-startcontain-intrinsic-sizeposition: stickytransformIntersectionObserver