各位观众，大家好！我是今天的主讲人，江湖人称“代码界的福尔摩斯”，专门侦破各种疑难杂症，尤其是那些神出鬼没的“内存泄漏”。今天，咱们就来聊聊JavaScript的内存泄漏，以及如何利用Chrome Devtools这个“神兵利器”来揪出这些“潜伏者”。
首先，咱们得明白，啥叫“内存泄漏”？
一、什么是内存泄漏？
想象一下，你是个勤劳的清洁工，负责打扫房间。每次用完水桶，你都应该把水倒掉，把桶放回原位。但是，如果你用完水桶，却忘记倒水，下次再用的时候，又拿了一个新桶，时间长了，房间里就会堆满水桶，导致空间不够用。
内存泄漏就类似这个场景。在JavaScript里，当我们创建一个对象、变量、函数等等，都会占用一定的内存空间。当我们不再需要这些东西的时候，JavaScript的垃圾回收机制（Garbage Collection，简称GC）会自动回收这些内存，释放空间。但是，如果某些对象或变量，虽然我们不再使用，但因为某些原因，GC无法判断它们是否还在使用，导致它们一直占用着内存，无法被释放，这就是内存泄漏。
长期积累的内存泄漏会导致程序运行速度变慢，甚至崩溃。就像房间里堆满了水桶，你走路都费劲，最后可能直接被绊倒。
二、JavaScript中常见的内存泄漏场景
JavaScript内存泄漏的罪魁祸首有很多，但常见的就那么几个：
-
意外的全局变量：
如果你在函数内部使用一个未声明的变量，JavaScript会自动将其创建为全局变量。全局变量的生命周期很长，通常只有在关闭浏览器窗口或者刷新页面时才会释放。如果你的代码不小心创建了大量的全局变量，就会导致内存泄漏。
function foo(arg) { bar = 'something'; // bar 未声明，会被创建为全局变量 } foo(); // 修正方法：使用 'use strict'，或者显式声明变量 function safeFoo(arg) { 'use strict'; // 开启严格模式，未声明的变量会报错 var safeBar = 'something'; } safeFoo(); -
闭包：
闭包是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可以缩小变量的作用域，减少闭包的风险。 -
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; -
定时器和回调函数：
setInterval和setTimeout如果没有被正确清除，会导致回调函数一直被执行，并且回调函数中引用的变量也无法被释放。var intervalId = setInterval(function() { console.log('This will keep running...'); }, 1000); // 解决方法：在不再需要定时器时，清除它 clearInterval(intervalId); -
事件监听器：
如果添加了事件监听器，但没有在不需要的时候移除，会导致事件监听器一直存在，并且监听器中引用的变量也无法被释放。
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。它内置了强大的内存分析工具，可以帮助我们找到内存泄漏的根源。
-
打开 Devtools：
在 Chrome 浏览器中，按下
F12或者Ctrl + Shift + I(Windows) /Cmd + Option + I(Mac) 打开 Devtools。 -
切换到 "Memory" 面板：
在 Devtools 顶部，找到 "Memory" 面板，点击进入。
-
常用的内存分析工具：
-
Heap Snapshot (堆快照)： 记录指定时间点堆内存的快照，可以比较不同快照之间的差异，找出新增的对象和未被释放的对象。
-
Allocation instrumentation on timeline (时间轴上的分配检测)： 记录一段时间内的内存分配情况，可以直观地看到内存的增长趋势，以及哪些函数或代码块导致了大量的内存分配。
-
Allocation sampling (分配抽样)： 定期对内存分配进行抽样，统计哪些函数或代码块导致了内存分配，可以用于分析内存分配的热点。
-
四、利用 Heap Snapshot 查找内存泄漏
Heap Snapshot 是一种静态的内存分析方法，它会生成一个当前堆内存的快照，包含了所有对象的信息，包括对象的大小、类型、引用关系等等。我们可以通过比较不同时间点的快照，找出新增的对象和未被释放的对象，从而找到内存泄漏的原因。
-
拍摄快照：
- 打开 "Memory" 面板，选择 "Heap snapshot"。
- 点击 "Take snapshot" 按钮，生成第一个快照。
- 执行一些操作，模拟内存泄漏的场景。
- 再次点击 "Take snapshot" 按钮，生成第二个快照。
-
比较快照：
- 在快照列表中，选择第二个快照，然后在 "Select snapshot to compare to" 下拉框中选择第一个快照。
- Devtools 会显示两个快照之间的差异，包括新增、删除和修改的对象。
-
分析结果：
- 关注 "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>- 打开 Devtools，切换到 "Memory" 面板，选择 "Heap snapshot"。
- 点击 "Take snapshot" 按钮，生成第一个快照。
- 点击 "Click me" 按钮几次，模拟事件监听器的执行。
- 再次点击 "Take snapshot" 按钮，生成第二个快照。
- 选择第二个快照，然后在 "Select snapshot to compare to" 下拉框中选择第一个快照。
- 在列表中，找到 "HTMLButtonElement" 对象，可以看到 "Distance" 很大，说明它没有被回收。
- 展开 "HTMLButtonElement" 对象，可以看到它被 "Object" 对象（也就是
data对象）引用。 - 这说明
data对象没有解除对element的引用，导致element无法被垃圾回收，造成了内存泄漏。
通过 Heap Snapshot，我们可以清晰地看到内存泄漏的原因，并找到对应的代码进行修复。
五、利用 Allocation instrumentation on timeline 查找内存泄漏
Allocation instrumentation on timeline 是一种动态的内存分析方法，它会记录一段时间内的内存分配情况，可以直观地看到内存的增长趋势，以及哪些函数或代码块导致了大量的内存分配。
-
开始记录：
- 打开 "Memory" 面板，选择 "Allocation instrumentation on timeline"。
- 点击 "Start" 按钮，开始记录内存分配。
- 执行一些操作，模拟内存泄漏的场景。
- 点击 "Stop" 按钮，停止记录。
-
分析结果：
- Devtools 会显示一个时间轴，展示了内存的增长趋势。
- 可以通过拖动时间轴上的滑块，选择一段特定的时间范围进行分析。
- 在时间轴下方，会显示内存分配的详细信息，包括分配的大小、分配的函数、分配的代码位置等等。
案例分析：
假设我们有一个简单的代码，模拟了定时器导致的内存泄漏：
var count = 0; setInterval(function() { count++; console.log('Count: ' + count); }, 100);- 打开 Devtools，切换到 "Memory" 面板，选择 "Allocation instrumentation on timeline"。
- 点击 "Start" 按钮，开始记录内存分配。
- 运行代码一段时间，模拟定时器的执行。
- 点击 "Stop" 按钮，停止记录。
- 在时间轴上，可以看到内存一直在增长，说明有内存泄漏。
- 在时间轴下方，可以看到
setInterval函数一直在被调用，并且每次调用都会分配新的内存。 - 这说明定时器没有被正确清除，导致回调函数一直被执行，并且回调函数中引用的变量也无法被释放，造成了内存泄漏。
通过 Allocation instrumentation on timeline，我们可以直观地看到内存的增长趋势，并找到导致内存分配的代码，从而找到内存泄漏的原因。
六、利用 Allocation sampling 查找内存泄漏
Allocation sampling 是一种定期对内存分配进行抽样的方法，它可以统计哪些函数或代码块导致了内存分配，可以用于分析内存分配的热点。
-
开始记录：
- 打开 "Memory" 面板，选择 "Allocation sampling"。
- 点击 "Start" 按钮，开始记录内存分配。
- 执行一些操作，模拟内存泄漏的场景。
- 点击 "Stop" 按钮，停止记录。
-
分析结果：
- 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 无法释放- 打开 Devtools，切换到 "Memory" 面板，选择 "Allocation sampling"。
- 点击 "Start" 按钮，开始记录内存分配。
- 运行代码一段时间，模拟闭包的创建。
- 点击 "Stop" 按钮，停止记录。
- 在表格中，可以看到
outerFunction函数分配了大量的内存，并且innerFunction函数持有这些内存。 - 这说明闭包引用了外部函数的变量，导致外部变量无法被释放，造成了内存泄漏。
通过 Allocation sampling，我们可以快速找到内存分配的热点，并分析这些代码是否导致了内存泄漏。
七、总结
内存泄漏是JavaScript开发中一个常见的问题，但只要我们掌握了正确的分析方法和工具，就可以轻松地找到并解决这些问题。Chrome Devtools 提供了强大的内存分析工具，可以帮助我们从不同的角度来分析内存的使用情况，找到内存泄漏的原因。
- Heap Snapshot： 静态分析，可以比较不同时间点的内存快照，找出新增的对象和未被释放的对象。
- Allocation instrumentation on timeline： 动态分析，可以直观地看到内存的增长趋势，以及哪些函数或代码块导致了大量的内存分配。
- Allocation sampling： 抽样分析，可以统计哪些函数或代码块导致了内存分配，可以用于分析内存分配的热点。
记住，预防胜于治疗。在编写代码时，要注意以下几点：
- 避免创建意外的全局变量。
- 谨慎使用闭包，尽量避免在闭包中引用过大的外部变量。
- 及时解除对 DOM 元素的引用。
- 及时清除定时器和回调函数。
- 及时移除事件监听器。
掌握了这些技巧，你就可以成为一名合格的“内存泄漏侦探”，让你的代码更加健壮、高效！
今天的讲座就到这里，感谢大家的聆听！希望大家以后遇到内存泄漏，不再手足无措，而是能自信地说：“哼，小样，还想逃过我的法眼？”。