应采用分层预渲染策略：导出原始高清图与预模糊图，用适配分辨率，css clip-path叠加，限制模糊区域为10%–20%边缘带，配合srcset应对dpr，禁用filter与opacity同动。
在 H5 中实现“中间清晰、边缘高斯模糊”的背景图效果，同时兼顾移动端性能，关键不是硬扛全图实时模糊，而是用分层策略绕开性能瓶颈。核心思路是：把视觉效果拆解为静态与动态部分，模糊区域尽量预处理，动态部分只做轻量合成。
用预渲染模糊图替代实时计算
移动端 GPU 资源有限，Canvas 实时高斯模糊在 1080p 以上分辨率下极易掉帧。实测显示，单次双通道采样超 30 次，千元机帧率会跌至 30fps 以下。更优做法是：
- 设计阶段就导出两版图：一张原始高清图（用于中间清晰区），一张对应尺寸的预模糊图（边缘柔化已由 Photoshop 或脚本批量生成）
- 用
<picture></picture>+srcset分辨率适配，例如bg-blur-750w.jpg对应 @2x 屏幕，避免浏览器缩放失真 - 通过 CSS
clip-path或绝对定位叠加，让预模糊图作为底层，原始图居中裁切覆盖其上
限制模糊区域范围，减少渲染面积
全屏模糊 = 全屏计算。真正需要模糊的只是图片上下或左右的“过渡带”，通常 10%–20% 的宽度/高度足矣。可这样做：
- 不模糊整张图，而是在容器内用两个半透明渐变遮罩（
linear-gradient）盖住顶部和底部，模拟柔边效果 - 若必须用 Canvas，只对边缘固定像素区域（如 top: 0, height: 60px）执行模糊，其余区域跳过处理
- 结合
will-change: transform和contain: layout paint隔离模糊区域的重绘影响
用 CSS 滤镜做轻量过渡，禁用复杂动画
如果模糊强度需动态调节（如随滚动变化），优先使用 CSS filter: blur()，但必须规避常见陷阱：
- 只对
<img>或带transform: translateZ(0)的容器启用，触发硬件加速 - 模糊值控制在
blur(2px)以内；超过4px在 iOS Safari 上易出现色带或卡顿 - 禁用
filter与opacity或transform同时动画——这会强制每帧重绘整个图层 - 用
transition: filter 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)替代默认 ease，更顺滑且省资源
适配 DPR，避免模糊被二次拉伸
很多“模糊卡顿”其实是视觉错觉：低分辨率图被 devicePixelRatio=2 的屏幕强行拉伸，再叠加滤镜，导致双重失真。解决方式很直接：
- 背景图不用
background-image，改用<img>标签 +object-fit: cover - 为
<img>设置srcset="bg@1x.jpg 1x, bg@2x.jpg 2x"，确保高 DPR 屏加载对应倍图 - 容器宽高用 CSS 固定（如
width: 100vw; height: 60vh），不依赖内容撑开，防止布局抖动引发重绘
