CSS Containment规范正式发布
近期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）中的某一个来规定元素以何种方式独立于文档树：
- layout：该值表示元素的内部布局不受外部的任何影响，同时该元素以及其内容也不会影响到上级。
- paint：该值表示元素的子级不能在该元素的范围外显示，该元素不会有任何内容溢出（或者即使溢出了，也不会被显示）。
- size：该值表示元素盒子的大小是独立于其内容，也就是说在计算该元素盒子大小的时候是会忽略其子元素。
- content：该值是contain: layout paint的简写
- 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规范。
原文链接：
- 发表于:
- 本文为 InfoQ 中文站特供稿件
- 首发地址：https://www.infoq.cn/article/lBECNlBbgd81U01aQUMF
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
