JavaScript 内存泄漏排查怎么检测全局变量泄漏-js教程-PHP中文网

检测全局变量泄漏最直接的方法是检查 window 对象上是否存在非预期的属性。在浏览器环境中，所有未声明的变量都会自动成为全局对象的属性，通过遍历 window 并对比已知白名单，可以定位这些意外挂载的全局变量。

JavaScript 内存泄漏排查怎么检测全局变量泄漏

如何获取当前页面的全局变量快照

可以通过编写一个脚本，收集 window 对象上的所有自有属性名，并将其转换为数组或对象格式，从而获得当前环境的全局变量快照。这个快照可以作为基准，用于后续对比。

JavaScript 内存泄漏排查怎么检测全局变量泄漏

function getGlobalSnapshot() {
  const globals = {};
  for (const key in window) {
    if (window.hasOwnProperty(key)) {
      globals[key] = true;
    }
  }
  return Object.keys(globals);
}

// 执行并打印结果
console.log(getGlobalSnapshot());

运行上述代码后，控制台会输出一个包含所有全局变量名的数组。你可以将这个数组保存下来，作为“干净”状态的参考。如果页面中存在第三方库或框架，它们也会出现在这个列表中，因此需要建立一个白名单来排除这些已知的全局标识符。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

如何对比两次快照发现新增泄漏

为了检测泄漏，需要在不同时间点获取两次全局变量快照，并找出第二次快照中多出来的变量。这些新增的变量很可能就是导致内存泄漏的根源，特别是当它们与特定的用户操作或组件生命周期相关时。

JavaScript 内存泄漏排查怎么检测全局变量泄漏

function findNewGlobals(oldSnapshot, newSnapshot) {
  const oldSet = new Set(oldSnapshot);
  const newGlobals = [];
  
  for (const key of newSnapshot) {
    if (!oldSet.has(key)) {
      newGlobals.push(key);
    }
  }
  
  return newGlobals;
}

// 假设 snapshotBefore 和 snapshotAfter 是之前获取的两个快照
// const leaks = findNewGlobals(snapshotBefore, snapshotAfter);
// console.log('Detected potential leaks:', leaks);

通过比较这两个快照，你可以精确地识别出哪些全局变量是在特定操作后新增的。结合 Chrome DevTools 的 Memory 面板，你可以进一步追踪这些变量的引用链，确认它们是否被意外保留在内存中。这种方法特别适用于检测由于闭包、事件监听器未移除或全局缓存导致的泄漏问题。