我的JavaScript Canvas点击类游戏运行数分钟后卡顿，原因何在？

问题背景 #

已禁用包括音效、背景音乐在内的大部分功能，但游戏运行数分钟后仍出现卡顿，怀疑以下几点：

1. 是否未正确重置Timeout和Interval？
2. 大量使用document.getElementById是否会导致性能下降？
3. 脚本顶部的import语句是否有影响？

相关代码片段：

• BGM循环监听（疑似在更新循环中调用）：

bgm8.addEventListener('ended', function () {
    this.currentTime = 0;
    this.play();
}, false);

• 嵌套setTimeout示例：

setTimeout(() => {
    document.getElementById("showerDoor1").play();
    setTimeout(() => {
        document.getElementById("erlik1").play();
    }, 1000);
}, 1000);

• 初始化脚本的import语句：

import { Background } from './background.js';
import { EventZones } from './eventZones.js';
import { ClickEvents } from './clickEvents.js';
import { WaterDrop, Tile } from '../common/roomObjects.js';

逐一排查与解决方案 #

1. Timeout/Interval相关问题 #

你提供的嵌套setTimeout是一次性定时器，执行后会自动销毁，不会累积导致卡顿。但要重点排查：

• 是否存在未清理的setInterval：如果用了setInterval且未在不需要时调用clearInterval，定时器会持续运行，长期占用资源。
• 是否重复绑定事件监听：如果那段BGM的addEventListener代码是在更新循环里反复执行的，每次循环都会给bgm8新增一个ended事件监听，导致音乐结束时同时触发几十上百个回调，直接拖慢性能。必须确保这段监听代码只执行一次（比如放在初始化逻辑里，而非循环中）。

2. DOM操作的性能优化 #

频繁调用document.getElementById本身不会内存泄漏，但每次调用都会遍历DOM树，高频场景下会增加开销。建议：

• 初始化时缓存常用DOM元素：

  // 初始化时执行一次
  const showerDoor1 = document.getElementById("showerDoor1");
  const erlik1 = document.getElementById("erlik1");
  // 后续直接用变量调用
  setTimeout(() => {
      showerDoor1.play();
      setTimeout(() => {
          erlik1.play();
      }, 1000);
  }, 1000);
  

• 检查是否有频繁DOM修改：比如反复添加/删除元素、修改样式，会触发浏览器重排重绘，累积导致卡顿。尽量批量修改DOM，或使用文档片段（DocumentFragment）减少重排次数。

3. Import语句的排除 #

import是静态加载机制，只会在脚本初始化时执行一次，不会在运行时持续消耗资源，因此这部分不是卡顿原因，可以直接排除。

4. 其他潜在卡顿原因 #

• 内存泄漏排查：打开浏览器F12的Memory面板，分别在游戏刚启动、运行5分钟后各拍一次内存快照，对比是否有持续增长的对象（比如未清理的事件监听、全局数组/对象不断累积数据）。
• 高频事件监听：检查是否绑定了mousemove、scroll这类高频事件，且回调逻辑复杂，即使禁用音效，这些事件仍会持续触发消耗性能。
• 渲染性能问题：如果游戏用Canvas/WebGL渲染，检查是否每次绘制都重绘整个画布，没有使用离屏Canvas缓存静态内容。
• 垃圾回收频繁触发：避免在循环或高频回调中频繁创建临时对象/函数，减少垃圾回收的触发频率。

内容的提问来源于stack exchange，提问作者Jleger91