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

Question

So, with content-visibility improving the page load time by skipping content that are not in the viewport, is there a real reason preventing its usage across all DOM elements?

Rather than use

.card {
    content-visibility: auto;
}

Why not use

* {
    content-visibility: auto;
}

Answer 1

I think the short answer is that you would loose a little of the performance benefits of 'content-visibility'.

Why?

as they say, "There ain't no such thing as a free lunch" , so there is always a trade of. content-visibility improves performance by not rendering parts of the dom that are not on screen (info) , so it will firts validate if the part needs to be rendered or not, and then perform the rendering process.

So you are adding some processing (the validation) and removing other (the rendering). You are gonna have performance improvement as long as what you are removing is greater than what you are adding.

If you use something like

* {
    content-visibility: auto;
}

You are basically telling the browser to validate everything before rendering. This means that the nodes, and their children recursively will be validated.

Let me do a brief extremely over simplificated and over exagerated example to explain what I mean (numbers here are not real at all)

Lets say that you have a screen with three.card of which 1 and a half are visible initially, each has 10 children.

Lets say and each card renders in 1 second and each node validation takes lets say 100ms.

So currently the render time would be 3 seconds

Applying content-visibility: auto; to the .card would result in 3 validations (+300ms) and one of the cards would not be rendered (-1 second) so the total render time would be 2.3 seconds

Applying content-visibility: auto; to * would result in 30 validations (+3000ms) and one and a half of the cards would not be rendered (-1.5 seconds) so the total render time would be 4.5 seconds

So content-visibility works best for blocks of elements that are expensive to render on the inside.

Its possible that the browsers will implement some optimizations in the future; I have not found information about optimizations, but for now as the feature is quite new, using it like that may cause issues.

Answer 2

The main point of using content-visibility is performance. It can help to speed up page load because the browser is able to defer rendering elements that are not in the user's viewport until the user scrolls to them. By using this,

* {
    content-visibility: auto;
}

You are basically telling the browser to validate everything before rendering. This means that the nodes, and their children recursively will be validated. If you use a content-visibility for a particular section or element,

section{
content-visibility:auto;
}

The browser only renders that particular element or section. it will saves the browser's rendering time.