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

前言

在前端开发中，内存泄漏是指应用程序在运行过程中未能释放不再使用的内存，导致内存占用不断增加，最终可能导致页面性能下降甚至崩溃。排查内存泄漏通常需要通过一些工具和方法来识别不释放的资源。

常见的内存泄漏来源

未清除的事件监听器： 事件监听器没有在不需要时被移除，导致引用未被释放。
闭包（Closure）问题： 闭包中的引用无法释放，导致内存泄漏。
DOM元素的引用： 某些元素在页面中已经移除，但仍被JavaScript引用，导致内存无法回收。
定时器和异步操作： setInterval、setTimeout、Promise等异步操作没有被清除，导致内存泄漏。

排查方法

使用 Chrome DevTools 进行内存分析

Chrome 开发者工具提供了内存分析工具，可以帮助开发者检查内存使用情况并定位内存泄漏问题。

步骤：

打开 Chrome 开发者工具（F12），切换到 “Memory” 面板。
在 “Memory” 面板中有几种方式可以检查内存：
- Heap Snapshot：可以查看内存堆快照，分析对象的分配情况，识别泄漏的对象。
- Allocation Timeline：记录内存分配情况，观察内存分配的趋势，可以发现内存增长的原因。
- Allocations Instrumentation on Timeline：记录实时的内存分配活动，适用于实时分析。

示例：

Heap Snapshot：可以获取当前堆内存的快照，分析哪些对象占用了最多的内存，以及哪些对象的引用链存在泄漏。
Allocation Timeline：通过长时间的内存分配追踪，可以发现内存占用异常增长的区域，进一步查找泄漏的来源。

代码中手动排查

除了使用开发者工具外，还可以从代码本身排查内存泄漏的常见问题：

事件监听器：确保在不需要的时候移除事件监听器。

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;

使用内存泄漏检查工具

Why-did-you-render： 这是一个 React 项目的工具，用来检查组件渲染是否合理，避免不必要的渲染导致的内存泄漏。
LeakCanary： 虽然这个工具是针对 Android 的，但类似的内存泄漏检测方法也可以应用到前端。通过长时间监控应用的内存使用，检查是否存在内存泄漏。

手动记录和比对内存占用

开发者可以手动记录不同操作（例如点击按钮、加载新页面等）前后的内存占用变化，从而查看内存是否持续增长。

一个简单的内存泄漏案例

假设有一个页面包含一个按钮，用户点击按钮会打开一个弹窗。如果每次点击时都创建一个新的弹窗组件，但是没有正确清除先前的弹窗事件，可能会导致内存泄漏。

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);
}