Canvas高负载卡顿主因是CPU/GPU过载而非绘制慢，需按设备能力动态降级：先用devicePixelRatio、RAF耗时、hardwareConcurrency等轻量指标首帧前识别性能水位，再分逻辑层（插值计算、禁用非必要API）和渲染层（缩放画布、简化视觉）降级保交互。
Canvas在高负载场景下卡顿，本质是CPU或GPU撑不住——不是“画得不够快”，而是“不该画的还在画”。降级不是砍功能，而是按设备能力动态收窄渲染范围，优先保交互、再保视觉。
性能分级检测：用轻量指标快速判断
别等动画卡了才反应，要在首帧前就识别设备水位：
- 查devicePixelRatio：dpr ≥ 2 但帧耗时持续 >16ms，大概率是高分辨率低性能安卓机
- 测RAF前三帧平均耗时：超过16ms即标记为“弱性能”，立即启用基础降级策略
- 看hardwareConcurrency ≤ 2，或UA含“Mi/”“HUAWEI MLA-AL10”等已知低端机型关键词，直接跳过复杂渲染路径
逻辑层降级：减少每帧计算量
不依赖渲染结果，从源头压低CPU压力：
- 把高频更新改成关键帧插值：例如粒子运动只在第0、15、30帧真实计算位置，中间用缓动函数模拟
- 禁用非必要API：shadowBlur、globalAlpha渐变叠加、多层ctx.save/restore全部关闭
- 像素操作改用Uint8ClampedArray直写，避免getImageData触发强制同步
渲染层降级：让Canvas画得少、画得快
视觉可简化，但坐标映射和事件响应不能断：
- 自动缩放画布尺寸：当设备宽度≥720px且FPScanvas.width/height = CSS尺寸 × 0.7，再用CSS transform: scale(1.428)补显示
- will-change: transform只加在移动元素上，避免整块Canvas升层导致内存暴涨
- 静态背景提前转成ImageBitmap，用ctx.transferFromImageBitmap()零拷贝绘制
兜底切换：Canvas退为事件层，DOM接棒动画
持续掉帧超5秒，就无缝切到CSS动画，Canvas只留一层透明蒙版：
- 预置轻量DOM结构（如div.animated-sprite），用@keyframes实现位移、缩放等基础动效
- 通过getComputedStyle读取DOM元素位置，反向同步到Canvas中仍需交互的动态元素（比如拖拽手柄）
- Canvas保持pointer-events: none但覆盖在DOM上方，确保触摸坐标映射完全不变
