Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how CSS makes page rendering speed up several times". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

After receiving the HTML returned by the server, the browser needs to render this data into the page that the user sees, and there may be a lot of steps to go through before starting to render the first element. This process applies to the entire page, including content that is currently invisible.

So in the first screen rendering, a large part of the time is spent on content that is not visible to users, in fact, we do not need to render this part of the data on the first screen.

Chrome 85's new content-visibility: auto is designed to solve the above problem by telling the browser to skip the layout and rendering of the element temporarily until the element scrolls to the current viewport, thus speeding up the initial rendering of the entire page and shortening the time it takes for users to interact with the page.

CSS Containment

Content-visibility relies on CSS Containement and currently only supports the content-visibility attribute in Chromium 85, but most browsers support CSS Containement.

CSS Containment is a specification, and its main purpose is to improve the rendering performance of the page by ignoring some subtrees in the document during page rendering.

As mentioned above, in the first screen rendering, a large part of the time is spent on content that is not visible to the user. In fact, we do not need to render this part of the data on the first screen. As a developer, it must be clear whether the currently modified elements are independent or affect other elements. So if the developer can tell the browser this information via CSS, then the browser doesn't have to think about other elements. The contain attribute provided in the CSS Containment module provides us with this capability.

Css contain has four properties in total:

Size: its child elements are ignored when calculating the box size of this element

Layout: the internal layout of the element is not affected by the outside, and the element and its contents do not affect the parent

Style: the declaration affects both the attributes of this element and its descendant elements, all within the scope of this element

Paint: declares that the descendant node of this element will not be displayed outside its edge. If an element is invisible outside the window or for some other reason, it is also guaranteed that its descendant nodes will not be displayed.

Content-visibility

Css contain is a great property, but it's not easy to tell which value to choose from. Now, we can directly apply content-visibility to achieve this effect, but the configuration is much simpler.

The content-visibility property also has multiple values, but the auto value is one that immediately improves performance:

. my-class {content-visibility: auto;}

If an element has the attribute auto, if the current element does not appear on the screen, the browser will not render it and its child elements; when the element approaches the user's visual area, the browser will lift the restriction and start rendering; this ensures that the element will be seen by the user in a timely manner.

Contain-intrinsic-size

If we add the content-visibility: auto attribute to the element outside the visual area, then when the scroll bar scrolls to the element, if the element is large and has a certain height, the length of the scroll bar will change and the page may wobble.

To solve this problem, you can first use contains-intrinsic-size to set the size of the natural height of the element in advance, such as 1000px, so that the element occupies some height in advance so that jitter does not occur.

This is the end of the content of "how CSS makes page rendering speed up several times". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.