前言

CSS 在 2025 年引入的 contain-intrinsic-size 属性，能显著提高网页布局性能和渲染效率。今日前端早读课文章由 @Karsten Biedermann 分享，@飘飘翻译。

译文从这开始～～

随着 CSS 在 2025 年不断发展，有一个非常强大的单行属性可以显著提升布局性能，那就是：contain-intrinsic-size。这个属性与 contain 搭配使用时，能以简单但高效的方式优化渲染性能，尤其适用于动态内容和复杂布局。在本文中，我们将深入探讨 contain-intrinsic-size 的工作原理、实际应用，以及它如何成为资深开发者手中的利器。

什么是 contain-intrinsic-size？

在 CSS 中， contain-intrinsic-size 属性与 contain 属性配合使用，用于定义元素在完全渲染之前的基本大小。这在需要控制稍后将根据其内容动态调整大小的元素的尺寸时特别有用。它有助于防止不必要的布局重新计算（回流）和重绘，是性能优化的关键工具。

基本语法

 element {
   contain: layout;
   contain-intrinsic-size: 200px; /* 设置一个临时尺寸 */
 }

在这个例子中，元素在等待内容加载完成前，会被临时赋予一个 200px 的尺寸。一旦内容加载完成，尺寸将自动根据实际内容进行调整。

contain-intrinsic-size 的工作方式

1、临时占位符大小

contain-intrinsic-size 的主要用途是为那些最终会根据内容或动态计算结果改变大小的元素提供一个临时占位尺寸。这个占位尺寸可以帮助浏览器更高效地处理布局变化，避免触发不必要的重排。

示例：

 .container {
   contain: layout;
   contain-intrinsic-size: 300px;
 }

在这个示例中，.container 元素在初始加载时会被显示为 300px 的尺寸，即使它的实际内容后来会有不同的大小。这在容器尺寸需要动态计算时尤其有用，预设一个尺寸可以让布局更稳定。

2、防止布局跳动（layout shifts）

网页设计中常见的一个问题是布局偏移，也就是页面加载过程中元素的大小和位置发生变化。通过使用 contain-intrinsic-size，可以避免浏览器反复重新计算布局，从而保持布局稳定。这个技巧在异步加载内容、图片或动态生成组件时尤其有效。

示例：

 .card {
   contain: layout;
   contain-intrinsic-size: 250px;
 }

这个设置确保 .card 组件在初始显示时有一个预设的大小，直到真正的内容加载完成后才调整尺寸。对于懒加载（lazy loading）或异步加载内容的场景来说，这种方式特别有价值，因为它能在数据完全渲染前保持页面的稳定布局。

3、响应式设计的灵活性

在现代响应式设计中，容器需要根据不同屏幕尺寸自适应调整。contain-intrinsic-size 可以用于相对于父级元素或视口（viewport）来定义容器的尺寸，从而实现更灵活的布局。

示例：

 .responsive-container {
   contain: layout;
   contain-intrinsic-size: 50vw;
 }

在这个例子中，.responsive-container 占据了视口宽度的 50%。这种技术非常适合用于需要根据容器大小自适应的动态内容或图片，能构建出更加流畅的响应式布局。

contain-intrinsic-size 的性能优势

使用 contain-intrinsic-size 的主要好处在于优化性能并减少布局重排。在大型、复杂的布局中，或在资源有限的设备上，这种技术可以显著降低渲染开销，加快页面加载速度。

避免重排（reflow）和重绘（repaint）

通过使用 contain，一个元素会被置于其自身的独立布局环境中，这意味着对该元素所做的更改不会影响相邻的布局。这对于性能至关重要，因为浏览器仅需在元素内部内容发生变化时重新计算布局。

【第2281期】CSS 新特性 contain，控制页面的重绘与重排

实际应用场景

示例 1：优化画廊组件

假设你有一个画廊组件，里面包含多张图片，而这些图片的尺寸在初始时是未知的。使用 contain-intrinsic-size 可以确保容器在图片加载完成前就拥有一个固定尺寸：

 .gallery-item {
   contain: layout;
   contain-intrinsic-size: 300px;
   /* 图片的其他样式 */
 }

示例 2：懒加载图片

在一个使用懒加载机制的应用中，可以通过 contain-intrinsic-size 为图片容器在图片尚未加载时提前定义一个尺寸：

 .lazy-image-container {
   contain: layout;
   contain-intrinsic-size: 400px;
 }

示例 3：用于网格布局

在网格（grid）布局中，单元格的大小通常取决于其中的内容。使用 contain-intrinsic-size 可以在内容尚未加载前就保持布局一致性：

 .grid-item {
   contain: layout;
   contain-intrinsic-size: 100px;
   /* 其他布局选项 */
 }

最后

来看一下 contain-intrinsic-size 的浏览器兼容性吧。

总结

contain-intrinsic-size 是一个简单却强大的工具，非常适合希望优化网页性能的开发者使用。通过在最终内容渲染前为元素提供一个临时尺寸，该属性有效地避免了不必要的重排和重绘，从而实现更稳定、高效的布局。

它在处理动态内容、懒加载以及响应式设计时尤其有用，是现代 CSS 开发中不可或缺的一部分。

这个简洁的一行代码能极大提升你的网站用户体验，实现页面快速、顺滑加载，同时不牺牲性能或布局稳定性。在 2025 年，拥抱这个属性，让你的 CSS 技术更进一步吧！

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！

優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營(yíng)銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。