学校发帖
我们都关心性能。为了优化好，您会花费许多精力优化网络、脚本等等，以求最大化提升性能。每一丝提升都很重要，但这种优化是有上限的。
CSS 局限可以在浏览器层面提供性能优化。具体来说，我们将一些特定部分与页面中其它部分分离，浏览器自己可以应用优化策略来处理这些部分。如果它们暂时不与用户相关，则会跳过其内容，这样就能节省渲染时间。
将以下 CSS 添加到自定义 CSS/Less 里面：
.PostStream-item,
.PostsUserPage-list > li,
.DiscussionList-discussions > li {
&:not(:hover) {
contain: content;
content-visibility: auto;
contain-intrinsic-height: auto 300px;
}
}
.DiscussionList-discussions > li {
contain-intrinsic-height: auto 300px;
}
.PostStream-item,
.PostsUserPage-list > li,
.DiscussionList-discussions > li {
&:has(.open .dropdown-menu) {
contain: initial;
content-visibility: initial;
contain-intrinsic-height: initial;
}
}
局限会应用给讨论列表和大部分（或许是全部）的帖子。
在我的 Surface Go 上（这玩意性能垃圾应该是公认的吧？）做了一次简单测试，测量从点进一个讨论页面到页面完全渲染完成的性能数据，可以大致反映优化效果。来看看：
我们在这里省下了大约 0.7 秒。
*：尽量避免与自定义主题配合使用。由于其固有特性，这样做可能会产生意想不到的效果。鼠标掠过上述受影响的内容时，可能会看到一像素左右的轻微位移。同时建议使用最新浏览器，不完全支持上面 CSS 中特性的浏览器可能不会产生性能改进，或是截断某些元素，例如下拉菜单。优化效果在不同设备上可能有所不同，具体取决于设备本身的性能。
此 CSS 由正在开发的 Fluent 主题中的一个子模块分离而来，详情请见 DaleZ 。
在 MDN 上进一步了解 CSS 局限：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_containment/Using_CSS_containment
