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;
}
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.