近期 CSS 工作组发布了新的 Web 规范 CSS Containment 模块。该 CSS 模块定义了 contain 属性，用于表示元素的子树以某种方式独立于页面的其他部分。该特性可以大大优化客户端页面的渲染性能，同时开发者不再需要担心因一些小的变动而引起的页面性能问题。

CSS Containment 模块规范的主要目的是，在页面渲染的过程中通过忽略文档中的某些子树来提高页面的渲染性能。Smashing Magazine（译者注：Smashing Magazine 是德国著名 Web 设计网站）的主编 Rachel Andrew 在一篇介绍这一新 Web 规范的文章中提到：

当容器的内容发生变化时，浏览器考虑到其他元素可能也会发生变化，于是就会去检查页面中所有的元素。一直以来浏览器都是这么做的，大家都习以为常了。但是从另一方面说，开发者很清楚当前修改的元素是否独立、是否影响其他元素。因此如果开发者能把这个信息通过 CSS 告诉浏览器，那么浏览器就不需要再去考虑其他元素了，这将是非常完美的事情。CSS Containment 模块中提供的 contain 属性就为我们提供了这种能力。

CSS Containment 规范定义了一个 contain  属性，该属性使我们可以设置某个 DOM 子树独立于整个页面。contain 属性可以通过五个值（ strict, content, size, layout, paint）中的某一个来规定元素以何种方式独立于文档树：

1. layout：该值表示元素的内部布局不受外部的任何影响，同时该元素以及其内容也不会影响到上级。
2. paint：该值表示元素的子级不能在该元素的范围外显示，该元素不会有任何内容溢出（或者即使溢出了，也不会被显示）。
3. size：该值表示元素盒子的大小是独立于其内容，也就是说在计算该元素盒子大小的时候是会忽略其子元素。
4. content：该值是 contain: layout paint 的简写
5. strict：该值是 contain: layout paint size 的简写

contain 属性使浏览器不必考虑整个页面区域，而只需对限定的 DOM 区域完成布局、样式、绘制、大小以及它们组合的重新计算，使浏览器在页面回流和重绘上获得明显的性能收益，这点在大型页面上尤为突出。这一优势，使得 Igalia 在基于 Chromium 实现 CSS Containment 规范的工作中得到了 Bloomberg 的大力支持。Manuel Rego Casasnovas 在 CSSconf EU 2019 的演讲中给我们提供了一个示例：一个包含超过一万单元格的页面，当其内容不断发生变化时，其渲染性能在使用了 CSS Containment 之后提升到了 4 倍。同时 Rego 也提到说，Bloomberg 之所以会大力支持 Igalia 工作的原因是：

Bloomberg 中有一些相当复杂的 UI，他们能预见到 CSS Containment 规范带来的好处。
Paul Lewis 在这篇文章中向注重性能的开发人员介绍了DOM 中的属性修改会对渲染过程中的哪些部分造成影响。另外 csstriggers 这个网站还汇总了会触发布局的属性，并按浏览器类型做了分类。

最后，除了 Safari 浏览器外，其他现代浏览器都实现了 CSS Containment 规范。

原文链接：

CSS Containment Now a Web Standard