真正拖慢渲染的是重绘和布局，而非颜色计算；需用contain: paint隔离重绘边界、慎用transition/filter/box-shadow等易触发性能问题的color相关属性，并配合content-visibility: auto与contain-intrinsic-size优化长列表渲染。
颜色计算本身几乎不卡顿，真正拖慢渲染的是重绘（paint）和布局（layout）——尤其当颜色变化触发了样式重算、层叠上下文重建或强制同步布局时。
为什么改个 color 也会掉帧？
浏览器对颜色的计算极快，但如果你在长列表中频繁修改 color、background-color、box-shadow 等属性，实际触发的是「重绘」；若这些元素又处于未隔离的容器中，重绘范围可能扩散到整列甚至整个滚动区域。
常见错误现象：Uncaught RangeError: Maximum call stack size exceeded（常因监听 scroll + 强制 getComputedStyle 导致）、滚动明显掉帧、iOS 上滑动发涩
- 每个
.item都绑了:hover { color: #3b82f6; }—— 滚动时 hover 状态反复切换，触发大量样式重算和重绘 - 用
filter: brightness(1.2)做选中态高亮 —— filter 会强制创建新图层，100+ 项同时存在导致 GPU 图层爆炸 - 在 JS 中循环 setAttribute('style', 'color: ...') 更新状态 —— 每次都触发 layout → paint 流水线
用 contain: paint 隔离重绘边界
这是最直接有效的解法：让浏览器明确知道“这个容器内部的颜色变化，不会影响外面”，从而大幅收缩重绘区域。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给滚动容器加
contain: paint，例如：.list-wrapper { contain: paint; height: 500px; overflow-y: auto; } - 不要用
contain: strict—— iOS Safari 16.4+ 仍存在position: sticky失效、锚点跳转错位等已知问题 - 若列表项内有独立动画（如 loading 骨架色块），只对动画元素加
contain: paint，而非整行 - 避免和
will-change: transform共存 —— Chrome 会优先尊重contain边界，Safari 可能直接放弃优化
color 相关属性要慎用的三个坑
不是所有颜色操作都安全。以下写法在长列表中极易引发隐式性能损耗：
-
transition: color 0.2s写在每个.item上 —— 滚动时 hover/active 状态批量触发，重绘集中爆发；应改为只对真实交互元素（如按钮）加 transition -
background: linear-gradient(...)用于每项背景 —— 渐变绘制成本远高于纯色，且无法被contain: paint完全收敛；换成background-color+ border 模拟更稳 -
box-shadow: 0 1px 3px rgba(0,0,0,0.1)在 200+ 项上 —— 半透明阴影强制启用 alpha 合成，GPU 负担陡增；可改用border-bottom: 1px solid #e5e7eb
content-visibility: auto 不是万能解药
它确实能跳过离屏项的 paint 阶段，但前提是：你得告诉浏览器“这东西多高”。否则颜色没变，滚动条却疯狂跳动——因为未渲染项高度为 0，导致滚动容器总高度不断重算。
必须搭配 contain-intrinsic-size：
- 固定高度卡片：加
contain-intrinsic-size: 120px到.item类上 - 文字行数不定但可控：保守估 160px（含 padding/margin），宁大勿小
- 严禁写
contain-intrinsic-size: 0或留空 —— 这等于没设 - 别和
display: none混用 ——content-visibility: auto保留占位和无障碍能力，display: none会破坏缓存机制
真正卡顿的根源从来不是“颜色太花”，而是渲染范围失控、重绘边界不清、以及把 layout/paint 的责任错当成 CSS 类名问题。你得先让浏览器知道“哪些地方可以不管”，它才肯省力。
