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

Question

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

而不是使用

.card {
    content-visibility: auto;
}

为什么不使用

* {
    content-visibility: auto;
}

Answer 1

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

为什么？

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

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

如果你使用类似的东西

* {
    content-visibility: auto;
}

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

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

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

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

所以目前渲染时间为 3 秒

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

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

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

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