css中专门用来提升渲染性能、减少重排重绘的属性

一、控制渲染隔离：contain

这是 CSS 性能优化的核心属性 ，content-visibility 底层就是靠它。

contain: layout paint size style;
contain: content; /* 常用简写 = layout + paint + size */
contain: strict;  /* 最强隔离 */

作用：

• 告诉浏览器：这个元素内部的变化，不会影响外部页面
• 浏览器就可以跳过大量计算，只重绘这个小区域
• 长列表、卡片、弹窗都非常适合用

适用场景：

• 独立组件、表格行、弹窗、长列表
• 内部频繁更新，但不影响外部布局

二、GPU 加速与渲染层：will-change

告诉浏览器：这个元素马上要动了，提前准备硬件加速

will-change: transform, opacity;

作用：

• 浏览器提前给元素开一个独立图层，交给 GPU 处理
• 动画、滚动更流畅，不卡帧

注意：

• 不要滥用，不要全局写
• 只给真正要动画/滚动的元素用
• 配合 transform 动画效果最好

三、强制硬件加速：transform / opacity

这两个属性是**唯一不会触发重排（reflow）**的，只会触发合成。

transform: translateZ(0); /* 经典老方案，强制开层 */

现代推荐：

transform: translateY(10px);
opacity: 0.9;

优点：

• 不触发布局（layout）
• 不触发绘制（paint）
• 直接 GPU 合成，性能极高

四、控制绘制区域：contain-intrinsic-size

配合 content-visibility 使用，提前告诉浏览器元素尺寸，避免滚动条跳动。

contain-intrinsic-size: 50px 300px; /* 宽 高 */

作用：

• 即使内容没渲染，也占好位置
• 滚动丝滑不抖动

五、减少重绘：backface-visibility

主要用于 3D 动画、轮播图，减少背面绘制。

backface-visibility: hidden;

六、字体渲染优化

font-display: swap;

• 字体未加载完成时，先显示系统字体
• 避免页面长时间空白（FOIT）
• 大幅提升首屏性能

七、滚动性能：scroll-behavior + scrollbar-gutter

scroll-behavior: smooth;
scrollbar-gutter: stable;

• scrollbar-gutter: stable 防止滚动条出现时页面抖动
• 避免频繁重排

八、减少重排：position: fixed / sticky

这类元素独立渲染层，滚动时不会触发大量重排。

比 top/left 动态修改性能高得多。

九、减少样式计算：:where() / :is()

优先级更低，减少选择器复杂度，浏览器匹配更快。

:where(.card .title) {
  color: red;
}

优点：

• 选择器匹配更快
• 优先级低，容易覆盖，减少样式冲突

十、图片渲染优化

image-rendering: crisp-edges;
content-visibility: auto; /* 图片懒渲染 */

现代浏览器还支持：

img {
  loading: lazy;
  decoding: async;
}

---

快速记忆（面试版）

真正高频、核心的就这 5 个：

1. content-visibility: auto ------ 长列表/表格神器
2. contain: content ------ 隔离渲染，减少重排
3. will-change ------ 提前 GPU 加速
4. transform / opacity ------ 高性能动画
5. contain-intrinsic-size ------ 配合 content-visibility 防抖动

---

一句话总结

想要优化长表格、长列表、频繁更新的组件：
content-visibility + contain + will-change + transform

这一套组合就是 CSS 性能天花板。