我可以在所有元素上使用content-visibility吗？

Question

那么，使用内容可见性来跳过不在视口中的内容以提高页面加载时间，是否有真正的理由阻止其在所有DOM元素上的使用？

与其使用...

.card {
    content-visibility: auto;
}

为什么不使用

* {
    content-visibility: auto;
}

- Nidhin Joseph

Answer 1

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

为什么呢？

正如他们所说，“天下没有免费的午餐”，因此总是有一个权衡。"content-visibility"通过不渲染屏幕外的dom部分来提高性能(信息), 因此它将首先验证该部分是否需要被渲染，然后执行渲染过程。

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

如果您使用类似于...

* {
    content-visibility: auto;
}

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

让我举一个简单的、极度夸张的例子来解释我的意思（这里的数字完全不真实）。

假设你有一个屏幕，上面有三个.card，其中1个半最初是可见的，每个.card都有10个子节点。

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

目前，渲染时间将为3秒。

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

将content-visibility: auto;应用于*将导致30次验证（+3000ms），其中一半的卡片不会被渲染（-1.5秒），因此总渲染时间将为4.5秒。

因此，content-visibility最适用于内部渲染昂贵的元素块。

未来可能会有浏览器实现一些优化；我没有找到关于优化的信息，但现在由于该功能相当新，使用它可能会导致问题。

- Daniel Cruz

Answer 2

使用content-visibility的主要目的是提高性能。它可以帮助加速页面加载，因为浏览器能够推迟渲染不在用户视口中的元素，直到用户滚动到它们。通过使用这个功能，您可以更好地控制页面的渲染，从而提高用户体验和性能。

* {
    content-visibility: auto;
}

你基本上是在告诉浏览器在渲染之前验证所有内容。这意味着节点及其子节点将被递归验证。 如果你对特定的部分或元素使用content-visibility属性，

section{
content-visibility:auto;
}

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

- srinithi R