低端安卓机H5粒子动画卡顿需分层降级：先用devicePixelRatio、RAF帧耗时、prefers-reduced-motion等轻量指标识别性能；再逻辑层改关键帧插值、禁用冗余API、裁剪粒子数；滤镜层禁用CSS blur、改用预渲染图或小半径Canvas模糊；最后持续掉帧5秒则无缝切至CSS DOM动画，Canvas仅作事件捕获层。
在低端安卓机上，H5 粒子动画和高斯模糊等动效极易引发严重卡顿、内存溢出甚至白屏——根源不是代码写得不够炫，而是这些设备 GPU 算力弱（如 Mali-G52）、WebView 内核陈旧（Chromium 61–75）、内存紧张（4GB RAM 且系统占用高），而粒子计算+Canvas 渲染+filter: blur() 组合恰恰是三重压力源。优雅降级的关键不是“一刀切关掉”，而是分层识别、按需简化、无缝切换。
第一步：用轻量指标自动识别低端机
别依赖 UA 字符串硬匹配机型，用浏览器原生、低开销的信号快速判断：
- devicePixelRatio ≥ 2 但 hardwareConcurrency ≤ 2：常见于千元安卓机（如华为畅享系列、小米Redmi Note 某些版本），高像素屏但双核 CPU，渲染吃力
- requestAnimationFrame 前 3 帧平均耗时 > 16ms：直接反映当前帧率瓶颈，比 FPS 计算更早预警
- matchMedia('(prefers-reduced-motion: reduce)').matches：系统级开关，真实可靠，无需 JS 探测，优先级最高
第二步：粒子动效逻辑层降级
避免每帧都算粒子位置、碰撞、生命周期——这是 CPU 热点：
- 改用关键帧插值：只在第 0、15、30 帧执行完整物理模拟，中间帧用 linear 或 ease-out 函数推算位置，降低 60%+ 计算量
- 禁用非必要 Canvas API：shadowBlur、globalCompositeOperation = 'lighter'、多层 save/restore——这些在低端 WebView 中触发强制同步绘制
- 粒子数量动态裁剪：初始加载 200 粒子，若连续 2 秒帧耗 > 20ms，则降至 80；再恶化则停用粒子层，仅保留静态背景图
第三步：模糊与滤镜类动效强制简化
filter: blur(8px) 在 Android WebView 61–75 中是性能黑洞，常导致整层重绘或合成卡死：
- 完全禁用 CSS blur()：用预渲染的半透明 PNG 替代（如 16×16 模糊贴图 + opacity 叠加），无 GPU 开销
- 若必须动态模糊，改用Canvas 手动均值模糊（3×3 卷积），控制 radius ≤ 2，且仅对小区域（如头像框）生效
- 所有含 filter 的元素统一加 will-change: auto，禁止提前升层；轮播图/弹窗等高频动效容器才启用 will-change: transform
第四步：兜底切换为纯 DOM 动效
当持续掉帧超 5 秒，或检测到 WebView 不支持 OffscreenCanvas，立即降级：
- 用 div.particle-blob 替代 Canvas 粒子，CSS @keyframes 控制位移+缩放+opacity，零 JS 计算
- 模糊效果退化为 box-shadow: 0 0 12px rgba(0,0,0,0.15)，视觉近似且兼容性极佳
- Canvas 层保留为透明覆盖层（pointer-events: none），仅用于捕获触摸坐标，确保交互逻辑不中断
