CSS content-visibility 与 contain-intrinsic-size 首屏性能优化实践

CSS content-visibility 与 contain-intrinsic-size 首屏性能优化实践概述`content-visibility` 可让不可见元素跳过布局与绘制；`contain-intrinsic-size` 为懒渲染内容提供占位尺寸，避免布局跳动，提升首屏与滚动性能。核心概念与参数懒渲染：`content-visibility: auto;` 根据可视性自动跳过渲染。占位尺寸：`contain-intrinsic-size: 800px;` 或 `inline-size`/`block-size` 指定固有大小。保持可滚动性：懒渲染时仍参与滚动计算。实践示例<section class="list"> <article class="card">...</article> <article class="card">...</article> </section> <style> .card { content-visibility: auto; contain-intrinsic-size: 300px; } </style> 验证方法浏览器支持：content-visibility（Chrome 85+、Safari 17+、Firefox 121+）；contain-intrinsic-size（Chrome 88+、Safari 17+、Firefox 121+）。测试环境：Windows 11 / macOS 14；Chrome 120+ / Safari 17+。指标观察：长列表页面 LCP 降低，滚动过程 `INP` 无长任务阻塞，`CLS` 正常。注意事项为懒渲染区域提供合理的固有尺寸以避免进入视口时的跳动。与 `content-visibility: hidden-matchable` 配合进行选择器匹配优化（需谨慎评估）。对关键首屏模块避免懒渲染，保证感知速度与可达性。