CSS content-visibility 与 contain-intrinsic-size：长列表渲染优化

## 概述 `content-visibility: auto` 使不可见内容跳过布局与绘制，仅在进入视口时参与渲染；`contain-intrinsic-size` 为跳过阶段提供占位尺寸，避免滚动跳变。 ## 用法/示例 ```css .list-item { content-visibility: auto; contain-intrinsic-size: 1px 240px } ``` ## 工程建议 - 为列表项设置合理的占位尺寸，保持滚动稳定；对动态高度内容进行均值或分层估计。 - 与懒加载和曝光采集协同，控制渲染节奏并提升首屏速度。 - 对交互密集区域谨慎使用，避免延迟可点击元素的渲染。 ## 参考与验证 - MDN：`content-visibility` — https://developer.mozilla.org/docs/Web/CSS/content-visibility - web.dev：Content visibility — https://web.dev/articles/content-visibility