通过跳过屏幕外内容的渲染来缩短初始加载时间。
该content-visibility属性在 Chromium 85 中启动，可能是用于提高页面加载性能的最具影响力的新 CSS 属性之一。content-visibility使用户代理可以跳过元素的渲染工作，包括布局和绘画，直到需要为止。由于跳过了渲染，因此如果您的大部分内容不在屏幕上，则利用该content-visibility属性会使初始用户加载速度更快。它还允许与屏幕上的内容进行更快的交互。挺整洁的。
应用场景
使用 auto 降低长页面的渲染成本
使用隐藏来手动管理可见性。
以下示例显示可以在脚本中管理可见性。content-visibility: hidden例如，使用代替的额外好处display: none是，在隐藏时呈现的内容content-visibility将保留呈现状态。这意味着如果再次显示内容，它将比替代方式更快地呈现。
CSS 遏制
CSS 包含的关键和总体目标是通过提供可预测的 DOM 子树与页面其余部分的隔离来提高 Web 内容的呈现性能。
基本上，开发人员可以告诉浏览器页面的哪些部分被封装为一组内容，允许浏览器推理内容而无需考虑子树之外的状态。知道哪些内容位（子树）包含孤立的内容意味着浏览器可以为页面渲染做出优化决策。
有四种类型的CSS 包含，每一种都是 CSS 属性的潜在值contain，可以组合在一起形成一个以空格分隔的值列表：
size: 元素上的尺寸限制确保元素的盒子可以在不需要检查其后代的情况下进行布局。这意味着如果我们只需要元素的大小，我们可能会跳过后代的布局。layout: 布局包含是指后代不影响页面上其他框的外部布局。如果我们只想布置其他盒子，这允许我们潜在地跳过后代的布局。style: 样式包含可确保不仅影响其后代的属性不会逃逸元素（例如计数器）。如果我们只想计算其他元素的样式，这允许我们潜在地跳过后代的样式计算。paint: 绘制包含确保包含框的后代不会显示在其边界之外。没有什么可以明显地溢出元素，如果一个元素在屏幕外或不可见，它的后代也将不可见。如果元素不在屏幕上，这允许我们潜在地跳过绘制后代。
关于可访问性的说明
功能之一content-visibility: auto是屏幕外内容在文档对象模型中仍然可用，因此在可访问性树中（与 不同visibility: hidden）。这意味着，可以在页面上搜索并导航到该内容，而无需等待它加载或牺牲渲染性能。
然而，另一方面，具有样式特征的标志性元素（例如display: none或visibility: hidden）也会在屏幕外出现在可访问性树中，因为浏览器在这些样式进入视口之前不会呈现这些样式。为了防止这些在可访问性树中可见，可能导致混乱，请务必添加aria-hidden="true".
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Explained in the next section. */
}
请注意，随着内容移入和移出可见性，它将根据需要开始和停止呈现。但是，这并不意味着浏览器必须一遍又一遍地渲染和重新渲染相同的内容，因为渲染工作会尽可能保存。
参考：
