解析CSS Containment在页面渲染优化中的作用

前端

2024-02-20 22:19:06

CSS Containment：提升页面渲染性能的利器

回顾：回流与重绘

在剖析CSS Containment的奥秘之前，我们先回顾一下两个关键概念：回流（reflow）和重绘（repaint）。

回流（reflow）

回流是指浏览器重新计算元素的位置和大小的过程。当以下情况发生时，就会触发回流：

元素的属性发生改变（例如，宽度、高度、边距、内边距、浮动等）
元素被添加或删除
浏览器窗口的大小发生变化
某些属性值被计算，例如，当使用百分比作为元素的宽度或高度时

回流是一个相对昂贵的操作，因为它需要浏览器重新计算所有受影响元素的位置和大小。

重绘（repaint）

重绘是指浏览器重新绘制元素外观的过程。当以下情况发生时，就会触发重绘：

元素的颜色或背景发生改变
元素的轮廓发生改变（例如，边框或圆角）
元素的可见性发生改变（例如，元素从隐藏变为可见）

重绘是一个相对便宜的操作，因为它只涉及到重新绘制元素的外观，而不会改变元素的位置或大小。

CSS Containment的登场

CSS Containment是一个CSS属性，它允许我们控制浏览器的回流和重绘行为。通过设置CSS Containment，我们可以将元素及其子元素的回流和重绘限制在指定的区域内。这可以显著提高页面的渲染性能，尤其是对于那些包含大量复杂元素的页面。

CSS Containment的语法

CSS Containment的语法如下：

contain: [none | strict | content]

none： 默认值。不限制回流和重绘。
strict： 将回流和重绘限制在元素及其子元素的边界内。
content： 将回流和重绘限制在元素的内容区域内（不包括元素的边框、内边距和外边距）。

CSS Containment的应用场景

CSS Containment可以应用于各种场景来提高页面的渲染性能。一些常见的应用场景包括：

复杂元素： 对于那些包含大量复杂元素的页面，使用CSS Containment可以将回流和重绘限制在指定的区域内，从而提高页面的渲染性能。
动画： 对于那些包含大量动画的页面，使用CSS Containment可以将回流和重绘限制在动画元素的边界内，从而提高页面的渲染性能。
滚动： 对于那些需要经常滚动的页面，使用CSS Containment可以将回流和重绘限制在可视区域内，从而提高页面的渲染性能。

实例演示

为了更好地理解CSS Containment的使用方法，我们来看一个实例演示。

HTML代码

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS代码

.container {
  contain: strict;
}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
}

在这个实例中，我们使用CSS Containment将.container元素及其子元素的回流和重绘限制在了.container元素的边界内。这意味着，当.container元素的子元素发生变化时，只有.container元素及其子元素会被重新计算和绘制，而页面上的其他元素不会受到影响。