CSS Containment属性浅用
网页开发中，性能优化一直是一个永恒的主题。浏览器的重绘（repaint）和回流（reflow）尤其是页面性能的常见杀手，因为它们往往需要大量的计算资源。幸运的是，CSS Containment属性为开发者提供了一种新的优化手段。本文将详细介绍CSS Containment属性的概念、用法以及如何通过它来提高页面的渲染性能。
CSS Containment属性简介
CSS Containment属性允许开发者告诉浏览器某个元素的布局、样式或尺寸是独立于文档流的其他部分。这意味着，当这个元素或其内部的子元素发生变化时，浏览器可以仅重新计算和渲染这个独立的部分，而不是整个页面，从而显著提高渲染性能。
使用场景
CSS Containment适用于以下几种场景：
- 独立组件： 如果页面中有独立的UI组件，其内部状态变化不影响页面的其他部分，可以使用Containment来优化。
- 列表和网格： 对于大量重复内容的列表和网格布局，应用Containment可以减少不必要的计算。
- 动画元素： 对于含有动画的元素，尤其是那些仅改变自身属性（如transform）的动画，使用Containment可以避免影响页面的其他部分。
属性值
CSS Containment属性提供了四个值：
content：表示元素的内容是独立的，不影响外部布局。layout：表示元素的内部布局不影响外部布局。paint：表示元素的绘制不会影响外部元素。size：表示元素的尺寸不受外部影响，也不影响外部元素。
最强的containment设置是contain: strict，它相当于同时应用了layout、paint和size。
示例
假设我们有一个动态加载内容的卡片，我们可以这样应用Containment来优化性能：
<div class="card" style="contain: content;">
<!-- 动态加载的内容 -->
</div>
这里，我们通过contain: content告诉浏览器，.card内部的任何变化都不会影响到外部布局，浏览器因此可以优化渲染性能。
对于一个动画元素：
.animated-element {
contain: paint;
animation: slideIn 1s infinite;
}
由于设置了contain: paint，浏览器知道这个元素的动画只影响元素本身的绘制，而不会影响到外部元素，因此可以针对性地优化。
注意事项
- 应用CSS Containment时，需要确保真的理解了它的含义和后果。错误的使用可能会导致页面布局或样式出现意外的结果。
- 并非所有浏览器都支持CSS Containment属性。在使用之前，最好查阅Can I use来了解当前的浏览器支持情况。
知道你们不会去查，我直接贴在这里了，怎么样，点个赞？
反面例子
下面列举一些反面的例子，以求更好的理解这个属性： 使用CSS Containment属性时，如果不当心或误解了它的作用，可能会导致一些不希望发生的副作用。以下是一些典型的错误使用场景，也即“反面例子”：
1. 过度隔离导致的布局问题
.container {
contain: layout;
}
如果.container内部的元素需要影响到外部布局（比如弹出菜单超出容器边界），设置contain: layout会阻止这种布局上的影响，导致布局破坏或弹出菜单无法正确显示。
2. 忽略内容变化引起的滚动条问题
.scrollable-area {
contain: paint;
overflow: auto;
}
在这个例子中，假设.scrollable-area是一个滚动区域，通过contain: paint，我们告诉浏览器只需考虑该元素的绘制情况，忽略内部布局变化。如果内部内容动态变化导致高度增加，理论上会需要滚动条，但由于布局变化被隔离，滚动条可能不会出现，导致内容无法完全访问。
3. 不适当的尺寸隔离
.fixed-size {
contain: size;
width: 100px;
height: 100px;
}
如果.fixed-size元素内部的内容动态变化，可能需要更多空间来展示，但由于设置了contain: size，其尺寸变化不会影响到外部布局，也不会根据内容调整，可能导致内容被截断或溢出。
4. 错误使用contain: strict影响功能
.interactive-widget {
contain: strict;
}
虽然contain: strict是最强的隔离级别，但在需要与外部有布局或样式交互的元素上使用它可能会导致问题。例如，.interactive-widget可能是一个需要根据外部尺寸调整自己位置的小工具，或者需要在外部显示弹出层，使用contain: strict会限制这些功能的实现。
结论
CSS Containment属性提供了一种有效的机制，通过告知浏览器页面的哪些部分是独立的，从而减少不必要的重绘和回流，提高页面渲染性能。正确地应用这一属性，可以在不牺牲用户体验的情况下，显著提升Web应用的性能。在设计和开发Web应用时，合理利用CSS Containment将是提升性能的关键手段之一。