各位观众，晚上好！我是今晚的内存泄漏侦探，很高兴能和大家一起探索Chrome DevTools中的Heap Snapshots，这玩意儿就像个内存X光机，能帮我们揪出JavaScript内存泄漏的罪魁祸首，顺便看看有没有不小心泄露的敏感信息。
咱们今天就来一场实战演练，看看如何利用Heap Snapshots这把利器，从头到脚地解剖内存问题。
第一幕：内存泄漏的“案发现场”—— 什么是内存泄漏？
简单来说，内存泄漏就像你租了个房子，用完后忘了退租，房租还在一直扣，但房子你却用不着了。在JavaScript里，就是有些对象你不再需要了，但它们仍然被某些东西引用着，导致垃圾回收器（Garbage Collector，简称GC）无法回收它们，它们就一直霸占着内存，时间长了，程序就会变得越来越卡，甚至崩溃。
第二幕：作案工具—— Chrome DevTools Heap Snapshots
Chrome DevTools就是咱们的“犯罪现场调查工具箱”，而Heap Snapshots就是里面的“内存指纹收集器”。它可以拍下当前内存状态的快照，让我们能清晰地看到内存里都有些什么东西，以及它们之间的引用关系。
-
如何打开Heap Snapshots：
- 打开你的Chrome浏览器，按下F12或者右键选择“检查”。
- 在DevTools面板里，找到“Memory”选项卡（如果没看到，可能藏在“More tools”里）。
- 在“Memory”选项卡里，选择“Heap snapshot”，然后点击左侧的小圆点按钮“Take snapshot”。
-
Heap Snapshots面板概览：
拍完快照后，你会看到一个表格，里面列出了各种各样的对象，以及它们所占用的内存大小。主要关注以下几列：
- Constructor： 对象的构造函数，也就是对象的类型，比如Object、Array、Function等。
- Distance： 对象到GC根的距离，距离越远，说明越有可能被回收。
- Shallow Size： 对象自身占用的内存大小（不包括它引用的其他对象）。
- Retained Size： 对象自身以及它引用的所有其他对象占用的总内存大小。这个值是判断内存泄漏的关键指标。
第三幕：寻找真凶—— 定位内存泄漏
定位内存泄漏，就像大海捞针，需要一些技巧。这里介绍几种常用的方法：
-
比较快照（Comparison）： 这是最常用的方法。先在程序运行的某个状态拍一个快照，过一段时间（比如执行某个操作后）再拍一个快照。然后，在快照选择器里选择“Comparison”，DevTools会显示两个快照之间的差异。重点关注新增的对象和Retained Size增大的对象。
-
操作步骤：
- 拍摄第一个快照（Snapshot 1）。
- 执行可能导致内存泄漏的操作。
- 拍摄第二个快照（Snapshot 2）。
- 在快照选择器里选择“Comparison”。
- 在下拉菜单里选择“Objects allocated between Snapshot 1 and Snapshot 2”。
-
案例分析：
假设我们有一个简单的计数器应用，每次点击按钮，计数器加1，但代码里存在内存泄漏。
<!DOCTYPE html> <html> <head> <title>Memory Leak Example</title> </head> <body> <h1>Counter: <span id="counter">0</span></h1> <button id="increment">Increment</button> <script> let counter = 0; const counterElement = document.getElementById('counter'); const incrementButton = document.getElementById('increment'); // 存在内存泄漏的事件监听器 incrementButton.addEventListener('click', function() { counter++; counterElement.textContent = counter; // 每次点击都会创建一个新的、未被移除的闭包 let unusedData = new Array(100000).fill(counter); }); </script> </body> </html>我们重复点击“Increment”按钮几次，然后对比两个快照，会发现有很多Array对象（
unusedData）被分配，但没有被释放。这就是典型的内存泄漏。在Comparison视图中，我们可以看到新增的Array对象，以及它们的Retained Size。点击这些对象，可以看到它们的引用路径，从而找到泄漏的根源。
-
-
保留树（Retainers）： 找到Retained Size很大的对象后，可以通过查看它的“Retainers”来了解它为什么没有被回收。Retainers会显示引用这个对象的所有其他对象，以及它们之间的引用关系。
-
操作步骤：
- 在快照列表中找到Retained Size很大的对象。
- 点击对象名称，展开它的详细信息。
- 在详细信息面板里，切换到“Retainers”视图。
-
案例分析：
在上面的计数器例子中，
unusedData数组被一个闭包引用着，而这个闭包又被事件监听器引用着。由于事件监听器没有被移除，所以闭包和unusedData数组就一直存在于内存中。
-
-
对象分配跟踪（Allocation instrumentation on timeline）： 这种方法可以更精确地跟踪对象的分配过程。它会在Timeline面板上记录每个对象的分配信息，包括分配的时间、大小、以及分配的函数调用栈。
-
操作步骤：
- 在DevTools面板里，找到“Performance”选项卡。
- 点击“Record”按钮开始录制。
- 执行可能导致内存泄漏的操作。
- 点击“Stop”按钮停止录制。
- 在Timeline面板上，选择“Memory”视图。
- 勾选“Allocation instrumentation on timeline”复选框。
-
案例分析：
使用对象分配跟踪，我们可以看到
unusedData数组是在每次点击“Increment”按钮时分配的，并且可以看到分配的函数调用栈，从而更容易找到泄漏的代码位置。
-
-
Detached DOM tree: Detached DOM tree 是指已经从DOM树中移除，但仍然被JavaScript代码引用的DOM元素。这些元素占用了内存，但无法在页面上显示，因此会导致内存泄漏。
-
操作步骤：
- 拍摄Heap Snapshot
- 在Constructor 搜索 "HTMLDivElement"等DOM元素构造函数。
- 查看对象的 retainers，查找是否有意外的JavaScript代码引用。
- 重点关注被闭包引用的detached DOM tree.
-
案例分析：
<!DOCTYPE html> <html> <head> <title>Detached DOM Example</title> </head> <body> <div id="container"> <div id="detached">This is a detached element.</div> </div> <button id="detach">Detach</button> <script> const container = document.getElementById('container'); const detachedElement = document.getElementById('detached'); const detachButton = document.getElementById('detach'); let detachedReference = null; // 用于保存detached元素的引用 detachButton.addEventListener('click', function() { // 移除元素 container.removeChild(detachedElement); detachedReference = detachedElement; // 保存引用，导致内存泄漏 }); </script> </body> </html>点击 "Detach" 按钮后，
detachedElement从 DOM 树中移除，但由于detachedReference仍然持有它的引用，导致它无法被垃圾回收，成为一个 detached DOM 树。
-
第四幕：抓捕敏感信息泄露
Heap Snapshots不仅能帮助我们找到内存泄漏，还能发现一些潜在的敏感信息泄露。比如，不小心把用户的密码、token、或者其他敏感数据存储在全局变量里，或者在console.log里打印了出来，这些信息都有可能被留在内存快照里。
-
操作步骤：
- 拍摄Heap Snapshot
- 使用Heap Snapshot的搜索功能，搜索可能的敏感关键词，比如 "password", "token", "API Key", "secret", "privateKey"等。
- 检查搜索结果的retainers，确定敏感信息是如何被存储和引用的。
-
案例分析：
function login(username, password) { // 错误示范：将密码存储在全局变量中 window.userPassword = password; console.log("Logging in..."); } login("testUser", "mySecretPassword");拍摄快照后，搜索"mySecretPassword"，你会发现这个密码被存储在
window.userPassword里，并且可以追溯到login函数。这显然是一个安全漏洞。另一个例子：
function getSensitiveData(apiKey) { // 模拟从服务器获取敏感数据 const sensitiveData = { creditCardNumber: "1234-5678-9012-3456", securityCode: "123" }; // 错误示范：在控制台打印敏感数据 console.log("Sensitive Data:", sensitiveData); return sensitiveData; } getSensitiveData("myApiKey");即使
sensitiveData没有被显式地存储在全局变量中，但由于console.log的输出，这些数据仍然可能被留在内存快照中。
第五幕：销毁证据—— 如何避免内存泄漏和敏感信息泄露？
找到了问题，接下来就是解决问题了。以下是一些常用的技巧：
-
移除事件监听器： 如果不再需要某个事件监听器，一定要及时移除它。可以使用
removeEventListener方法。// 添加事件监听器 element.addEventListener('click', handleClick); // 移除事件监听器 element.removeEventListener('click', handleClick); -
避免全局变量： 尽量减少全局变量的使用。如果必须使用全局变量，确保在使用完毕后及时释放它们。
// 避免： window.myGlobalVariable = data; // 推荐： function myFunction() { let myLocalVariable = data; // ... } -
使用WeakMap和WeakSet：
WeakMap和WeakSet是ES6新增的特性，它们可以用来存储对对象的弱引用。弱引用不会阻止垃圾回收器回收对象。let map = new WeakMap(); let element = document.getElementById('myElement'); map.set(element, { data: 'some data' }); // 当element被移除时，map中的引用也会自动被清除 -
避免循环引用： 循环引用是指两个或多个对象互相引用，导致垃圾回收器无法回收它们。
let obj1 = {}; let obj2 = {}; obj1.ref = obj2; obj2.ref = obj1; // 循环引用 // 解决： obj1.ref = null; obj2.ref = null; -
不要在console.log里打印敏感信息: 避免在控制台输出敏感数据。如果需要调试，可以使用更加安全的方式，比如只输出数据的摘要信息，或者使用专门的调试工具。
-
及时清理闭包: 检查闭包是否持有不再需要的变量引用，并确保在使用完毕后释放这些引用。
function createClosure() { let largeData = new Array(100000).fill(0); return function() { // 使用完 largeData 后，手动释放引用 largeData = null; }; } let myClosure = createClosure(); myClosure(); // 执行闭包
结案陈词：内存安全，人人有责
内存泄漏和敏感信息泄露是JavaScript开发中常见的安全问题。通过学习和掌握Chrome DevTools Heap Snapshots的使用，我们可以有效地定位和解决这些问题，提高程序的性能和安全性。
记住，内存安全，人人有责！让我们一起努力，写出更健壮、更安全的代码！
今天的讲座就到这里，感谢大家的收听！如果大家还有什么问题，欢迎随时提问。希望大家都能成为优秀的内存泄漏侦探！