最简单有效的软降分辨率方式是直接缩放的CSS宽高而不改其width/height属性，并关闭imageSmoothingEnabled。
降低 canvas 渲染分辨率但保持显示尺寸
直接缩放 <canvas></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 叠加，都可能让每帧耗时翻倍。精简不是“去掉美术”，而是砍掉开销大又不显眼的效果。
- 移除所有
ctx.shadow*设置；用纯色边框或预渲染阴影贴图替代 - 避免在每帧中调用
ctx.createLinearGradient()—— 提前创建并复用 - 把静态 UI（如血条背景、按钮底图）画到单独离屏
canvas，只在变化时重绘，主循环只 blit - 慎用
ctx.globalCompositeOperation，特别是"lighter"或"xor"，部分集成显卡驱动对其优化极差
WebGL 回退到 2D 渲染时的性能陷阱
很多 HTML5 小游戏用 canvas.getContext('webgl') 初始化失败后自动切回 '2d'，但没重置状态——导致 2D 上残留 WebGL 的绑定或缓冲区逻辑，引发隐性卡顿。
立即学习“前端免费学习笔记（深入）”；
- 确保回退后完全重建渲染流程：清空所有 WebGL 相关变量、监听器、
ImageBitmap缓存 - 不要在 2D 模式下继续调用
gl.*函数（即使加了 try/catch），某些旧浏览器会卡死在驱动层 - 检查是否误用了
canvas.transferControlToOffscreen()或OffscreenCanvas—— 低配机上这些 API 反而更慢，不如直接用主线程canvas
new Image() 提前到加载阶段这种地方。 
