drop-shadow强制全元素像素级重绘并提升为独立合成层，box-shadow仅扩展盒模型边界、局部重绘；前者性能开销大，尤其在移动端滚动动画中帧率下降明显，后者更高效稳定。
drop-shadow触发全图层重绘，box-shadow只影响盒模型区域
浏览器渲染时，box-shadow被当作盒模型的视觉扩展，直接参与布局计算和合成层划分，只在元素边界外有限区域内重绘；而filter: drop-shadow()本质是像素级滤镜操作，会强制将整个元素（含子元素、文本、透明区域）提升为独立合成层，并对每个像素执行Alpha通道采样+高斯模糊+偏移叠加——这一步无法被GPU完全卸载，尤其在滚动或动画中频繁触发时，CPU解码+内存带宽压力明显上升。
Chrome DevTools Performance 面板能直接验证性能差异
打开开发者工具 → Performance → 点击录制 → 操作含阴影的交互（如hover、scroll）→ 停止后看“Summary”面板：
-
box-shadow：通常只在“Layout”和“Paint”阶段有小幅波动，帧时间稳定在 2–4ms -
filter: drop-shadow()：会在“Raster”阶段出现长条状耗时（常 >10ms），且“Composite Layers”数量激增，Layer Tree 中可见额外的FilterLayer
关键信号：如果看到“Raster Task”持续超过 8ms 或 Layer 合成数翻倍，基本可判定是 filter 在拖慢帧率。
移动端和低端设备上 drop-shadow 的代价更隐蔽
桌面端可能不明显，但在 Android 12 以下或 iOS Safari 15.6 之前，drop-shadow 的模糊半径每增加 1px，实际渲染开销呈近似平方增长。这不是错觉——这些系统未对 Alpha 通道阴影做专用 SIMD 优化，而是走通用图像处理管线。
立即学习“前端免费学习笔记（深入）”；
- 实测对比（iPhone SE 2020）：
box-shadow: 0 2px 4px rgba(0,0,0,0.1)动画 60fps 稳定；相同参数换成filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1))，帧率掉到 42fps，且伴随明显发热 - 真正容易被忽略的点：即使你只给一个
img加了drop-shadow，只要它在视口内滚动，整个包含它的section都可能被标记为“需重绘”，因为浏览器无法安全地做局部裁剪
什么时候非用 drop-shadow 不可？别硬扛性能坑
不是所有场景都能用 box-shadow 替代。当遇到以下情况，drop-shadow 是唯一解：
- 元素含透明 PNG 或
clip-path切出的不规则轮廓（比如徽章图标、手绘风按钮）——box-shadow只能投出矩形黑影 - 需要阴影贴合文字边缘（如
h1标题加投影），box-shadow对行内内容无效，而drop-shadow天然作用于整个渲染树 - 必须与其它
filter连用（如blur(2px) drop-shadow(...)），此时已绕不开滤镜链
但请注意：哪怕必须用 drop-shadow，也应避免在 :hover 或 @keyframes 中动态切换它——改用 transform 触发重绘，比让滤镜反复重建图层更轻量。
