contain 属性：提升页面渲染性能的秘密武器
各位前端同仁们，有没有遇到过这样的抓狂时刻：辛辛苦苦写出来的页面，在自己的高性能电脑上溜得飞起，一放到别人的老古董机子上，卡顿得像便秘的企鹅？
别慌，今天我们就来聊聊一个鲜为人知，但关键时刻能救你于水火的 CSS 属性——contain。它就像一位低调的幕后英雄，默默地优化你的页面渲染性能，让你的代码在各种设备上都能跑得更流畅。
什么是 contain？别被名字吓到，它其实很简单
contain，顾名思义，就是“包含”、“控制”的意思。在 CSS 中，它用来告诉浏览器，某个元素及其子元素在渲染时应该被“隔离”起来，从而减少不必要的重绘和重排，提高渲染效率。
你可以把它想象成给你的页面元素套上了一层“金钟罩”，让它们在自己的小天地里安安静静地渲染，互不干扰。
为什么要用 contain？渲染性能的那些事儿
在深入了解 contain 之前，我们先来简单回顾一下浏览器渲染页面的过程：
- 解析 HTML： 浏览器读取你的 HTML 代码，构建 DOM 树（Document Object Model）。
- 解析 CSS： 浏览器读取你的 CSS 代码，构建 CSSOM 树（CSS Object Model）。
- 渲染树： 将 DOM 树和 CSSOM 树合并成渲染树（Render Tree），只包含需要显示的节点。
- 布局（Layout）： 计算渲染树中每个节点的位置和大小，也就是“回流”（Reflow）。
- 绘制（Paint）： 将渲染树中的节点绘制到屏幕上，也就是“重绘”（Repaint）。
问题就出在“布局”和“绘制”这两个步骤。
- 回流（Reflow）： 当页面元素的尺寸、位置、内容发生改变时，浏览器需要重新计算布局，这会导致整个页面或者部分页面的重新渲染。回流是非常耗性能的操作。
- 重绘（Repaint）： 当页面元素的外观发生改变，但不影响布局时，浏览器只需要重新绘制该元素。重绘的性能消耗比回流小，但也需要避免。
想象一下，如果你的页面元素很多，而且相互依赖，那么一个小的改动就可能触发大量的回流和重绘，导致页面卡顿。
而 contain 的作用，就是通过告诉浏览器哪些元素可以被“隔离”起来，从而减少回流和重绘的范围，提高渲染效率。
contain 的四种武器：none、strict、content、layout、style、size
contain 属性有几种不同的取值，每种取值都代表着不同程度的隔离。我们可以把它们想象成四种不同类型的武器，分别用于应对不同的场景：
contain: none;： 这是默认值，表示不进行任何隔离。就像你赤手空拳，没有任何保护。contain: strict;：这是最严格的隔离方式，相当于穿上了全身盔甲。它告诉浏览器，该元素及其子元素完全独立于页面上的其他元素，对其进行的任何修改都不会影响到其他元素，反之亦然。它包含了contain: size layout style paint;。contain: content;： 稍微宽松一点的隔离方式，相当于穿着轻便的战斗服。它告诉浏览器，该元素及其子元素的内容（例如文本、图片）不会溢出到外部，而且对其进行的任何修改都不会影响到外部元素的布局。它包含了contain: style layout paint;。contain: layout;: 声明该元素的内容不会影响文档其他部分的外部尺寸，反之亦然。contain: style;: 声明对该元素及其后代属性的更改不会影响文档的其他元素。contain: size;: 声明该元素不会在其框外部重新调整大小，这意味着该元素的大小与其后代无关。contain: paint;: 声明该元素的后代不会在边界之外显示。此外，如果元素在视口之外，后代也不可见。
举个栗子：用 contain 优化列表的渲染
假设我们有一个包含大量列表项的列表，每个列表项都包含一张图片和一段文字。当我们滚动页面时，如果列表项的图片或文字发生改变，浏览器就需要重新渲染整个列表，导致页面卡顿。
这时，我们就可以使用 contain 来优化列表的渲染：
<ul class="list">
<li class="list-item">
<img src="image1.jpg" alt="Image 1">
<p>This is the first item.</p>
</li>
<li class="list-item">
<img src="image2.jpg" alt="Image 2">
<p>This is the second item.</p>
</li>
</ul>.list-item {
contain: content; /* 或者使用 contain: strict; 效果更佳 */
}通过将 contain: content; 或 contain: strict; 应用于每个列表项，我们告诉浏览器，每个列表项都是独立的，对其进行的任何修改都不会影响到其他列表项。这样，当滚动页面时，浏览器只需要重新渲染发生改变的列表项，而不需要重新渲染整个列表，从而提高了渲染效率。
使用 contain 的注意事项
虽然 contain 能够有效地提高渲染性能，但在使用时也需要注意以下几点：
- 过度使用： 不要滥用
contain。如果你的页面元素本来就不多，而且相互依赖性很小，那么使用contain可能反而会增加浏览器的负担。 - 选择合适的取值： 根据实际情况选择合适的
contain取值。如果你的元素需要完全隔离，那么可以使用contain: strict;；如果只需要隔离内容，那么可以使用contain: content;。 - 兼容性：
contain属性的兼容性还不是很好，在使用时需要注意浏览器的兼容性。可以考虑使用一些 Polyfill 来提高兼容性。
contain 的进阶用法：结合 will-change 效果更佳
will-change 属性可以告诉浏览器，某个元素可能会发生改变，从而让浏览器提前做好优化准备。将 contain 和 will-change 结合使用，可以进一步提高渲染性能。
例如，我们可以将 will-change: transform; 应用于需要进行动画的元素，然后将 contain: content; 应用于该元素的父元素，从而让浏览器更好地优化动画的渲染。
总结：contain，你值得拥有
contain 属性是一个非常有用的 CSS 属性，它可以有效地提高页面渲染性能，让你的代码在各种设备上都能跑得更流畅。虽然它的兼容性还不是很好，但随着浏览器的不断发展，相信它会越来越普及。
下次当你遇到页面卡顿的问题时，不妨试试 contain，也许它能给你带来意想不到的惊喜。
最后，我想说的是，优化前端性能是一个持续不断的过程，需要我们不断学习和实践。contain 只是众多优化手段中的一种，我们还需要学习其他的优化技巧，才能打造出更加流畅、高效的 Web 应用。
希望这篇文章能帮助你更好地理解 contain 属性，并在实际开发中灵活运用它。祝大家都能写出性能爆表的代码，告别卡顿，拥抱流畅！