最简单有效的软降分辨率方式是直接缩放的CSS宽高而不改其width/height属性，并关闭imageSmoothingEnabled。
降低 canvas 渲染分辨率但保持显示尺寸
直接缩放 元素的 CSS 宽高，而不改变其 width 和 height 属性，是最简单有效的“软降分辨率”方式。浏览器会用更少像素做绘制，再拉伸显示，GPU/CPU 负担明显下降。
- 例如：设
canvas.width = 480、canvas.height = 320，但用 CSS 写style="width: 960px; height: 640px;"—— 实际只渲染 15.3 万像素，而非 61.4 万 - 注意关闭图像平滑：
ctx.imageSmoothingEnabled = false，否则拉伸模糊且部分浏览器会额外计算 - 所有坐标、碰撞检测仍按逻辑分辨率（如 480×320）处理，无需重写游戏逻辑
跳帧渲染（requestAnimationFrame 控制实际绘制频率）
不是每帧都调用 ctx.clearRect() 和 draw()，而是用计数器或时间差控制实际绘制节奏。对动画节奏不敏感的游戏（如文字 RPG、策略类）尤其有效。
- 常见做法：用
let frameCount = 0，每 2 或 3 帧才执行一次完整绘制，其余帧只更新逻辑 - 避免用
setTimeout替代requestAnimationFrame，否则会和屏幕刷新不同步，反而更卡 - 注意音频同步问题：音效触发不能依赖渲染帧，应基于时间戳或独立 tick
禁用不必要的 canvas 特性与图层
低配机上，哪怕一个 shadowBlur 或多一层 globalAlpha 叠加，都可能让每帧耗时翻倍。精简不是“去掉美术”，而是砍掉开销大又不显眼的效果。
