Jun 01, 2021 Article blog
This article was reproduced from the public number: Code Secret Garden
Once the browser has received
HTML
returned by the server, it needs to render this data as a page that the user sees, and there may be many steps before starting rendering the first element.
This process applies to the entire page, including content that is not currently visible.
So in the first screen rendering, is a large part of the time spent on the user's invisible content, in fact, this part of the data we do not need to render on the first screen.
Chrome 85
new
content-visibility: auto
is designed to solve the problem above by telling the browser to skip the layout and rendering of the element for a moment until the element scrolls to the current viewport, speeding up the initial rendering of the entire page and reducing the time it takes for users and the page to interact.
content-visibility
CSS Containement
and currently only supports
content-visibility
property in
Chromium 85
but most browsers support
CSS Containement
CSS Containment
is a specification whose primary purpose is to improve page rendering performance by ignoring some subtrees in the document during page rendering.
As we mentioned above, when the first screen is rendered, a large part of the time is spent on content that is not visible to the user, and in fact this part of the data we don't have to render on the first screen. A
s a developer, it is certainly clear whether the currently modified element is independent or affects other elements. S
o if the developer can tell the browser this information through
CSS
the browser doesn't need to think about other elements.
This capability is provided by the
contain
property provided in the
CSS Containment
module.
css contain
has four properties:
size
Its child elements are ignored when calculating the box size of the element
layout
The internal layout of an element is not affected externally, and the element and its contents do not affect the parent
style
Declarations affect the properties of both this element and its children, both within the scope of the element
paint
: The child node that declares this element does not appear outside its edge.
If an element is not visible outside the window or for other reasons, it is also guaranteed that its child nodes will not be displayed.
css contain
is a great property, but it's not easy to tell which value to pick.
Now we can apply
content-visibility
directly to achieve this effect, but the configuration is much simpler.
content-visibility
property also has multiple values, but
auto
is a property that immediately improves performance:
.my-class {
content-visibility: auto;
}
If an element has
auto
auto property, if the current element does not appear on the screen, the browser does not render it and its children;
Take a look at the example above, where rendering time increased from 232ms to 30ms with a seven-fold increase in performance after setting
content-visibility: auto
to smaller modules.
If we add the
content-visibility: auto
property to an element outside the visual area, then when the scroll bar scrolls to this element, if the element is large and has a certain height, the length of the scroll bar changes and the page may shake.
To solve this problem, you can first use
contains-intrinsic-size
to set the size of the element's natural height in advance, such as
1000px
so that the element takes up some height in advance without jitter.
That's what
W3Cschool编程狮
has learned about
a CSS property that makes your page rendering several times faster,
and I hope it will help you.