An element that has content-visibility: auto gains layout, style and paint containment. The content-visibility property accepts several values, but auto is the one that provides immediate performance improvements. content-visibility ensures that you get the largest performance gains the browser can provide with minimal effort from you as a developer. You can play around with the values to see what works best, or you can use another CSS property called content-visibility to apply the needed containment automatically. It may be hard to figure out which containment values to use, since browser optimizations may only kick in when an appropriate set is specified. Skipping rendering work with content-visibility # This allows us to potentially skip painting the descendants if the element is offscreen. Nothing can visibly overflow the element, and if an element is off-screen or otherwise not visible, its descendants will also not be visible. paint: Paint containment ensures that the descendants of the containing box don't display outside its bounds.This allows us to potentially skip style computation for the descendants if all we want is to compute styles on other elements. style: Style containment ensures that properties which can have effects on more than just its descendants don't escape the element (e.g.This allows us to potentially skip layout of the descendants if all we want to do is lay out other boxes. layout: Layout containment means that the descendants do not affect the external layout of other boxes on the page.This means we can potentially skip layout of the descendants if all we need is the size of the element. size: Size containment on an element ensures that the element's box can be laid out without needing to examine its descendants.There are four types of CSS containment, each a potential value for the contain CSS property, which can be combined together in a space-separated list of values:
Knowing which bits of content (subtrees) contain isolated content means the browser can make optimization decisions for page rendering.
The key and overarching goal of CSS containment is to enable rendering performance improvements of web content by providing predictable isolation of a DOM subtree from the rest of the page.īasically a developer can tell a browser what parts of the page are encapsulated as a set of content, allowing the browsers to reason about the content without needing to consider state outside of the subtree. While content-visibility is only supported in Chromium 85 for now (and deemed "worth prototyping" for Firefox), the Containment Spec is supported in most modern browsers. Browser support #Ĭontent-visibility relies on primitives within the the CSS Containment Spec. In our article demo, applying content-visibility: auto to chunked content areas gives a 7x rendering performance boost on initial load. It also allows for faster interactions with the on-screen content. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility property makes the initial user load much faster. content-visibility enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS properties for improving page load performance.
Specifying the natural size of an element with contain-intrinsic-size.
Skipping rendering work with content-visibility.
0 kommentar(er)
