为了帮助浏览器实现峰值性能，我们必须做的事情越来越多。
- 响应式图像语法有几个。 例如，需要使用
sizes属性告诉浏览器图像在我们的布局中将有多大，以及使用w描述符告诉浏览器图像有多大。 - 常规图像始终具有
width和height表现属性，这些属性始终在某种程度上很有用，并且 现在真的很有用。 - CSS 中的
will-change属性 有时需要实现更高性能的动画。 - 如果您想要任何离线功能，或者想要异乎寻常的性能改进，则必须编写自定义服务工作者代码。
现在我们有了 CSS contain，它的目的是告诉浏览器您的布局，以便它能够更快地执行操作。 您无需使用它，但这是一种很好的优化增强功能。
.item {
contain: layout;
contain: paint;
contain: size;
contain: content; /* same as `layout paint` */
contain: strict; /* same as `layout paint size` */
}以下是 Rachel 特别关于 layout 的内容
启用布局包含后，浏览器会知道元素外部的任何内容都不会影响内部布局，并且元素内部的任何内容都不会改变外部内容的布局。 这意味着它可以针对这种情况进行任何可能的优化。
这些事情会产生实际影响，例如启动 z-index 上下文、清除浮动和隐藏溢出，因此它们肯定属于“了解您的操作” 范围。 不过，Rachel 关于设计系统的说法是正确的
我建议，如果您以这种方式工作，这将是您在组件或模式库中创建的任何组件都应该添加的一个很棒的功能，因为每个组件都设计为一个独立的事物，不会影响页面上的其他元素，从而使
contain: content成为一个有用的补充。