What Is CSS Containment and How Can I Use It?

What Is CSS Containment and How Can I Use It?

摘要

CSS 包含机制是现代网页性能优化的利器，通过 contain 属性，开发者可以明确告知浏览器哪些 DOM 子树是独立的，从而减少不必要的渲染和布局计算。包含机制分为 layout、paint、size 和 style 四种类型，分别控制布局、绘制、尺寸和样式的独立性。合理使用包含机制能显著提升页面交互性能，特别是在复杂 UI 中，如卡片网格、长列表等场景。搭配 content-visibility 和 contain-intrinsic-size 使用，还能进一步优化渲染效率，减少主线程负担。