CSS content-visibility 与 contain-intrinsic-size 首屏渲染优化实践

概述CSS `content-visibility` 可以跳过非可见元素的渲染计算，配合 `contain-intrinsic-size` 提供占位尺寸，避免滚动时布局抖动与绘制卡顿，适合长页面与虚拟列表。关键参数/概念`content-visibility: auto;`：自动根据可见性决定是否渲染。`contain-intrinsic-size`: 提供内在尺寸占位（如 `300px 600px`）。视口内计算：仅对可见区域进行布局与绘制，降低主线程压力。实践/示例长列表优化：.card { content-visibility: auto; contain-intrinsic-size: 200px 300px; } 图片与富媒体占位：.media { content-visibility: auto; contain-intrinsic-size: 360px 640px; } 验证方法使用 Performance 与 Rendering 面板观察布局与绘制次数减少情况。通过 Lighthouse 验证 LCP/INP 是否改善，检查 CLS 是否保持稳定。滚动压力测试确保进入视口时渲染平滑且无跳动。注意事项占位尺寸应与真实内容大致匹配，避免进入视口后显著跳变导致 CLS。与懒加载协作时需确保资源准备就绪避免空白闪烁。谨慎应用在频繁尺寸变化的组件，保持稳定占位策略。