发布于 由admin

JavaScript内核与高级编程之：`JavaScript`的`Memory Leak`：如何利用`Chrome` `Devtools`进行内存泄漏排查。

各位观众，大家好！我是今天的主讲人，江湖人称“代码界的福尔摩斯”，专门侦破各种疑难杂症，尤其是那些神出鬼没的“内存泄漏”。今天，咱们就来聊聊JavaScript的内存泄漏，以及如何利用Chrome Devtools这个“神兵利器”来揪出这些“潜伏者”。

首先，咱们得明白，啥叫“内存泄漏”？

一、什么是内存泄漏？

想象一下，你是个勤劳的清洁工，负责打扫房间。每次用完水桶，你都应该把水倒掉，把桶放回原位。但是，如果你用完水桶，却忘记倒水，下次再用的时候，又拿了一个新桶，时间长了，房间里就会堆满水桶，导致空间不够用。

内存泄漏就类似这个场景。在JavaScript里，当我们创建一个对象、变量、函数等等，都会占用一定的内存空间。当我们不再需要这些东西的时候，JavaScript的垃圾回收机制（Garbage Collection，简称GC）会自动回收这些内存，释放空间。但是，如果某些对象或变量，虽然我们不再使用，但因为某些原因，GC无法判断它们是否还在使用，导致它们一直占用着内存，无法被释放，这就是内存泄漏。

长期积累的内存泄漏会导致程序运行速度变慢，甚至崩溃。就像房间里堆满了水桶，你走路都费劲，最后可能直接被绊倒。

二、JavaScript中常见的内存泄漏场景

JavaScript内存泄漏的罪魁祸首有很多，但常见的就那么几个：

  1. 意外的全局变量：

    如果你在函数内部使用一个未声明的变量，JavaScript会自动将其创建为全局变量。全局变量的生命周期很长，通常只有在关闭浏览器窗口或者刷新页面时才会释放。如果你的代码不小心创建了大量的全局变量，就会导致内存泄漏。

    function foo(arg) {
  bar = 'something'; // bar 未声明，会被创建为全局变量
}

foo();

// 修正方法：使用 'use strict'，或者显式声明变量
function safeFoo(arg) {
  'use strict'; // 开启严格模式，未声明的变量会报错
  var safeBar = 'something';
}

safeFoo();

  2. 闭包：

    闭包是JavaScript中一个强大的特性，但也容易造成内存泄漏。如果闭包引用了外部函数的变量，即使外部函数已经执行完毕，这些变量仍然会保存在内存中。如果闭包一直存在，这些变量就无法被释放。

    function outerFunction() {
  var veryBigData = new Array(1000000).join('*'); // 模拟一个很大的数据
  var innerFunction = function() {
    console.log(veryBigData); // innerFunction 引用了 outerFunction 的 veryBigData
  };
  return innerFunction;
}

var theClosure = outerFunction(); // theClosure 保存了 innerFunction，导致 veryBigData 无法释放

// 解决方法：在不再需要闭包时，手动解除对外部变量的引用
theClosure = null; // 解除引用，让 GC 可以回收 veryBigData

    表格总结闭包问题及解决方案

    问题 描述 解决方案
    闭包引用外部变量，导致外部变量无法释放 当内部函数（闭包）引用了外部函数的变量时，即使外部函数已经执行完毕，这些变量仍然会保存在内存中。如果闭包一直存在，这些变量就无法被释放。 1. 尽量避免在闭包中引用过大的外部变量。
    2. 在不再需要闭包时，手动解除对外部变量的引用（设置为null）。
    3. 使用ES6的let和const可以缩小变量的作用域，减少闭包的风险。

  3. DOM 引用：

    如果 JavaScript 对象引用了 DOM 元素，即使 DOM 元素从页面中移除，JavaScript 对象仍然会持有对它的引用，导致 DOM 元素无法被垃圾回收。

    var element = document.getElementById('myElement');
var data = {
  element: element // data 对象引用了 DOM 元素
};

// 从页面中移除 element
element.parentNode.removeChild(element);
element = null; // 解除引用

// 如果 data 对象一直存在，element 仍然无法被垃圾回收
// 解决方法：解除 data 对象对 element 的引用
data.element = null;

  4. 定时器和回调函数：

    setInterval 和 setTimeout 如果没有被正确清除，会导致回调函数一直被执行，并且回调函数中引用的变量也无法被释放。

    var intervalId = setInterval(function() {
  console.log('This will keep running...');
}, 1000);

// 解决方法：在不再需要定时器时，清除它
clearInterval(intervalId);

  5. 事件监听器：

    如果添加了事件监听器，但没有在不需要的时候移除，会导致事件监听器一直存在，并且监听器中引用的变量也无法被释放。

    var element = document.getElementById('myButton');
function handleClick() {
  console.log('Button clicked!');
}

element.addEventListener('click', handleClick);

// 解决方法：在不再需要监听器时，移除它
element.removeEventListener('click', handleClick);
element = null; // 解除引用

三、Chrome Devtools：内存泄漏侦查利器

现在，我们有了“犯罪现场”的线索，接下来就要请出我们的“侦查利器”—— Chrome Devtools。它内置了强大的内存分析工具，可以帮助我们找到内存泄漏的根源。

  1. 打开 Devtools：

    在 Chrome 浏览器中，按下 F12 或者 Ctrl + Shift + I (Windows) / Cmd + Option + I (Mac) 打开 Devtools。

  2. 切换到 "Memory" 面板：

    在 Devtools 顶部，找到 "Memory" 面板，点击进入。

  3. 常用的内存分析工具：

    • Heap Snapshot (堆快照)： 记录指定时间点堆内存的快照，可以比较不同快照之间的差异，找出新增的对象和未被释放的对象。

    • Allocation instrumentation on timeline (时间轴上的分配检测)： 记录一段时间内的内存分配情况，可以直观地看到内存的增长趋势，以及哪些函数或代码块导致了大量的内存分配。

    • Allocation sampling (分配抽样)： 定期对内存分配进行抽样，统计哪些函数或代码块导致了内存分配，可以用于分析内存分配的热点。

四、利用 Heap Snapshot 查找内存泄漏

Heap Snapshot 是一种静态的内存分析方法，它会生成一个当前堆内存的快照，包含了所有对象的信息，包括对象的大小、类型、引用关系等等。我们可以通过比较不同时间点的快照，找出新增的对象和未被释放的对象，从而找到内存泄漏的原因。

  1. 拍摄快照：

    • 打开 "Memory" 面板，选择 "Heap snapshot"。
    • 点击 "Take snapshot" 按钮，生成第一个快照。
    • 执行一些操作，模拟内存泄漏的场景。
    • 再次点击 "Take snapshot" 按钮，生成第二个快照。

  2. 比较快照：

    • 在快照列表中，选择第二个快照，然后在 "Select snapshot to compare to" 下拉框中选择第一个快照。
    • Devtools 会显示两个快照之间的差异，包括新增、删除和修改的对象。

  3. 分析结果：

    • 关注 "Distance" 列，它表示对象到 GC Roots 的距离。距离越远，说明对象越有可能被回收。
    • 关注 "Retained Size" 列，它表示对象自身占用的内存大小，以及它所持有的其他对象占用的内存大小总和。
    • 关注 "Constructor" 列，它表示对象的构造函数。可以根据构造函数来判断对象的类型。

    案例分析：

    假设我们有一个简单的代码，模拟了 DOM 引用导致的内存泄漏：

    <!DOCTYPE html>
<html>
<head>
  <title>Memory Leak Example</title>
</head>
<body>
  <button id="myButton">Click me</button>
  <script>
    var element = document.getElementById('myButton');
    var data = {
      element: element // data 对象引用了 DOM 元素
    };

    element.addEventListener('click', function() {
      console.log('Button clicked!');
    });

    // 移除 element
    element.parentNode.removeChild(element);
    element = null; // 解除引用

    // 错误：data 对象没有解除对 element 的引用，导致内存泄漏
    // data.element = null; // 正确的做法
  </script>
</body>
</html>
    1. 打开 Devtools，切换到 "Memory" 面板，选择 "Heap snapshot"。
    2. 点击 "Take snapshot" 按钮，生成第一个快照。
    3. 点击 "Click me" 按钮几次，模拟事件监听器的执行。
    4. 再次点击 "Take snapshot" 按钮，生成第二个快照。
    5. 选择第二个快照，然后在 "Select snapshot to compare to" 下拉框中选择第一个快照。
    6. 在列表中，找到 "HTMLButtonElement" 对象，可以看到 "Distance" 很大，说明它没有被回收。
    7. 展开 "HTMLButtonElement" 对象，可以看到它被 "Object" 对象（也就是 data 对象）引用。
    8. 这说明 data 对象没有解除对 element 的引用，导致 element 无法被垃圾回收，造成了内存泄漏。

    通过 Heap Snapshot，我们可以清晰地看到内存泄漏的原因，并找到对应的代码进行修复。

五、利用 Allocation instrumentation on timeline 查找内存泄漏

Allocation instrumentation on timeline 是一种动态的内存分析方法，它会记录一段时间内的内存分配情况，可以直观地看到内存的增长趋势，以及哪些函数或代码块导致了大量的内存分配。

  1. 开始记录：

    • 打开 "Memory" 面板，选择 "Allocation instrumentation on timeline"。
    • 点击 "Start" 按钮，开始记录内存分配。
    • 执行一些操作，模拟内存泄漏的场景。
    • 点击 "Stop" 按钮，停止记录。

  2. 分析结果：

    • Devtools 会显示一个时间轴，展示了内存的增长趋势。
    • 可以通过拖动时间轴上的滑块，选择一段特定的时间范围进行分析。
    • 在时间轴下方，会显示内存分配的详细信息，包括分配的大小、分配的函数、分配的代码位置等等。

    案例分析：

    假设我们有一个简单的代码，模拟了定时器导致的内存泄漏：

    var count = 0;
setInterval(function() {
  count++;
  console.log('Count: ' + count);
}, 100);
    1. 打开 Devtools，切换到 "Memory" 面板，选择 "Allocation instrumentation on timeline"。
    2. 点击 "Start" 按钮，开始记录内存分配。
    3. 运行代码一段时间，模拟定时器的执行。
    4. 点击 "Stop" 按钮，停止记录。
    5. 在时间轴上，可以看到内存一直在增长，说明有内存泄漏。
    6. 在时间轴下方，可以看到 setInterval 函数一直在被调用，并且每次调用都会分配新的内存。
    7. 这说明定时器没有被正确清除，导致回调函数一直被执行，并且回调函数中引用的变量也无法被释放，造成了内存泄漏。

    通过 Allocation instrumentation on timeline，我们可以直观地看到内存的增长趋势，并找到导致内存分配的代码，从而找到内存泄漏的原因。

六、利用 Allocation sampling 查找内存泄漏

Allocation sampling 是一种定期对内存分配进行抽样的方法，它可以统计哪些函数或代码块导致了内存分配，可以用于分析内存分配的热点。

  1. 开始记录：

    • 打开 "Memory" 面板，选择 "Allocation sampling"。
    • 点击 "Start" 按钮，开始记录内存分配。
    • 执行一些操作，模拟内存泄漏的场景。
    • 点击 "Stop" 按钮，停止记录。

  2. 分析结果：

    • Devtools 会显示一个表格，展示了内存分配的统计信息，包括分配的大小、分配的函数、分配的代码位置等等。
    • 可以根据 "Self Size" 列来排序，找到分配内存最多的函数或代码块。
    • 可以根据 "Total Size" 列来排序，找到持有内存最多的函数或代码块。

    案例分析：

    假设我们有一个简单的代码，模拟了闭包导致的内存泄漏：

    function outerFunction() {
  var veryBigData = new Array(1000000).join('*'); // 模拟一个很大的数据
  var innerFunction = function() {
    console.log(veryBigData); // innerFunction 引用了 outerFunction 的 veryBigData
  };
  return innerFunction;
}

var theClosure = outerFunction(); // theClosure 保存了 innerFunction，导致 veryBigData 无法释放
    1. 打开 Devtools，切换到 "Memory" 面板，选择 "Allocation sampling"。
    2. 点击 "Start" 按钮，开始记录内存分配。
    3. 运行代码一段时间，模拟闭包的创建。
    4. 点击 "Stop" 按钮，停止记录。
    5. 在表格中，可以看到 outerFunction 函数分配了大量的内存，并且 innerFunction 函数持有这些内存。
    6. 这说明闭包引用了外部函数的变量，导致外部变量无法被释放，造成了内存泄漏。

    通过 Allocation sampling，我们可以快速找到内存分配的热点，并分析这些代码是否导致了内存泄漏。

七、总结

内存泄漏是JavaScript开发中一个常见的问题，但只要我们掌握了正确的分析方法和工具，就可以轻松地找到并解决这些问题。Chrome Devtools 提供了强大的内存分析工具，可以帮助我们从不同的角度来分析内存的使用情况，找到内存泄漏的原因。

  • Heap Snapshot： 静态分析，可以比较不同时间点的内存快照，找出新增的对象和未被释放的对象。
  • Allocation instrumentation on timeline： 动态分析，可以直观地看到内存的增长趋势，以及哪些函数或代码块导致了大量的内存分配。
  • Allocation sampling： 抽样分析，可以统计哪些函数或代码块导致了内存分配，可以用于分析内存分配的热点。

记住，预防胜于治疗。在编写代码时，要注意以下几点：

  • 避免创建意外的全局变量。
  • 谨慎使用闭包，尽量避免在闭包中引用过大的外部变量。
  • 及时解除对 DOM 元素的引用。
  • 及时清除定时器和回调函数。
  • 及时移除事件监听器。

掌握了这些技巧，你就可以成为一名合格的“内存泄漏侦探”，让你的代码更加健壮、高效！

今天的讲座就到这里，感谢大家的聆听！希望大家以后遇到内存泄漏，不再手足无措，而是能自信地说：“哼，小样，还想逃过我的法眼？”。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注