CSS content-visibility contain-intrinsic-size 渲染性能与首屏稳定实践

概览`content-visibility` 能让浏览器跳过不可见元素的渲染，`contain-intrinsic-size` 则在不渲染内容时提供占位尺寸，避免布局抖动。适用于长列表与首屏优化。基础用法.list-item { content-visibility: auto; contain-intrinsic-size: 200px; contain: layout style paint; } 首屏组件.hero { content-visibility: auto; contain-intrinsic-size: 480px; } 治理要点为不可见元素设置合适的 `contain-intrinsic-size`，避免滚动到视区时的跳变。与布局与尺寸令牌协作，统一占位高度与宽度。谨慎用于动态高度内容，必要时在进入视区后调整真实尺寸。验证与指标浏览器：Chrome 120+、Safari 17+、Firefox 120+首屏渲染更快；滚动进入时无明显抖动与重排