使用 CSS Contain 属性帮助浏览器进行优化

总篇102篇 2020年 第26篇

原文地址：

https://www.smashingmagazine.com/2019/12/browsers-containment-css-contain-property/

总括：CSS Contain属性为您提供了一种向浏览器解释布局的方法，因此可以利用该属性进行性能优化。但是，在布局方面会带来一些副作用。

在本文中，我将介绍一个刚刚纳入 W3C 建议书的 CSS 规范。CSS 包含（Containment ）规范定义了一个属性： contain ，它可以帮助您向浏览器解释布局的哪些部分是独立的，并且如果布局的其他部分发生更改，则独立的部分无需重新计算。

尽管此属性出于性能优化的原因而存在，但它也可能影响页面的布局。因此，在本文中，我将解释  contain  属性的不同类型值的作用，同时还说明如果将 contain 应用于网站中的元素时需要注意的事项。

布局重新计算问题

如果您构建的网页非常简单，使用 JavaScript 加载后不会再动态添加或更改元素，则无需担心 CSS Containment 解决的问题。当页面加载时，浏览器只需要计算一次布局。

当您想在页面中添加元素而不需要用户重新加载时，Containment 会变得很有用。在我的示例中，我创建了一个大的事件清单。如果单击按钮，将修改第一个事件，添加一个浮动元素，然后更改文本：

（请参阅CodePen上的初始示例）

当我们更改盒子中的内容时，浏览器必须考虑到其他元素都可能已更改。浏览器通常很擅长处理此问题，因为这是很常见的事情。就是说，作为开发人员，您将知道每个组件是否独立，并且对一个组件的更改会不会影响其他组件，因此，如果可以让浏览器通过 CSS 知道这一点，那就太好了。这就是收容措施（containment）和 CSS contain 属性所提供的功能。

收容措施有何帮助？

HTML 文档是树状结构，使用 DevTools 检查任何元素时都可以看到。在上面的示例中， 我选定了一个想要通过 JavaScript 更改的项，然后对它的内部进行了一些更改。 （这意味着我只更改该列表项的子树中的内容。）

在 DevTools 中检查列表项

将  contain  属性应用于元素，会告诉浏览器：更改的范围仅限于该元素的子树，以便浏览器可以进行任何可能的优化——知道该元素之外的其他内容都不会更改，这是安全的。 确切的说，一个浏览器能够做什么取决于引擎 。CSS 属性只是为您（作为此布局的开发人员和专家）提供了一个使浏览器了解的机会。

在许多情况下，您可以放心地使用该  contain  属性，但是，不同的值会带来一些潜在的副作用，在将该属性添加到站点中的元素之前，需要花时间去理解一下。

使用收容措施

contain  属性可以设置三种不同类型的容纳方式：

• layout

• paint

• size

注意 ：2级规范中有一个  style  值。它已从级别1中删除，因此未出现在建议书中，并且未在 Firefox 中实现。

LAYOUT

布局控制带来的好处最大。要打开布局限制，请使用以下代码段：

.item {
  contain:layout;
}

启用布局限制后，浏览器将知道元素外部的任何内容都不会影响内部布局，并且元素内部的任何内容都无法更改元素外部的布局。这意味着浏览器可以针对这种情况 进行任何可能的优化 。

启用布局限制后，还会发生一些其他事情。所有这些确保了使用布局控制的元素（下面称该元素为盒子）和内容独立于树的其余部分。

该盒建立一个 独立的格式化上下文 。这样可以确保盒子的内容留在盒子中——特别是浮动将被包含在内，边距不会在盒子中塌陷。这与我在文章“ 了解 CSS 布局和块格式化上下文 ” 中说明的使用 display: flow-root 的行为相同。如果某个浮动控件可能会溢出盒子的范围，导致后面的文本在浮动控件周围流动，则可能是该元素 正在 更改其外部事物的布局，从而导致该元素不能成为 containment 的理想对象 。

包含框（containing box）用作任何绝对定位或固定定位后代的包含块。这意味着它将像在相对定位（ position: relative ）的盒子上使用 contain: layout 一样 。

该框（box）还创建一个 堆栈上下文 。因此 z-index 将在此元素上工作，它将基于此新上下文堆叠子元素 。

如果我们看一下 示例，这次使用 contain: layout ，您可以看到，在引入 float 元素时，它不再溢出框的底部。这是我们的新的“块格式化上下文”，其中包含浮动元素 。

使用 contains：layout 包含浮动元素（请参见 CodePen 上的布局包含示例）

PAINT

要使用 paint 包容，请使用以下命令：

.item {
  contain: paint;
}

启用 paint 控制后，会发生与 layout 控制相同的副作用：包含框成为独立的格式化上下文，用于放置元素的包含块并建立堆栈上下文。

paint 控制的作用是向浏览器表明，包含框内的元素在该框的边界之外将不可见。内容实际上将被剪切到该框中。

我们可以通过一个简单的例子看到这种情况。即使我们给卡片一个高度，但由于浮动元素已脱离文档流，所以浮动元素仍会戳出盒子的底部 。

浮动元素不包含在列表项中

启用 paint 控制后，浮动项目现在被裁剪为框的大小。应用 contain: paint 后，无法在元素边界之外绘制任何内容 。

框的内容被裁剪到框的高度（请参见 CodePen 上的绘制示例）

Size

如果您不完全了解 size 的工作原理， 那么它将是最有可能导致您遇到问题的值。要应用 size 限制，请使用：

.item {
  contain: size;
}

如果您使用 size 限制，那么您是在告诉浏览器您知道盒子的大小并且它不会改变。这就意味着，如果您有一个在块尺寸中自动调整大小的盒子，它将被视为内容没有大小，因此该盒子将像没有内容一样折叠起来。

在下面的示例中，我没有给 li 设定高度。他们也使用了 contain: size 。您会看到所有项目都像没有任何内容一样折叠起来了，从而使列表看起来非常怪异！

（请参见 CodePen 上的大小示例）

如果给盒子指定一个高度，那么在 contain: size 使用时会考虑该高度。单独使用 size 限制将不会创建新的格式化上下文，因此不会像 layout 和 paint 限制一样将包含浮动和边距。您不太可能单独使用它。取而代之的是，您很可能会将其与 contain 的其他值一起应用，以便能够获得最大程度的限制 。

简写值

在大多数情况下，可以使用两个缩写值之一来获得最佳的控制效果。要打开 laylout 和 paint 限制，请使用 contain: content; ，打开所有可能的限制（请注意，没有尺寸的项目会塌陷），请使用 contain: strict 。

规范说：

“ contain: content 在合理范围内是合理的“安全”；实际上，它的影响很小，并且大多数内容都不会违反其限制。但是，由于它不应用大小限制，因此元素仍然可以响应其内容的大小，这可能导致布局无效，从而使树超出了所需的范围。尽可能使用 contain: strict ，以获取尽可能多的限制效果。”

因此，如果您事先不知道项目的大小，但知道项目将包含浮动和边距，请使用 contain: content 。如果您除了对容器的其他副作用了如指掌之外，还知道项目的大小，请使用 contain: strict 。您已经通过解释布局的工作方式完成了自己的工作，其余的取决于浏览器。

我可以立即使用 Containment 吗？

CSS Containment 规范现在是 W3C 推荐标准，有时也称为 Web标准 。为了使规范进入这一阶段，我们需要在 Firefox 和 Chrome 中看到该功能的实现：

由于此属性对用户是透明的，因此即使您在不支持它的浏览器中使用了该属性也是完全安全的。如果浏览器不支持 containment，则访问者将获得他们通常获得的体验，而在支持它的浏览器中访问者将获得增强的性能。

我建议将该属性添加到您在组件或模式库中创建的任何组件中，这将是一件好事，如果您以这种方式工作，则很可能每个组件都被设计为独立的组件，并且不会影响页面中组件上的其他元素。添加 contain: content 是很有用的。

因此，如果您有一个页面在加载后需要向 DOM 中添加内容，那么我建议您尝试一下。