Content-Visibility 性能测试

content-visibility 是 CSS Containment 规范中的一个属性，它控制元素是否跳过其内容的渲染。核心值：

• visible（默认）：正常渲染，无优化。
• auto：浏览器会跳过不在视口内的元素的渲染工作（布局、绘制），但保留其占位空间。当元素接近视口时自动恢复渲染。
• hidden：完全跳过渲染，类似于 display: none，但保留布局空间。

对于长列表、大量卡片的场景，content-visibility: auto 可以大幅减少初始渲染时间和内存占用，提升滚动流畅度。

contain-intrinsic-size 为被 content-visibility 跳过的元素指定一个预估尺寸。这样浏览器可以为未渲染的元素预留正确的空间，避免滚动条跳动。

语法示例：contain-intrinsic-size: auto 150px; —— auto 表示如果元素之前被渲染过，使用上次的实际尺寸；150px 是首次渲染前的回退预估值。

在本工具中，简单模式预估高度 72px，中等 150px，复杂 260px，与各模式下的实际列表项高度接近。

• 长列表/瀑布流：如商品列表、文章列表、社交媒体信息流。
• 大量重复组件：卡片、评论、搜索结果项等。
• 复杂渲染内容：包含阴影、渐变、多层级嵌套的元素，跳过渲染的收益更大。
• 初始加载优化：页面首屏渲染时，视口外的内容被跳过，可显著降低 First Contentful Paint (FCP) 时间。
• SPA 路由页面：非活跃路由下的内容可以使用该属性延迟渲染。

一般来说，列表项越多、单项渲染越重，优化效果越明显。本工具在 2000+ 复杂模式下可观测到 3-8 倍的渲染时间差距。

• JavaScript 布局查询可能不准确：被跳过的元素其内部尺寸可能为 0，影响 getBoundingClientRect() 等 API。如需精确测量，应先强制渲染。
• Intersection Observer 行为变化：被跳过的元素可能不会触发 IO 回调，需注意。
• SEO 影响：搜索引擎爬虫通常能索引被 content-visibility: auto 包裹的内容（与 display: none 不同），但建议关键内容不要过度依赖此属性。
• 浏览器兼容性：Chrome 85+、Edge 85+、Opera 71+ 支持良好；Firefox 部分支持（需开启 flag）；Safari 支持较晚（Safari 16.4+）。

建议在使用前进行充分测试，尤其是依赖 DOM 尺寸计算的功能。

content-visibility: auto 已经自动处理了视口检测，但在一些高级场景中，你可以结合 Intersection Observer 实现更精细的控制：

• 懒加载内容：当元素接近视口时，动态加载图片、视频等重资源。
• 虚拟滚动补充：对于超大规模列表（10万+），可结合虚拟滚动库（如 react-window）使用。
• 分析曝光：使用 IO 追踪哪些元素真正进入了视口并完成了渲染。

本工具中的"视口高亮"功能就是使用 Intersection Observer 实现的，帮助你可视化哪些元素处于视口内。

1. 识别候选区域：找到页面中较大的列表、重复卡片区域。
2. 添加 CSS：对列表项添加 content-visibility: auto; contain-intrinsic-size: auto [预估值];
3. 测试：使用 Chrome DevTools Performance 面板录制前后对比。
4. 监控：关注 Largest Contentful Paint (LCP)、Interaction to Next Paint (INP) 等指标变化。
5. 回退方案：对于不支持的浏览器，使用 @supports (content-visibility: auto) 进行特性检测。

建议从低风险的内部页面开始试验，逐步推广到核心页面。