canvas 游戏运行几分钟后变慢，通常并非内存泄漏或 dom 查询本身所致，而是因在动画循环中重复添加未清理的事件监听器，导致监听器数量指数级增长，严重拖慢事件处理性能。
canvas 游戏运行几分钟后变慢，通常并非内存泄漏或 dom 查询本身所致，而是因在动画循环中重复添加未清理的事件监听器，导致监听器数量指数级增长，严重拖慢事件处理性能。
在基于 requestAnimationFrame 的 Canvas 游戏中（如点选类解谜游戏），性能衰退常被误认为源于频繁的 document.getElementById、setTimeout 嵌套或模块导入——但这些操作本身是单次执行或静态加载，不会随时间持续恶化。真正危险的是在每帧更新（update loop）中反复注册同一事件监听器，例如以下典型反模式：
// ❌ 危险：在 animation loop 中反复添加，无清理
function update() {
bgm8.addEventListener('ended', function () {
this.currentTime = 0;
this.play();
});
// ...其余逻辑
}
requestAnimationFrame(update);每次调用 update() 都会为 bgm8 的 'ended' 事件新增一个监听器。若游戏运行 60 FPS 持续 5 分钟，该监听器将被注册 18,000+ 次。浏览器需在每次音频结束时遍历并执行全部监听器，造成显著延迟与卡顿。
✅ 正确做法：避免重复注册
方案一：一次性监听（推荐）
利用 { once: true } 选项，确保监听器自动移除，无需手动管理：
// ✅ 安全：监听一次，自动清理
bgm8.addEventListener('ended', () => {
bgm8.currentTime = 0;
bgm8.play().catch(e => console.warn("Audio play failed:", e));
}, { once: true });若需循环播放，可在回调内重新注册自身（仍带 { once: true }），形成可控链式调用：
function loopAudio(audioEl) {
audioEl.addEventListener('ended', () => {
audioEl.currentTime = 0;
audioEl.play().catch(e => console.warn("Play failed:", e));
loopAudio(audioEl); // 递归注册下一次
}, { once: true });
}
loopAudio(bgm8);方案二：显式管理引用（适用于需动态控制的场景）
若需中途取消监听，须保存函数引用并显式移除：
const onEnded = () => {
bgm8.currentTime = 0;
bgm8.play();
};
// 注册前先移除旧监听（确保唯一性）
bgm8.removeEventListener('ended', onEnded);
bgm8.addEventListener('ended', onEnded);⚠️ 注意：匿名函数无法被 removeEventListener 移除，因此必须使用具名函数或变量引用。
其他常见误区澄清
- document.getElementById 不是性能瓶颈：DOM 查询虽有开销，但现代浏览器已高度优化；即使高频调用，也不会随时间“越跑越慢”。真正需优化的是缓存引用（如 const door1 = document.getElementById("showerDoor1");），而非归咎于查询本身。
- setTimeout 嵌套非主因：示例中的双层 setTimeout 属于一次性调度，不会累积。但若在循环中滥用 setInterval 且未 clearInterval，则会导致定时器堆积——务必确保所有周期性任务均有明确销毁逻辑。
- ES Module import 无运行时开销：模块在脚本加载阶段解析并缓存，与运行时性能无关，可排除。
总结
Canvas 游戏的渐进式卡顿，90% 以上源于事件监听器的失控注册。请严格遵循：
- ✅ 所有事件监听器应在初始化阶段（而非 update/render 循环中）注册；
- ✅ 优先使用 { once: true } 实现自清理；
- ✅ 避免在循环中调用 addEventListener，除非配套 removeEventListener 且持有函数引用；
- ✅ 使用浏览器开发者工具的 Performance 面板 录制 30 秒运行，重点关注 EventDispatch 和 FunctionCall 的耗时分布，快速定位监听器热点。
修复后，游戏帧率将恢复稳定，告别“越玩越卡”的体验。
