发布时间：2024 年 10 月 30 日
2024 年初将 Interaction to Next Paint (INP) 引入为 Core Web Vitals 指标，这让人们对渲染性能更加关注。INP 的一部分侧重于衡量浏览器在用户发起与网页的互动后绘制下一帧所需的时间。将网站的 INP 保持在较低水平意味着，用户会觉得网站能够尽可能快速、顺畅地响应他们的互动。
同样重要的是，网页加载时需要执行的渲染工作，这可能会导致互动从一开始就延迟。不妨想方设法减少网页生命周期中这一关键阶段的工作量。CSS content-visibility 属性是实现此目标的方法之一。我们很高兴地宣布，从 2024 年 9 月开始，基准新资源已推出！
content-visibility 是一个 CSS 属性，用于指示用户代理在元素接近视口之前推迟渲染元素。对于包含许多 DOM 元素的页面来说，这样做是有好处的，因为这意味着页面的初始加载会减少启动的渲染工作。而是在用户需要看到内容之前执行工作。
content-visibility: auto 应用于分块内容区域可在初始加载时将渲染性能提升 7 倍。请阅读下文，了解详情。
如需为屏幕外元素启用此优化，请在网站的 CSS 中对它们应用 content-visibility: auto 规则：
.render-me-later {
content-visibility: auto;
}
content-visibility 按照为 CSS 包含机制中的 contain 属性定义的一些行为进行操作。CSS 封装的目标是为 DOM 树的各个部分提供隔离。这样，渲染操作就可以限定在 DOM 树的特定部分，因此只有 DOM 树的一部分会失效并重新布局。在将其应用于渲染性能时，您需要非常熟悉 contain 属性的各种值以及如何有效使用这些值。
将 content-visibility: auto 应用于元素后，这些元素会自动采用 contain 属性提供的部分属性。结果是，受影响的元素最初将以 0px 高度呈现，这实际上意味着它们不会呈现。
不过，这会产生一些副作用。例如，当用户滚动到之前未呈现的元素时，页面的滚动条可能会发生偏移并更改高度，这些元素会在用户看到它们时恰好呈现。为缓解此问题，请应用 contain-intrinsic-size 属性。
由于 content-visibility 是最近推出的 Baseline 新属性，如果用户的浏览器尚未更新为使用新属性，您可能会担心一些用户。鉴于 content-visibility 是 CSS 属性，您不应过度担心！能够理解它的浏览器就会使用它，而没有它的浏览器就不会使用。这意味着，除了从支持 content-visibility 的浏览器获得的性能优势之外，您还可以预期网页在很大程度上会保持相同的运作方式。
content-visibility 可提供附加优势。如果您可以在某些情况下使用它来减少页面加载期间的渲染工作，则应考虑使用它，以确保您的页面在最需要时有尽可能多的处理能力。现在，此实用功能已作为“基准新功能”推出，您可以随意使用它，以便用户在必要时受益于它避免的渲染工作。