🚀 CSS Content-Visibility 生成器
通过内容可见性控制优化页面性能 · 智能懒渲染 · 提升加载速度
⚙️ 设置
👁️ 实时预览
滚动查看下方列表 —— content-visibility: auto 会推迟屏幕外元素的渲染
📋 生成的 CSS 代码
.lazy-section {
content-visibility: auto;
contain-intrinsic-size: 300px;
}
📖 content-visibility 属性值说明
| 值 | 说明 | 性能影响 |
|---|
| visible | 元素正常渲染，无任何跳过行为 | 无优化 |
| auto | 屏幕外元素跳过渲染，进入视口才渲染
配合 contain-intrinsic-size 设置占位尺寸 | 🎯 显著提升首屏加载性能 |
| hidden | 元素隐藏且跳过渲染，类似 display:none
但保留元素状态，可随时切换为 visible 恢复 | 不渲染（零开销） |
💡 最佳实践
📄 长文章/博客
文章段落设置 content-visibility: auto，首屏外的段落延迟渲染
🛒 商品列表
卡片列表使用 auto 模式，快速滚动时只渲染可见卡片
💬 评论/聊天
长评论列表使用 auto + contain-intrinsic-size 减少布局抖动
📋 数据表格
大型表格的行使用 auto 模式，滚动到视口时再渲染
📱 Tab/手风琴
隐藏的面板使用 hidden，切到可见时切换为 visible 恢复内容
📐 占位尺寸
始终配合 contain-intrinsic-size 设置高度，防止滚动条跳动
🌐 浏览器兼容性
Chrome 85+, Edge 85+, Opera 71+ 已全面支持。Safari 和 Firefox 正在实现中。推荐使用 @supports 进行检测。
/* 特性检测降级写法 */
.section {
/* 基础样式 - 不支持的浏览器回退 */
padding: 16px;
margin-bottom: 16px;
}
@supports (content-visibility: auto) {
.section {
content-visibility: auto;
contain-intrinsic-size: 300px;
}
}