近期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 规范。
原文链接：
CSS Containment Now a Web Standard
Java 避坑指南：Java 高手笔记代码篇
本迷你书包括 86 个业务开发中常见踩坑点。每一个知识点都相当的实用，是程序员业务开发中的必备避坑指南...
评论