优化 box-shadow 是解决滑动掉帧最有效方式：限制 blur-radius≤4px、spread-radius=0、透明度0.08～0.12，避免纯黑阴影；用 transform: translatez(0) 提升合成层，禁用 overflow: hidden；优先用间距、明暗差等替代阴影，并配合虚拟滚动与 passive scroll 提升整体滚动性能。
直接减少或优化 box-shadow 的使用是解决滑动掉帧最有效的方式。它看似只是视觉装饰，但在移动端（尤其 iOS Safari 和微信 X5 内核）会显著加重合成器负担，引发重绘延迟、阴影裁剪甚至整层掉帧。
精简阴影参数，控制硬件渲染开销
高 blur-radius、高透明度、多层叠加都会放大 GPU 压力。应严格限制关键值：
- blur-radius ≤ 4px（推荐 2px～4px），避免在高 DPI 屏上被过度放大导致发灰或锯齿
- spread-radius 设为 0，防止阴影扩散不可控、增加绘制区域
- 透明度用 rgba(0,0,0,0.08)～rgba(0,0,0,0.12)，不用 0.15 以上，视觉更干净且渲染更轻
- 避免写成
box-shadow: 0 4px 12px #000这类无 alpha 的纯黑——OLED 屏易发虚，也难被硬件高效处理
强制创建独立合成层，隔离阴影渲染
默认状态下，带 box-shadow 的元素常与父容器共用图层，滚动时触发大面积重绘。需主动提升层级：
- 给阴影元素加
transform: translateZ(0)或will-change: transform（注意：will-change宜在交互前设置、结束后移除，避免内存泄漏） - 确保父容器没有
overflow: hidden——它会直接裁掉阴影区域，迫使浏览器降级渲染 - 避免对
position: fixed元素直接加阴影；可外包一层position: relative容器再加
替换或规避 box-shadow 的高成本场景
不是所有阴影都值得保留。优先判断是否真需投影：
- 卡片悬停等交互动效中，用
transition: box-shadow 0.25s时，必须显式声明全部四参数（x y blur color），且初始态与悬停态维度一致，否则会跳变、闪烁 - 若元素本身有
border-radius或clip-path，改用filter: drop-shadow()可贴合形状，但仅限必要场景——它不支持 inset、无法多层、低端安卓易掉帧 - 真正轻量的替代方案：靠间距、背景明暗差、字体粗细和 border 颜色变化传递层级感，多数情况下比阴影更稳更快
配合滚动性能整体治理
box-shadow 卡顿往往不是孤立问题，常与滚动逻辑耦合：
- 滚动中禁止读取
getBoundingClientRect()或修改style.top，改用transform: translateY()移动元素 - 监听
scroll时务必加{ passive: true }，防止浏览器等待 JS 执行而阻塞滚动帧 - 长列表务必启用虚拟滚动（如 react-window），否则即使阴影再轻，200+ DOM 节点也会拖垮帧率
