CSS contain + content-visibility 性能优化生成器

contain 是 CSS Containment Module 引入的属性，让开发者声明元素的渲染隔离边界， 浏览器据此优化重排重绘计算。它解决了大型页面的性能问题——当页面元素众多时， 任意一处布局变化都可能触发整页重排，contain 把元素隔离成独立单元，子树的变化不会扩散到外部。 例如一个卡片设置了 contain: layout，卡片内部布局变化（如展开折叠）不会触发外部元素重排， 外部布局变化也不会影响卡片内部。contain: content 是推荐用法， 语法：.card { contain: content; }，一行 CSS 即可获得布局/绘制/样式三项隔离。

none：不隔离（默认值）。
layout：隔离布局，子树布局变化不触发外部重排。
paint：隔离绘制，子树内容不会绘制到元素边界外（类似 overflow:clip 但作用于绘制阶段）。
style：隔离样式，counter-reset/increment 和 quotes 作用域隔离，避免计数器串扰。
size：隔离尺寸，元素尺寸不受子内容影响，必须显式指定高度，否则高度为 0。
inline-size：仅隔离行内方向尺寸（Level 2 新增），块向高度仍由子内容决定，适合横向滚动容器。
content：等价于 layout + paint + style，推荐用法，无尺寸副作用。
strict：等价于 size + layout + paint + style，全部隔离，最强但需显式尺寸。
关键选型：日常用 content（推荐），固定尺寸组件用 strict，横向滚动用 inline-size，size/strict 谨慎使用。

content-visibility 是 CSS Containment Module Level 2 引入的属性， 控制元素内容的渲染策略。auto 值让浏览器自动跳过屏幕外内容的渲染—— 当元素不在视口内时，浏览器仅保留其布局占位（跳过子树布局/绘制/合成）， 滚动进入视口时才渲染，离开时释放渲染资源。这能大幅提升长列表、卡片网格、长文档的滚动性能。 工作原理：浏览器用 IntersectionObserver 判断元素是否在视口，屏幕外元素被"跳过"（skipped）， 仅保留 contain-intrinsic-size 指定的占位尺寸。本工具的可滚动预览区用 IntersectionObserver 实时标记可见/屏幕外状态，直观演示 auto 的工作过程。语法： .list-item { content-visibility: auto; contain-intrinsic-size: 320px 140px; }。

两者都让元素不可见，但机制不同：
display: none：元素完全从渲染树移除，不保留布局信息。切换回可见时需重新计算布局、构建渲染对象， 开销较大，适合"永久"隐藏。
content-visibility: hidden：元素不渲染内容但保留布局信息与渲染状态。 切换回 visible 时无需重新计算布局，浏览器直接恢复渲染，开销小，适合频繁切换的隐藏面板（如折叠面板、标签页）。
关键差异：display:none 是"移除"，content-visibility:hidden 是"暂停"。 频繁切换的场景用 content-visibility: hidden 性能更好；一次性隐藏用 display: none 更彻底。

contain-intrinsic-size 为跳过渲染的元素提供预估占位尺寸。 当 content-visibility: auto 跳过屏幕外内容渲染时，浏览器不知道内容的实际尺寸， 如果不提供占位尺寸，滚动条会跳动（内容渲染前后尺寸突变）。 contain-intrinsic-size: 320px 140px 告诉浏览器"这个元素未渲染时约占 320×140px"， 浏览器据此计算滚动条位置，内容渲染后尺寸相近则无明显跳动。
最佳实践：用元素渲染后的典型尺寸作为 intrinsic-size，值越接近实际，跳动越小。 也可用 contain-intrinsic-size: auto 320px 让浏览器记住上次渲染尺寸（auto 关键字，Level 3 新增）。 本工具在启用 contain-intrinsic-size 后提供宽高滑块，方便调整占位尺寸。

副作用：contain: size 和 strict（含 size）会让元素尺寸不受子内容影响—— 元素高度不再被子内容撑开，若未显式指定 height，元素高度退化为 0，子内容不可见。这是最常见的踩坑点。
何时该用：仅当元素有固定尺寸（如固定高度的卡片、固定宽度的侧栏）时使用 size/strict。 若元素高度由内容决定（流式布局），用 contain: content（不含 size，推荐）或 contain: layout paint 组合更安全。
本工具在选中 size/strict 时会在原理说明面板显示副作用提醒，帮助避免误用。

两者协同是现代 CSS 性能优化的核心组合。最佳实践：
1. 组件级隔离：对独立组件用 contain: content（layout + paint + style）， 隔离子树布局/绘制/样式，无尺寸副作用。
2. 长列表优化：对列表项用 contain: content; content-visibility: auto; contain-intrinsic-size: <w> <h>;，浏览器跳过屏幕外项的渲染，仅保留占位。
3. 隐藏面板：对折叠面板用 content-visibility: hidden 暂停渲染， 切换比 display:none 更快。
4. 避免过度隔离：size/strict 有尺寸副作用，仅在确定固定尺寸时使用。 content 是最安全的组合，覆盖 90% 场景。
5. 渐进增强：contain 与 content-visibility 在不支持的浏览器被忽略，元素正常渲染，无需降级代码。

兼容性：contain 基础值（layout/paint/style/content/strict/size）自 2020 年起全主流浏览器支持， inline-size 自 2022 年起支持，style 自 2023 年起支持。content-visibility 自 2023 年起全主流浏览器支持。 不支持的浏览器忽略这些属性，元素正常渲染，天然降级。
性能风险：contain 本身开销极小，过度使用不会明显变慢；content-visibility: auto 在快速滚动时 可能出现短暂渲染延迟（内容渲染需时间），用 contain-intrinsic-size 接近实际尺寸可缓解。
隐私保障：本工具全部在浏览器本地处理，不发起任何网络请求，不上传任何数据， 不使用 Cookie 与 LocalStorage，无追踪。生成的 CSS 代码也不会离开你的浏览器。