content‑visibility: auto Tester - Online Render Deferral

content-visibility: auto 是一个CSS属性，它告诉浏览器：如果元素不在用户视口附近，就跳过该元素的渲染（包括布局和绘制）。浏览器会自动检测元素是否接近视口，当元素即将进入视口时才会渲染它。这类似于"懒渲染"——屏幕外的元素占据空间（通过 contain-intrinsic-size 定义），但其内部内容不会立即被处理，从而显著减少初始页面渲染的工作量，提升性能。

核心技术：它结合了CSS Containment（尺寸 containment），使浏览器能够安全地跳过屏幕外元素的布局计算。

display: none：元素完全从文档流中移除，不占据任何空间，也无法通过搜索（Ctrl+F）找到。

visibility: hidden：元素隐藏但仍占据空间，其布局和绘制仍然进行，只是不可见。

content-visibility: auto：元素仍然占据空间（通过contain-intrinsic-size），滚动条位置保持准确，内容可被搜索和访问。浏览器只是延迟渲染屏幕外的元素。当用户滚动到附近时，浏览器自动渲染它们。这是三者中唯一能带来性能提升的方案。

contain-intrinsic-size 指定了元素在未渲染时的预估尺寸。当 content-visibility: auto 跳过屏幕外元素的渲染时，浏览器需要知道该元素大约占多大空间，以保持滚动条的正确性和页面布局稳定。如果没有设置这个属性，元素在未渲染时的高度可能为0，导致滚动条跳动。

推荐写法：contain-intrinsic-size: auto 300px; —— auto 关键字让浏览器记住元素最后一次渲染时的实际尺寸，而 300px 是首次渲染前的回退值。

性能提升取决于页面内容量和复杂度。根据Chrome团队的测试：

• 对于包含大量卡片、列表项或文章的页面，初始渲染时间可减少50%-80%
• 内存占用可降低，因为屏幕外元素的渲染资源被延迟分配
• 长列表页面（如新闻feed、产品列表）的LCP（Largest Contentful Paint）可显著改善

本工具可帮助你直观感受这一效果：开启content-visibility后，视口外的卡片处于"延迟"状态，浏览器不会消耗资源渲染它们。

桌面端：Chrome 85+、Edge 85+、Opera 71+ 完全支持。Firefox从版本125开始支持。Safari从版本18（2024年）开始支持。

移动端：Android Chrome 85+、iOS Safari 18+ 支持。对于不支持的浏览器，content-visibility: auto 会被忽略，元素正常渲染，不会造成功能问题——这是一个优雅降级的特性。

建议使用渐进增强策略：在不支持的浏览器中，页面仍可正常使用，只是缺少性能优化。

SEO：没有负面影响。搜索引擎爬虫通常会渲染整个页面（包括屏幕外内容），content-visibility不会阻止爬虫索引内容。Google明确表示他们能够正确处理使用content-visibility的页面。内容仍然存在于DOM中，可被完整抓取。

可访问性：屏幕阅读器可以正常访问所有内容，因为元素仍然存在于DOM中。Ctrl+F搜索功能也能正常找到屏幕外的文本内容。这与虚拟滚动（只保留视口内DOM节点）有本质区别。

注意：确保 contain-intrinsic-size 设置合理，避免屏幕阅读器的导航顺序出现混乱。

最适合以下场景：

• 长列表/Feed流：产品列表、文章列表、社交媒体时间线
• 卡片网格布局：图片画廊、推荐内容区域
• 折叠/手风琴内容：FAQ区域、评论列表
• 页面下方非关键内容：页脚前的内容区域
• 需要快速初始渲染的着陆页：首屏性能至关重要

不太适合：需要精确渲染计时的动画元素、需要始终可见的固定元素、视口内元素数量本来就很少的简单页面。

本工具使用Intersection Observer实时追踪每个卡片的可见性：

• 绿色边框 已渲染 (Rendered)：卡片在视口内或非常接近，浏览器已渲染其内容
• 黄色边框 预渲染 (Pre-rendering)：卡片在预渲染距离内（即将进入视口），浏览器可能已开始渲染
• 灰色边框 延迟 (Deferred)：卡片远离视口，渲染被content-visibility延迟

关闭"auto"开关后，所有卡片都会正常渲染（蓝色边框），可对比性能差异。