Chrome的dispatchEvent内存泄漏问题

Chrome的dispatchEvent内存泄漏问题通常发生在使用addEventListener和dispatchEvent方法时，如果没有正确的移除事件监听器，会导致内存泄漏。以下是解决这个问题的一种方法：

1. 使用WeakMap来保存事件监听器和其对应的对象。WeakMap是一种特殊的Map，它的键是弱引用的，当键对象被垃圾回收时，对应的键值对会被自动删除。

const eventListeners = new WeakMap();

function addEventListener(obj, eventName, handler) {
  if (!eventListeners.has(obj)) {
    eventListeners.set(obj, new Map());
  }
  
  const objListeners = eventListeners.get(obj);
  
  if (!objListeners.has(eventName)) {
    objListeners.set(eventName, new Set());
  }
  
  const eventHandlers = objListeners.get(eventName);
  
  eventHandlers.add(handler);
  
  obj.addEventListener(eventName, handler);
}

function removeEventListener(obj, eventName, handler) {
  if (!eventListeners.has(obj)) {
    return;
  }
  
  const objListeners = eventListeners.get(obj);
  
  if (!objListeners.has(eventName)) {
    return;
  }
  
  const eventHandlers = objListeners.get(eventName);
  
  eventHandlers.delete(handler);
  
  obj.removeEventListener(eventName, handler);
}

2. 在对象被销毁前，调用一个清理函数来移除所有的事件监听器。

function cleanup(obj) {
  if (!eventListeners.has(obj)) {
    return;
  }
  
  const objListeners = eventListeners.get(obj);
  
  for (let [eventName, eventHandlers] of objListeners) {
    for (let handler of eventHandlers) {
      obj.removeEventListener(eventName, handler);
    }
  }
  
  eventListeners.delete(obj);
}

使用示例：

class MyClass {
  constructor() {
    addEventListener(window, 'resize', this.handleResize.bind(this));
  }
  
  handleResize() {
    console.log('Resized');
  }
  
  destroy() {
    removeEventListener(window, 'resize', this.handleResize.bind(this));
  }
}

const myObj = new MyClass();

// 在对象销毁前调用cleanup函数
myObj.destroy();
cleanup(window);

通过使用WeakMap来保存事件监听器和对象的关联关系，并在对象被销毁前调用cleanup函数移除事件监听器，可以有效地避免Chrome的dispatchEvent内存泄漏问题。