The CSS Working Group recently released the CSS Containment Module Level 1 as a new web standard. This CSS module specifies the contain property, which can be used to indicate elements whose subtree is independent of the rest of the page in some way. This independence can then be used by browsers to provide much stronger optimizations when rendering a page, while still allowing authors to be sure that their page will not accidentally fall into a slow code path due to a harmless change.

The main goal of the CSS Containment standard is to improve the rendering performance of web pages by ignoring certain document subtrees in certain parts of the page rendering process. Rachel Andrew, editor-in-chief of Smashing Magazine, explains in an article on the new web standard

When the content of our box is modified, the browser must consider that one of the elements may have changed. Browsers are generally pretty good at handling this, as it’s a common thing. That said, as a developer, you will know if each of the components is independent, and a change to one doesn’t affect the others, so it would be nice if you could let the browser know through your CSS. This is what CSS property contains gives you

The module specification specifies a contain property to allow predictable isolation of a subtree from the rest of the page. The property contain indicates that an item and its contents are independent of the rest of the document tree in a way that is specified by choosing one of five values: strict, content, size, layout and paint

The value layout of the property contains indicates that the internal layout of the element is not affected by anything outside the element and that the content of the element cannot have any effect on ancestors. The value paint indicates that the element’s descendants cannot be displayed outside of its bounds and that nothing will overflow from that element (or if it does, it will not be visible). The value size means that the element’s dimensions are independent of the element’s content. This means that the size of the element area can be calculated independently of the element’s children. Value content is a shortcut for contain: layout paint, while value strict a shortcut for layout paint size.

The property contain allows the browser to recalculate the layout, style, rendering, size, or any combination of these for a limited area of ​​the DOM and not for the entire page, resulting in obvious reflow and refreshing benefits. especially in long pages. The performance gains are large enough that Bloomberg can support Igalia’s work on implementing CSS Containment in Chromium. Manuel Rego Casasnovas provided in his speech at CSSconf EU 2019 an example user interface with more than 10,000 cells whose text content is constantly changing and which could be rendered 4x faster. Manuel Rego Casasnovas explained Bloomberg’s motivation

Bloomberg has some pretty complex user interfaces and [they get] benefits from using CSS Containment for some of them.

Paul Lewis described to performance-conscious developers that parts of the rendering process are affected by changes to the DOM property. The CSS triggers site also gathers the properties that trigger a layout, depending on the browser used

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here