简介
先上一张图看性能：
当我们对一个页面进行布局时，性能瓶颈通常是 style、layout、paint。
一般情况下，浏览器会把 整个 DOM 作为 CSS 布局上下文，因此：当我们改变部分 DOM 的样式时，也会影响到其他部分，并且没有什么方式来告诉浏览器哪些内容应该在范围内哪些应该在范围外。
假设你有如下页面结构：
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>现在在 view 里面新增一些元素，会影响页面的 style、layout、paint：
<section class="view">
Home
</section>
<section class="view">
About
<div class="newly-added-element">Check me out!</div>
</section>
<section class="view">
Contact
</section>在上面的示例中，所有的**节点（whole DOM）**均被影响，这就意味着，不论元素的 style、layout、paint 是否改变，都会重新计算他们的样式和布局。
现代主流的浏览器都会做一些智能的判断，最终决定哪些需要改变，哪些不需要改变。
不过，页面布局是很复杂的，浏览器不一定能判断到所有的情况。好消息是，一个新的 CSS 属性 contain 把判断的事情交给了开发者。
兼容性
 52+ |
 ❓ |
 ❌ |
 ❌ |
 ❌ |
 40+ |
 6+ |
实用程度
★★★★
