[!info] related notes

• 所属 MOC: css-responsive-and-visual-moc
• 渲染过程: browser-rendering-process
• 相关效果: css-filter-and-backdrop-blur

设计中阴影对性能的影响

阴影有绘制成本，但是否造成卡顿取决于可见面积、模糊范围、阴影数量、变化频率和设备。不能仅用卡片数量或某个 blur 值判断“安全”。

静态阴影与动画的区别

静态 box-shadow 需要被绘制，后续是否重绘取决于失效区域及浏览器缓存策略。模糊范围变大通常会扩大待处理像素区域，但不能据此宣称计算量必然指数增长。

直接过渡 box-shadow 会持续改变需要绘制的阴影，可能增加逐帧绘制成本。少量小范围动画未必有明显问题；大量同时变化的阴影更值得测量。

如果目标只是让预先定义好的阴影渐显，可以把阴影放到伪元素，通过 opacity 过渡：

.card {
  position: relative;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 16px rgba(40, 255, 120, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.card:hover::after,
.card:focus-within::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .card::after { transition: none; }
}

这样保持阴影形状不变，给浏览器复用已绘制内容、只做合成的机会。它不是“保证走 GPU、零重绘”：图层提升、内存占用和绘制行为仍取决于具体页面；也不能模拟阴影形状本身的连续变化。

Digital Biome 书签网格中的取舍

原始场景是带霓虹绿发光效果的密集书签网格。可按实际瓶颈调整：

• 静态效果：限制过大的发光范围、叠加层数和屏外不必要绘制。
• 悬浮效果：若只需渐显，比较直接过渡阴影与伪元素 opacity 的实际表现。
• 用 DevTools 的 Performance、Paint flashing 等观察滚动与交互；在目标低端设备上比较帧耗时和内存。

不要把“10 张无影响”“500 张必卡”或“10–20px 必安全”当成通用阈值，也不要默认给所有卡片加 will-change。

参考

• web.dev：高性能 CSS 动画