CSS contain-intrinsic-size 怎样为延迟渲染内容预留空间

长列表或文章流使用 content-visibility: auto 时，浏览器可以跳过屏外内容的布局和绘制；但如果完全不知道区块大小，页面滚动到该区块时仍可能发生明显的布局调整。解决办法是给同一元素设置 contain-intrinsic-size，让浏览器在内容暂不渲染时先采用一个接近真实值的估算尺寸。

官方文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size

最小可用写法是 content-visibility: auto 配合 contain-intrinsic-size: auto 480px。前者负责跳过屏外渲染，后者负责给布局一个占位尺寸；480px 只是示例，应该按同类内容的平均高度调整。

• 先分工：不要把 contain-intrinsic-size 当成固定高度，也不要只设置它而忘记 size containment。
• 再估算：内容高度稳定时使用固定长度，变化明显时优先考虑 auto 长度让浏览器记住真实尺寸。
• 看布局：grid 和多列布局不要机械写成 0px，必要时用 auto none 避免错误的隐式尺寸。

contain-intrinsic-size 到底解决哪一段布局问题

content-visibility: auto 的价值是让屏外元素暂时跳过布局、绘制等渲染工作，但尺寸包含仍然要参与页面整体布局。若元素被当成没有内容，后面的区块就会向上收缩；当元素进入视口、真实内容开始渲染后，高度又会变回去，滚动位置和旁边内容随之改变。

contain-intrinsic-size 提供的是“被 size containment 影响时，浏览器用于布局的内在尺寸”。它不是给元素写死 height，也不会裁剪真实内容。真实内容渲染后仍会使用真实尺寸，只是首次布局有一个更接近实际的占位值。

可以把职责记成一句话：content-visibility 决定什么时候少做渲染工作，contain-intrinsic-size 决定少做工作期间用多大的盒子参与布局。

用 content-visibility: auto 给屏外内容保留空间

下面的写法适合文章卡片、商品说明或长列表等“每项高度大致相近”的内容。这里故意使用 class 选择器，便于把规则应用到同一类区块。

延迟渲染的文章卡片
  
真实内容可能包含图片、长文本或异步数据。

.feed-card {
  /* 屏外时跳过内容渲染，但仍保留可估算的布局空间 */
  content-visibility: auto;
  /* 先按约 480px 参与布局，进入视口后再使用真实高度 */
  contain-intrinsic-size: auto 480px;
}

这里的 auto 480px 可以理解为“有记忆值就优先使用记忆值，否则先用 480px”。当区块第一次正常渲染后，浏览器可以记住它的正常尺寸；再次离开视口时，这个记忆值通常比所有卡片都套用同一个估算值更贴近实际。

固定估算、auto 估算和 0px 陷阱

如果内容高度非常稳定，可以直接写一个长度；例如每个占位卡片约为 320px：

.compact-card {
  /* 高度波动很小，固定估算值更容易控制首屏布局 */
  content-visibility: auto;
  contain-intrinsic-size: 320px;
}

只写一个长度时，它会同时作为宽度和高度方向的估算。需要分别估算两个方向时可以写两个长度，例如 600px 320px。对纵向文章流来说，通常更需要关注高度，但横向尺寸也会影响网格或多列布局，因此不要把两个值的顺序写反。

内容高度受图片、异步文本或用户数据影响时，auto 480px 更有弹性。另一方面，在 grid 或多列布局里，如果把估算值硬写成 0px，包含元素可能被当成没有内容，最终出现溢出或列高异常。此时可以评估 auto none，让没有记忆尺寸时回退到没有内在尺寸的行为，而不是把 0px 当成所有布局都适用的占位。

支持边界与滚动跳动怎么排查

先确认问题来自估算尺寸，而不是图片自身没有宽高、字体加载改变了文本换行，或脚本在渲染后主动修改了内容。排查时可以按下面的顺序缩小范围：

1. 暂时移除 content-visibility，如果跳动消失，说明延迟渲染路径值得继续检查。
2. 保留 content-visibility: auto，把估算值改成更接近平均真实高度的值，观察跳动幅度是否下降。
3. 如果同一类区块高度差异很大，改用 auto ，并把图片的宽高比或占位尺寸提前写清楚。
4. 检查目标浏览器的兼容表。属性在不支持的浏览器中不应成为唯一布局保障，基础文档流仍要能正常显示。

也要注意：估算值只影响内容被跳过时的布局，不等于真实高度承诺。真实内容首次出现后，如果估算与实际相差很大，仍可能发生一次布局调整；优化重点是把误差控制在合理范围，而不是追求一个永远不变的固定高度。

常见问题

contain-intrinsic-size 会把元素高度固定住吗？

不会。它提供的是 size containment 期间用于布局的估算内在尺寸，元素真正渲染后仍会按内容计算真实尺寸。要固定高度应使用 height 或 min-height，但那是另一种布局约束。

为什么只写 contain-intrinsic-size 没有明显效果？

它通常要和能触发 size containment 的能力一起使用，例如 content-visibility: auto。如果元素始终正常渲染，或者浏览器不支持相关能力，就不会看到“跳过屏外渲染并使用估算尺寸”的效果。

auto 480px 中的 480px 应该怎么定？

用同类内容的常见真实高度作为起点，优先减少平均误差。图片比例、标题行数和异步数据都会影响高度，页面上线后应按实际内容分布调整，而不是照抄示例值。