前端排查内存泄漏的方法及实战案例

const button = document.querySelector("button");

// 设置事件监听器
function handleClick() {
  console.log("Button clicked!");
}

button.addEventListener("click", handleClick);

// 在不需要时移除事件监听器
button.removeEventListener("click", handleClick);

const timer = setInterval(() => {
  console.log("Interval running...");
}, 1000);

// 停止定时器
clearInterval(timer);

function createCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}

const counter = createCounter();

// 如果闭包中的 `count` 不再需要，可以将 `counter` 置为 null，避免占用内存。
counter = null;

let modal;

function openModal() {
  modal = document.createElement('div');
  modal.textContent = "This is a modal!";
  document.body.appendChild(modal);

  modal.addEventListener('click', () => {
    console.log('Modal clicked');
  });
}

// 如果没有移除事件监听器并删除 modal，内存不会释放。
function closeModal() {
  document.body.removeChild(modal);
  // 如果没有手动移除事件监听器，内存中会持续保留对 modal 的引用。
}

// 点击按钮打开弹窗
const openButton = document.querySelector('#open-modal');
openButton.addEventListener('click', openModal);

function openModal() {
  modal = document.createElement('div');
  modal.textContent = "This is a modal!";
  document.body.appendChild(modal);

  function onClick() {
    console.log('Modal clicked');
  }

  modal.addEventListener('click', onClick);

  // 关闭弹窗时，清理事件监听器
  function closeModal() {
    modal.removeEventListener('click', onClick);
    document.body.removeChild(modal);
  }

  // 可以通过其他方式调用 closeModal()，例如监听按钮点击事件
  document.querySelector('#close-modal').addEventListener('click', closeModal);
}