CSS系列（36）-- Containment详解

前端技术探索系列：CSS Containment详解 ⚡

致读者：探索性能优化的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS Containment，这个强大的性能优化特性。

基础概念 🚀

包含类型

/* 布局包含 */
.layout-contain {contain: layout;
}/* 绘制包含 */
.paint-contain {contain: paint;
}/* 尺寸包含 */
.size-contain {contain: size;
}/* 完全包含 */
.strict-contain {contain: strict;  /* 等同于 size layout paint */
}/* 内容包含 */
.content-contain {contain: content;  /* 等同于 layout paint */
}

包含上下文

/* 创建新的包含上下文 */
.container {contain: layout;display: grid;grid-template-columns: repeat(3, 1fr);
}/* 样式隔离 */
.isolated {contain: style;/* 防止样式泄漏 */color: inherit;font-family: inherit;
}/* 组合使用 */
.optimized-section {contain: layout paint;overflow: auto;height: 100vh;
}

高级特性 🎯

布局优化

/* 列表优化 */
.virtual-list {contain: strict;height: 500px;overflow-y: auto;
}.list-item {contain: layout;height: 50px;
}/* 网格优化 */
.grid-container {contain: layout;display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}.grid-item {contain: size layout;aspect-ratio: 1;
}

渲染优化

/* 卡片容器 */
.card-container {contain: paint;overflow: hidden;border-radius: 8px;
}/* 动画优化 */
.animated-element {contain: paint;will-change: transform;transition: transform 0.3s;
}/* 固定尺寸元素 */
.fixed-size {contain: size;width: 200px;height: 200px;
}

实际应用 💫

虚拟滚动

/* 虚拟滚动容器 */
.virtual-scroll {contain: strict;height: 100vh;overflow-y: auto;
}.scroll-content {contain: size layout;height: calc(var(--total-items) * var(--item-height));
}.visible-items {contain: layout;position: absolute;top: var(--scroll-offset);width: 100%;
}

模态框

/* 模态容器 */
.modal-container {contain: layout paint;position: fixed;inset: 0;z-index: 1000;
}.modal-backdrop {contain: strict;position: absolute;inset: 0;background: rgba(0, 0, 0, 0.5);
}.modal-content {contain: content;position: relative;margin: auto;max-width: 600px;max-height: 80vh;overflow: auto;
}

性能监控 ⚡

性能标记

/* 性能追踪 */
.performance-track {contain: strict;content-visibility: auto;contain-intrinsic-size: 0 500px;
}/* 延迟加载 */
.lazy-section {contain: layout paint;content-visibility: auto;contain-intrinsic-size: 300px;
}

优化策略

/* 选择性包含 */
.conditional-contain {contain: layout paint style;
}@media (max-width: 768px) {.conditional-contain {contain: none;  /* 移动端禁用包含 */}
}/* 性能监测 */
.monitored-section {contain: strict;transition: background-color 0.3s;
}.monitored-section:hover {background-color: #f0f0f0;
}