When making a web app, or even a complex site, a key performance challenge is limiting the effects of styles, layout and paint. Oftentimes the entirety of the DOM is considered “in scope” for computation work, which can mean that attempting a self-contained “view” in a web app can prove tricky: changes in one part of the DOM can affect other parts, and there’s no way to tell the browser what should be in or out of scope.
[…]
The good news is that modern browsers are getting really smart about limiting the scope of styles, layout, and paint work automatically, meaning that things are getting faster without you having to do anything.
But the even better news is that there’s a new CSS property that hands scope controls over to developers: Containment.
The contain property
CSS Containment is a new property, with the keyword contain, which supports four values:
layoutpaintsizestyleEach of these values allows you to limit how much rendering work the browser needs to do.
Note that this is currently only supported in Blink browsers. Firefox has a partial implementation behind a flag, and Edge is under consideration.