CSS `Containment` (包含性) 属性 (`contain`)：隔离渲染范围与性能提升 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！我是你们的老朋友，今天咱们来聊聊CSS里一个有点神秘，但又非常实用的家伙——contain属性，中文名叫“包含性”。

这玩意儿就像是给你的网页组件们画了个楚河汉界，隔离了渲染范围，提升了性能。听起来是不是有点玄乎？别怕，咱们一步一步来，保证你听完之后，也能用它来秀一把操作。

第一章：啥是Contain？ Contain能干啥？

想象一下，你家的厨房，如果做饭的时候油烟满屋乱窜，那整个屋子都得跟着遭殃，收拾起来费劲死了。contain属性就像是给厨房装了个抽油烟机，把油烟限制在厨房里，不让它污染到其他房间。

在CSS里，contain属性的作用就是告诉浏览器：“嘿，这个元素，我打算把它当成一个独立的个体来看待，它的改变尽量不要影响到其他元素，其他元素的改变也尽量不要影响到它。”

那具体能干啥呢？主要有以下几个方面：

性能提升： 这是contain最主要的优势。通过限制渲染范围，浏览器可以更智能地进行渲染优化。比如，如果一个元素设置了contain: layout;，那么当这个元素内部发生变化时，浏览器只需要重新计算这个元素的布局，而不需要重新计算整个页面的布局。
简化调试： 当你发现页面渲染出现问题时，如果使用了contain属性，你可以更容易地定位到问题所在。因为contain属性将页面分割成一个个独立的区域，你可以逐个检查这些区域，而不需要考虑整个页面的相互影响。
提高可维护性： 将页面分割成独立的组件，可以提高代码的可维护性。你可以更容易地修改和更新单个组件，而不用担心会影响到其他组件。

第二章：Contain的五大金刚： Contain属性值详解

contain属性有几个常用的取值，咱们可以称之为“五大金刚”，分别是：

none： 这是默认值，表示不应用任何包含性。也就是说，元素的渲染行为和没有设置contain属性时完全一样。
```
.element {
  contain: none; /* 默认值，啥也不干 */
}
```
layout： 表示对元素的布局进行包含。这意味着元素的布局不会影响到页面上的其他元素，反之亦然。如果元素的尺寸或位置发生变化，浏览器只需要重新计算该元素的布局，而不需要重新计算整个页面的布局。
```
.element {
  contain: layout; /* 限制布局 */
}
```
paint： 表示对元素的绘制进行包含。这意味着元素的绘制不会超出元素的边界，也不会影响到页面上的其他元素。如果元素的样式发生变化，浏览器只需要重新绘制该元素，而不需要重新绘制页面上的其他元素。
```
.element {
  contain: paint; /* 限制绘制 */
}
```
size： 表示对元素的尺寸进行包含。这意味着元素的大小是完全独立的，不会受到其内容的影响。如果你明确知道元素的大小，可以使用这个属性。
```
.element {
  contain: size; /* 限制尺寸 */
  width: 200px; /* 必须指定宽度或高度，否则无效 */
  height: 100px;
}
```
需要注意的是，使用了 contain: size，必须同时指定元素的 width 和 height，否则 contain: size 将不起作用。
content： 这是layout和paint的组合，相当于contain: layout paint;。它表示对元素的布局和绘制都进行包含。
```
.element {
  contain: content; /* 限制布局和绘制 */
}
```
strict： 这是size、layout和paint的组合，相当于contain: size layout paint;。它表示对元素的尺寸、布局和绘制都进行包含。
```
.element {
  contain: strict; /* 限制尺寸、布局和绘制 */
  width: 200px; /* 必须指定宽度或高度，否则无效 */
  height: 100px;
}
```
同样，使用了 contain: strict，必须同时指定元素的 width 和 height，否则 contain: strict 将不起作用。

为了方便大家理解，咱们用表格来总结一下：

属性值	作用	备注
`none`	不应用任何包含性	默认值
`layout`	限制布局	元素的布局不会影响到其他元素，反之亦然
`paint`	限制绘制	元素的绘制不会超出边界，也不会影响到其他元素
`size`	限制尺寸	元素的大小是独立的，不受内容影响
`content`	限制布局和绘制	相当于 `contain: layout paint;`
`strict`	限制尺寸、布局和绘制	相当于 `contain: size layout paint;`，使用时必须指定 width 和 height，否则无效

第三章：实战演练：Contain的应用场景

光说不练假把式，咱们来看几个实际的例子，看看contain属性在哪些场景下能发挥作用。

场景一：大型列表优化

假设你有一个非常长的列表，里面的每个列表项都包含复杂的HTML结构和样式。如果列表项的内容发生变化，浏览器可能需要重新渲染整个列表，这会导致性能问题。

这时候，你就可以使用contain属性来优化列表的渲染。给每个列表项设置contain: content;，这样当某个列表项的内容发生变化时，浏览器只需要重新渲染该列表项，而不需要重新渲染整个列表。

<ul class="long-list">
  <li class="list-item">
    <!-- 复杂的HTML结构和样式 -->
  </li>
  <li class="list-item">
    <!-- 复杂的HTML结构和样式 -->
  </li>
  <!-- ... 很多列表项 ... -->
</ul>

<style>
.list-item {
  contain: content; /* 限制布局和绘制 */
}
</style>

场景二：第三方组件隔离

有时候，你可能会引入一些第三方的组件，这些组件的样式可能会和你的页面样式冲突。为了避免这种情况，你可以给第三方组件设置contain: strict;，这样就可以将组件的样式完全隔离起来，防止样式冲突。

<div class="third-party-component">
  <!-- 第三方组件的代码 -->
</div>

<style>
.third-party-component {
  contain: strict; /* 限制尺寸、布局和绘制，完全隔离 */
  width: 300px; /* 必须指定宽度 */
  height: 200px; /* 必须指定高度 */
}
</style>

场景三：动画性能优化

如果你的页面中有很多动画，可能会导致性能问题。你可以使用contain: paint;来优化动画的性能。给需要做动画的元素设置contain: paint;，这样当元素进行动画时，浏览器只需要重新绘制该元素，而不需要重新绘制页面上的其他元素。

<div class="animated-element">
  <!-- 需要做动画的内容 -->
</div>

<style>
.animated-element {
  contain: paint; /* 限制绘制 */
  animation: move 2s infinite;
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}
</style>

第四章：Contain的注意事项：别踩坑里了！

虽然contain属性很强大，但是使用的时候也需要注意一些问题，不然可能会踩坑里。

contain: size和contain: strict必须指定尺寸： 如果使用了contain: size或contain: strict，一定要同时指定元素的width和height，否则contain属性将不起作用。
过度使用contain可能会适得其反： 虽然contain属性可以提升性能，但是过度使用可能会导致性能下降。因为浏览器需要为每个设置了contain属性的元素创建一个独立的渲染上下文，这会增加浏览器的负担。所以，只有在确实需要的时候才使用contain属性。
contain属性可能会影响一些高级CSS特性： 比如position: fixed、position: sticky等，这些特性可能会受到contain属性的影响。所以，在使用这些特性的时候，需要仔细测试，确保它们能够正常工作。
contain会影响transform-style: preserve-3d： 如果一个元素设置了contain: paint，那么该元素及其子元素的 transform-style: preserve-3d 可能会失效。这是一个已知的限制，需要注意。

第五章：Contain的兼容性：别白忙活一场！

在使用contain属性之前，一定要考虑它的兼容性。目前，contain属性的兼容性还不是很好，一些老版本的浏览器可能不支持。

为了确保你的代码在所有浏览器上都能正常工作，你可以使用一些polyfill或fallback方案。比如，你可以使用Modernizr来检测浏览器是否支持contain属性，如果不支持，可以使用一些JavaScript代码来模拟contain属性的效果。

当然，最好的办法还是升级你的浏览器，拥抱最新的Web技术。

第六章：Contain的未来：前途一片光明！

虽然contain属性的兼容性还不是很好，但是它的未来一片光明。随着浏览器厂商对contain属性的支持越来越好，它将会成为Web开发中不可或缺的一部分。

我们可以预见，在未来的Web开发中，contain属性将会被广泛应用于各种场景，比如大型单页应用、复杂的Web游戏、高性能的Web动画等等。

所以，现在就开始学习和使用contain属性，绝对是一个明智的选择。

总结：Contain，让你的网页飞起来！

总而言之，contain属性是一个非常强大的CSS属性，它可以帮助你隔离渲染范围，提升性能，简化调试，提高可维护性。虽然它的兼容性还不是很好，但是它的未来一片光明。

希望通过今天的讲解，大家能够对contain属性有一个更深入的了解，并且能够在实际的Web开发中灵活运用它，让你的网页飞起来！

好了，今天的讲座就到这里，谢谢大家的观看！咱们下期再见！

发表回复 取消回复

发表回复取消回复