A CSS property increases the speed of your page rendering several times

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.

CSS Containment

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.

content-visibility

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.

contain-intrinsic-size

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.