content-visibility 是 CSS 中一个相对较新的属性，它旨在提高大型文档或复杂网页的渲染性能。这个属性允许浏览器延迟对页面某些部分的渲染，直到它们真正需要被显示或交互时。这对于包含大量内容或复杂布局的网页特别有用，因为它可以减少初始渲染时间和内存使用。
语法
.element {content-visibility: auto | hidden | visible;
}
值
- auto: 这是默认值。当设置为
auto时，浏览器会根据需要决定是否延迟渲染内容。通常，这意味着如果内容在视口之外，它可能会被延迟渲染。 - hidden: 当设置为
hidden时，内容将不会被渲染，也不会占据任何布局空间。这类似于将元素设置为display: none，但不同之处在于，content-visibility: hidden的元素仍然保留在文档流中，并且可以通过脚本或样式动态地变为可见。 - visible: 当设置为
visible时，内容将正常渲染，不受content-visibility属性的延迟渲染机制影响。
使用场景
content-visibility 属性特别适用于以下场景：
- 长列表或表格：对于包含大量行的列表或表格，
content-visibility: auto可以显著减少初始渲染时间和内存使用。 - 动态内容：对于可能根据用户交互动态显示或隐藏的内容，
content-visibility可以帮助优化性能。 - 无限滚动页面：在无限滚动页面中，只有用户滚动到的内容才会被渲染，这可以提高性能并减少资源使用。
注意事项
- 布局影响：当内容被延迟渲染时，它不会占据任何布局空间，这可能会影响页面的整体布局。因此，在使用
content-visibility时，需要仔细考虑其对页面布局的影响。 - 滚动行为：在某些情况下，延迟渲染的内容可能会导致滚动行为变得不连续或不可预测。
- 浏览器支持：虽然现代浏览器（如 Chrome、Firefox 和 Safari）已经开始支持
content-visibility属性，但并非所有浏览器都完全支持。因此，在使用之前，请检查目标浏览器的兼容性。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Content Visibility Example</title>
<style>.long-list {content-visibility: auto;contain-intrinsic-size: 500px; /* Optional: Specifies a minimum height for the container */}.list-item {padding: 10px;border-bottom: 1px solid #ccc;}
</style>
</head>
<body><div class="long-list"><div class="list-item">Item 1</div><div class="list-item">Item 2</div><!-- Many more items --><div class="list-item">Item 1000</div>
</div></body>
</html>
在这个示例中，.long-list 容器使用了 content-visibility: auto，这意味着如果列表项不在视口中，它们将被延迟渲染，从而提高性能。contain-intrinsic-size 属性是可选的，它用于指定容器在延迟渲染时的最小高度，以确保布局的稳定性。