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

CSS contain 属性允许开发者声明当前元素和它的内容尽可能的独立于 DOM 树的其他部分。这使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时，只影响到有限的 DOM 区域，而不是整个页面，可以有效改善性能。

这个属性在包含大量独立组件的页面非常实用，它可以防止某个小部件的 CSS 规则改变引发页面的重绘。

语法

/* 关键词值 */
contain: none;
contain: strict;
contain: content;
contain: size;
contain: layout;
contain: paint;

/* 支持指定多个关键词 */
contain: size paint;
contain: size layout paint;

/* 全局值 */
contain: inherit;
contain: initial;
contain: unset;

属性值
none
表示元素将正常渲染，没有包含规则。

strict
表示除了 style 外的所有的包含规则应用于这个元素。
等价于 contain: size layout paint。

content
表示这个元素上有除了 size 和 style 外的所有包含规则。等价于 contain: layout paint。

size
表示这个元素的尺寸计算不依赖于它的子孙元素的尺寸。

layout
表示元素外部无法影响元素内部的布局，反之亦然。

style
表示那些同时会影响这个元素和其子孙元素的属性，都在这个元素的包含范围内。

paint
表示这个元素的子节点不会在它边缘外显示。如果一个元素在视窗外或因其他原因导致不可见，那么用户代理就会忽略渲染这些元素，从而能更快的渲染其它内容。