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

Desknumber

属性为您提供了一种向浏览器解释布局的方法，因此可以进行性能优化。但是，它确实会对您的布局带来一些副作用。 在本文中，我将介绍刚刚成为 W3C 推荐标准的 CSS 规范。 CSS 包含规范定义了一个属性 contain，它可以帮助您向浏览器解释布局的哪些部分是独立的，并且如果布局的其他部分发生变化，则不需要重新计算。 虽然此属性的存在是出于性能优化的原因，但它也会影响页面的布局。因此，在本文中，我将解释您可以受益的不同类型的遏制，以及将 contain 应用于网站中的元素时需要注意的事项。

布局重新计算的问题 如果您正在构建简单的网页，并且在使用 JavaScript 加载后不会动态添加或更改元素，则无需担心 CSS Containment 解决的问题。浏览器只需要在页面加载时计算一次布局。 当您想要向 电子邮件营销列表 页面添加元素而不需要用户重新加载页面时，Containment 就会变得有用。在我的示例中，我创建了一个很大的事件列表。如果单击该按钮，第一个事件将被修改，浮动元素将被添加，并且文本将被更改： 项目列表，其中包含用于更改第一项中的某些内容的按钮 (查看 CodePen 上的初始示例) 当我们的盒子的内容改变时，浏览器必须考虑到任何元素可能已经改变。



一般来说，浏览器很擅长处理这个问题，因为这是很常见的事情。也就是说，作为开发人员，您会知道每个组件是否都是独立的，并且对一个组件的更改不会影响其他组件，因此如果您可以通过 CSS 让浏览器知道这一点，那就太好了。这就是包含和 CSS contain 属性为您提供的功能。 认识Smashing Workshop关于前端、设计和开发的内容用户体验，包括实用要点、现场会议、视频录制以及友好的问答。与 Brad Frost、Stéph Walter 和许多其他人一起。 跳转至研讨会↬ 功能面板 遏制有何帮助？HTML 文档是一个树结构，您可以在使用 DevTools 检查任何元素时看到它。