content-visibility: auto 性能演示 - 跳过渲染优化

content-visibility: auto 是 CSS Containment Level 2 规范中的一个属性值。它允许浏览器跳过对屏幕外（不可见）元素的渲染工作，包括布局、绘制和合成。当元素滚动进入视口时，浏览器会自动恢复渲染。这可以显著减少初始页面加载时间和滚动时的计算开销，尤其适合包含大量内容的页面（如长列表、图库、信息流等）。

关键区别在于空间占位：
• display: none — 元素完全从文档流中移除，不占据任何空间，DOM 仍存在但布局无视它。
• content-visibility: auto — 元素仍然占据布局空间（通过 contain-intrinsic-size 或自动估算），浏览器只是跳过其内容的渲染。滚动条位置保持稳定，用户体验更平滑。
这使得 content-visibility: auto 非常适合虚拟化长列表，而无需复杂的 JavaScript 虚拟滚动方案。

contain-intrinsic-size 为浏览器提供一个预估的元素尺寸，在元素被跳过渲染时使用。如果没有这个值，浏览器无法准确知道未渲染元素的大小，可能导致滚动条频繁跳动（滚动条抖动问题）。

推荐使用 contain-intrinsic-size: auto 200px;，其中 auto 表示浏览器会记住元素最后一次渲染的实际尺寸，200px 是首次渲染前的回退值。这样滚动体验更加流畅自然。

Chrome 85+ 完全支持，Edge 85+ 完全支持，Opera 71+ 支持。
Firefox 125+ 已开始支持（2024年），Safari 17.4+ 也已支持。

截至2025年，主流浏览器基本都已支持，覆盖约 90%+ 的用户。对于不支持的浏览器，该属性会被忽略，元素正常渲染，属于渐进增强策略，可以放心在生产环境使用。

建议搭配 @supports (content-visibility: auto) { ... } 进行特性检测。

content-visibility: auto 不会影响 SEO。搜索引擎爬虫会解析完整的 DOM 和 HTML 内容，该属性只影响浏览器的渲染管线，不改变 DOM 结构或内容可访问性。所有文字内容仍然存在于 HTML 中，爬虫可以正常索引。

实际上，由于页面加载速度更快，Core Web Vitals（特别是 LCP 和 FID）得分更高，反而可能间接提升搜索排名。

最适合以下场景：
✅ 长列表 / 信息流（如商品列表、文章列表）
✅ 图片画廊 / 卡片网格
✅ 评论区（大量用户评论）
✅ 无限滚动页面
✅ 任何包含大量重复元素且大部分在屏幕外的页面

⚠️ 不适合的场景：
• 内容全部在首屏可见的小页面
• 需要精确滚动位置同步的场景（如协同编辑）
• 元素尺寸动态变化频繁且无法预估的情况