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

Question

那么，内容可见性通过跳过不在视口中的内容来缩短页面加载时间，是否有真正的原因阻止其在所有 DOM 元素中使用？

而不是使用

.card {
    content-visibility: auto;
}

为什么不使用

* {
    content-visibility: auto;
}

Answer 1

我认为简短的回答是你会失去一些“内容可见性”的性能优势。

为什么？

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

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

如果你使用类似的东西

* {
    content-visibility: auto;
}

您基本上是在告诉浏览器在渲染之前验证所有内容。 这意味着将递归地验证节点及其子节点。

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

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

假设每张卡在 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;
}

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