直接用 .container 类不会提升性能，它只是带固定宽度和居中的普通 CSS class，无优化语义；真正有效的性能控制属性是 contain 和 content-visibility，但需满足显式尺寸等硬性条件才能生效。

直接用 .container 类不会提升性能，反而可能拖慢渲染——它本身只是个带固定宽度和居中的 CSS class，不带任何优化语义；真正起作用的是 contain（CSS 属性）和 content-visibility（现代渲染控制），但它们对容器元素有硬性约束，乱用会失效甚至白写。

contain: layout paint 为什么加了没反应

浏览器会静默忽略没有显式尺寸的容器上的 contain 声明。这不是 bug，是规范强制要求：布局隔离需要明确边界。

• contain: layout paint 必须配合 height、min-height 或 max-height 才生效，仅靠内容撑高（如 height: auto）不行
• Flex/Grid 容器若父级未设高度，子级即使写了 min-height: 200px 也可能被压缩为 0——先检查 Computed 面板里实际 height 值是不是 0
• 在 position: absolute 或 transform 元素上设 contain，可能触发意外裁剪，因为 layout 会重置包含块计算逻辑

content-visibility: auto 和 contain 能不能一起用

能，但必须分层使用，否则冲突。最常见错误是给 content-visibility: auto 的容器再加 contain: size，这会让 contain-intrinsic-size 失效。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 整页长列表（如商品瀑布流）：外层用 content-visibility: auto + contain-intrinsic-size: 200px，跳过不可见区域的样式/布局计算
• 每个列表项（如 .product-card）：再加 contain: layout paint，防止内部 hover 动画触发整页重排
• 禁用场景：不要在 content-visibility: auto 容器上设 contain: size；也不要对 display: contents 或 visibility: hidden 元素用 content-visibility

Bootstrap 的 .container 会影响渲染性能吗

不影响。它只是普通 class：width: 1200px; margin: 0 auto;，无运行时开销。但容易误判“用了 container 就算做了优化”，实际毫无性能收益。

立即学习“前端免费学习笔记（深入）”；

• 调试时发现宽度不对？先看 Computed 面板里的 max-width 是否被媒体查询覆盖（比如小屏下 .container 是 100%）
• 删掉 .container 后布局全乱？说明你依赖它提供的宽度约束和居中行为，而非性能——这是布局职责，不是性能手段
• 想优化滚动性能？别改 .container class，去查列表项是否用了 will-change: transform 或是否触发了非合成层滚动

真正卡顿往往出在「以为加了 container 就安全了」——contain 和 content-visibility 都有明确的尺寸前提，且只对「已知边界」的区域生效；动态高度、JS 驱动的尺寸变更、或嵌套过深的 flex/grid，都会让这些优化掉链。