CSS 新特性 contain：管控页面的重绘与重排

CSS 新特性 contain：管控页面的重绘与重排

在介绍新的 CSS 属性 contain 之前，读者首先需要了解什么是页面的重绘与重排。

重绘（Repaint）： 当元素的外观发生改变，但其几何尺寸保持不变时，浏览器会对该元素进行重绘。重绘通常发生在以下情况：

• 改变元素的颜色
• 改变元素的背景颜色
• 改变元素的边框
• 改变元素的阴影

重排（Reflow）： 当元素的几何尺寸发生改变，或其父元素的几何尺寸发生改变时，浏览器会对该元素及其后代元素进行重排。重排通常发生在以下情况：

• 添加或删除元素
• 改变元素的大小
• 改变元素的位置
• 改变元素的浮动属性
• 改变元素的显示属性

重绘和重排都是浏览器渲染页面时必须执行的操作。然而，它们也是浏览器非常耗时的操作。因此，减少重绘和重排的次数可以显著提高页面的性能。

CSS 新特性 contain 可以用来控制页面元素的重绘和重排。contain 属性的值可以是以下几个值之一：

• none： 元素不受 contain 属性的影响。
• layout： 元素的几何尺寸发生改变时，浏览器只会对该元素进行重排，而不会对其子元素进行重排。
• paint： 元素的外观发生改变时，浏览器只会对该元素进行重绘，而不会对其子元素进行重绘。
• content： 元素的几何尺寸或外观发生改变时，浏览器只会对该元素进行重排或重绘，而不会对其子元素进行重排或重绘。

contain 属性可以用来优化页面的性能。例如，我们可以将 contain 属性设置为 layout，以防止元素的几何尺寸发生改变时对其实现重排。这可以显著提高页面的性能，尤其是当页面中有大量元素时。

contain 属性是一个非常有用的 CSS 新特性。它可以用来优化页面的性能，提高用户体验。

如何使用 contain 属性？

contain 属性可以应用于任何 HTML 元素。要使用 contain 属性，只需在元素的样式中添加以下代码：

contain: none | layout | paint | content;

例如，以下代码将使元素及其子元素不受 contain 属性的影响：

.element {
  contain: none;
}

以下代码将使元素的几何尺寸发生改变时，浏览器只会对该元素进行重排，而不会对其子元素进行重排：

.element {
  contain: layout;
}

以下代码将使元素的外观发生改变时，浏览器只会对该元素进行重绘，而不会对其子元素进行重绘：

.element {
  contain: paint;
}

以下代码将使元素的几何尺寸或外观发生改变时，浏览器只会对该元素进行重排或重绘，而不会对其子元素进行重排或重绘：

.element {
  contain: content;
}

contain 属性的兼容性

contain 属性在所有现代浏览器中都得到支持。

结论

contain 属性是一个非常有用的 CSS 新特性。它可以用来优化页面的性能，提高用户体验。建议大家在项目中积极使用 contain 属性，以提高页面的性能。