我可以在所有元素上使用内容可见性吗？

Question

那么，content-visibility 通过跳过不在视口中的内容来改善页面加载时间，是否有真正的原因阻止它在所有 DOM 元素中使用？

而不是使用

.card {
    content-visibility: auto;
}

为什么不用

* {
    content-visibility: auto;
}

Answer 1

我认为简短的回答是你会失去一些 'content-visibility' 的性能优势。

为什么？

正如他们所说，“世上没有免费的午餐”，所以总有交易。 content-visibility 通过不渲染不在屏幕 (info) 上的 dom 部分来提高性能，因此它将首先验证是否需要渲染该部分，然后执行渲染过程.

因此您要添加一些处理（验证）并删除其他处理（渲染）。只要您删除的内容大于您添加的内容，您就会获得性能改进。

如果你使用像

这样的东西

* {
    content-visibility: auto;
}

您基本上是在告诉浏览器在呈现之前验证所有内容。这意味着节点及其 children 将被递归验证。

让我做一个非常简单和夸大的例子来解释我的意思（这里的数字根本不是真实的）

假设您的屏幕有 3 个 .card，其中 1 个半最初是可见的，每个有 10 个 children。

假设每张卡片在 1 秒内呈现，每个节点验证需要 100 毫秒。

因此当前渲染时间为 3 秒

将 content-visibility: auto; 应用于 .card 将导致 3 次验证（+300 毫秒）并且其中一张卡片不会被渲染（-1 秒），因此总渲染时间为 2.3 秒

将 content-visibility: auto; 应用到 * 将导致 30 次验证（+3000 毫秒）并且不会渲染一半卡片（-1.5 秒），因此总渲染时间为4.5秒

因此 content-visibility 最适合内部渲染成本高昂的元素块。

浏览器未来可能会进行一些优化；我还没有找到有关优化的信息，但目前该功能还很新，这样使用它可能会导致问题。

Answer 2

使用内容可见性的要点是性能。它有助于加快页面加载速度，因为浏览器能够延迟呈现不在用户视口中的元素，直到用户滚动到它们为止。通过使用这个，

* {
    content-visibility: auto;
}

您基本上是在告诉浏览器在呈现之前验证所有内容。这意味着将递归验证节点及其子节点。如果您对特定部分或元素使用内容可见性，

section{
content-visibility:auto;
}

浏览器只呈现该特定元素或部分。它将节省浏览器的渲染时间。

Can I use content-visibility on all elements?