preface

In a page, if the geometry of an element on the page changes, it will cause the page to be rearranged and redrawn. If a page element or structure is very simple, then we can almost ignore the time spent redrawing due to rearrangement. But in a complex page, we can reduce the rearrangement and redrawing time to optimize the rendering.

CSS Containment containers allow us to isolate a part of the tree in the page to tell the browser that nothing inside the tree will affect anything outside of it. Therefore, CSS Containment can be used to optimize rendering and improve performance in complex pages.

The basic use

<body>
 <h1>My blog</h1>
 <button>Change the content of article</button>
 <button>Change content outside article</button>
 <article>
   <h2>Heading of a nice article</h2>
   <p>Content here.</p>
 </article>
 <article>
   <h2>Another heading of another article</h2>
   <p>More content here.</p>
 </article>
</body>
Copy the code

Let’s insert 50,000 nodes into each article to see how long it takes to render the page.

The Painting took 51ms for the first rendering, and we added another 50000 nodes to see the overall Painting time.

< div style = “color: RGB (51, 51, 51);

article {
  contain: paint;
}
Copy the code

After you add the above attributes to an article, the browser will ignore out-of-screen elements of the article, meaning that elements that are not visible to the browser will not be painted

Why did the painting only take 16ms, so we added 50,000 nodes at once, but the visible area of the screen could not show that many nodes. Therefore, nodes that are off screen will not be painted

We added another 50,000 nodes, and presumably the painting time should be close to 0.

As expected, 1ms in the figure should be the time to paint after the button is clicked.

Unlike Overflow :hidden, first overflow needs to specify the height of the element, and second, despite overflow, it also causes painting.

When we click the Add button, the browser does the following

  • Computing styles (figuring out the geometry of each element)

  • Rearrange (arrange positions according to geometric information)

  • Update hierarchy tree

  • Start drawing

  • Composite layer

We can see that most of the rendering time is spent in the styling and rearrangement phases. Therefore, if we can optimize the above two phases, we will greatly improve the performance of the page.

Contain also has other features that can help you improve performance.

We’ve already covered paint above.

Let’s take a look at how the size attribute affects page rendering.

article {
  contain: size;
}
Copy the code

Normally, if we don’t set the height of the parent element, then if we add a child element to it, the height of the parent element is affected by the child element.

Add folder: size; Attribute to keep the parent element unaffected by the child element.

Contain: layout;

This property means that external elements do not affect the layout of internal elements.

For a simple example, let’s say we create a mask on the page that hides some elements in the container.

Contain: Layout; after

We found that the content would not be blocked.

As to contain: style; We can leave it at that because the property has been removed for the time being.

On top of that, we have strict and content which are all combinations of base properties.

Contain: strict = contain: size layout paint

Contain: content = contain: layout paint

compatibility

Support is around 75%, and we can see that IE and Safari are not supported so far. You can use ~ as appropriate