CSS新特性contain，控制页面的重绘与重排

contain 为何？

这个 contain 属性的主要目的是隔离指定内容的样式、布局和渲染。开发人员可以使用这个 contain 属性来限制指定的DOM元素和它的子元素同页面上其它内容的联系；我们可以把它看做一个iframe。跟iframe很相似，它能建立起一个边界，产生一个新的根布局；保证了它和它的子元素的DOM变化不会触发父元素重新布局、渲染等。  

开发人员可以用这个 contain 属性声明一个元素和它的子元素是——尽可能的——和页面上的其它元素保持独立。 

 

none | strict | layout | style | paint | size | contain

这个 contain 属性可以有7种不同的值。

• none 无
• layout 开启布局限制
• style 开启样式限制
• paint 开启渲染限制
• size 开启size限制
• content 开启除了size外的所有限制
• strict开启 layout, style 和 paint 三种限制组合

 

contain 使用场景举例

我们已经知道了，使用这个 contain 属性可以将一个元素标志为和页面上其它元素是相对独立的元素。为了说明这个属性的作用，下面举几个使用例子：

页面小饰件(widgets)

通常在页面上添加第三方小饰件时，我们几乎对它们没有什么太多的控制，比如分享工具，它们可能会因为具有相当耗资源的布局、样式、渲染操作等大幅度的降低整个页面的执行效率。为了将它们同我们的网站隔离开来，使用 contain: strict; 将第三方的小饰件同页面上的其它内容隔离开来。

屏幕外的内容

如果你有一个导航栏或其它类似的东西并不在屏幕可现实范围内出现，浏览器同样会为这些不可见的元素进行渲染。通过使用 contain: paint; 浏览器就会忽略渲染这些屏幕外不可见的元素，从而能更快的渲染其它内容。

豌豆资源搜索网站 https://55wd.com 广州vi设计公司http://www.maiqicn.com

计算容器尺寸

我在文字开头提到过这个问题，使用 contain: strict; 可以 免去很多关于容器尺寸控制的问题。比如，子元素的内容会影响容器的大小，使用 contain 属性就可以避免这样的问题产生。

 

为什么浏览器不能自动的实现 contain 的功能

浏览器已经尽可能的在页面下做了最大的优化，但每个浏览器引擎的实现方法并不尽相同。而 contain 属性可以提供一种标准的方式让开发人员告诉 浏览器 某些方面可以这样优化，哪些不能优化。

 

什么时候应该使用contain

如果你的页面很简单，没有复杂的DOM节点和小饰件(widgets)，那就没必要考虑使用这种css的contain技术。而如果你开发的页面非常复杂，那么，这个css的contain技术可以帮助你优化页面的性能。而对于第三方的小饰件，始终使用contain: strict;是很好的习惯，它可以保护你的页面不受它们的干扰而出现性能问题。

 

contain使用

{
  /* No layout containment. */
  contain: none;
  /* Turn on containment for layout, style, paint, and size. */
  contain: strict;
  /* Turn on containment for layout, style, and paint. */
  contain: content;
  /* Turn on size containment for an element. */
  contain: size;
  /* Turn on layout containment for an element. */
  contain: layout;
  /* Turn on style containment for an element. */
  contain: style;
  /* Turn on paint containment for an element. */
  contain: paint;
}