各位观众老爷，大家好！今天咱们就来聊聊 V8 引擎的垃圾回收（Garbage Collection，简称 GC）和分配分析（Allocation Profiling），这俩货可是前端性能优化的幕后英雄。别看名字挺吓人，其实理解了它们的套路，就能像庖丁解牛一样，轻松找出代码中的内存泄漏和性能瓶颈。
开场白：内存，前端er永远的痛
作为前端程序员，我们可能不像后端兄弟那样，天天跟内存打交道。但不知大家有没有经历过这样的场景：页面越来越卡，浏览器占用内存蹭蹭上涨，最终只能祭出重启大法。这背后，很可能就是内存管理出了问题。JavaScript 是一门自带垃圾回收机制的语言，但如果使用不当，仍然会导致内存泄漏，影响用户体验。
第一部分：V8 垃圾回收机制的“爱恨情仇”
V8 引擎的垃圾回收机制，简单来说，就是自动寻找并回收不再使用的内存空间，释放资源，让程序能够继续运行。V8 主要使用两种垃圾回收算法：
-
Scavenge（新生代垃圾回收）：
- 目标：主要针对新创建的对象，也就是“新生代”区域。
- 原理：把新生代区域分成两个半区 (From 和 To)。新对象首先分配在 From 区。当 From 区快满了，就启动 Scavenge 回收。
- 过程：
- 遍历 From 区，将存活的对象复制到 To 区。
- 交换 From 区和 To 区的角色 (From 变成 To，To 变成 From)。
- From 区的所有对象都被认为是垃圾，直接释放。
- 特点：速度快，但只适合回收生命周期短的对象。如果对象在多次 Scavenge 回收中都存活下来，就会被晋升到老生代。
-
代码示例：(虽然我们不能直接控制 Scavenge，但可以模拟其行为)
function scavengeSimulation() { let fromSpace = []; let toSpace = []; // 模拟分配一些对象到 From 区 for (let i = 0; i < 10; i++) { fromSpace.push({ id: i, data: 'some data' }); } // 模拟垃圾回收，将存活对象复制到 To 区 for (let i = 0; i < fromSpace.length; i++) { if (fromSpace[i].id % 2 === 0) { // 假设 id 为偶数的对象存活 toSpace.push(fromSpace[i]); } } // 交换 From 和 To 的角色 let temp = fromSpace; fromSpace = toSpace; toSpace = temp; // 现在 From 区 (原来的 To 区) 包含了存活对象，To 区 (原来的 From 区) 可以被重用 console.log("存活对象：", fromSpace); // 显示存活对象 console.log("可回收空间：", toSpace); // 显示可回收空间 } scavengeSimulation();这个例子只是一个非常简化的模拟，实际的 Scavenge 算法要复杂得多。
-
Mark-Sweep（标记清除）和 Mark-Compact（标记整理，老生代垃圾回收）：
- 目标：主要针对生命周期长的对象，也就是“老生代”区域。
- Mark-Sweep 原理：
- 标记（Mark）：从根对象（如全局对象）开始，递归遍历所有可达对象，并标记它们为“存活”。
- 清除（Sweep）：遍历整个堆，将未标记的对象（即垃圾）清除。
- Mark-Compact 原理：
- 标记（Mark）：同 Mark-Sweep。
- 整理（Compact）：将存活对象移动到堆的一端，消除内存碎片。
- 特点：
- Mark-Sweep：可能会产生内存碎片，导致大对象无法分配。
- Mark-Compact：可以消除内存碎片，但速度较慢。
-
代码示例：(同样是模拟，不能直接控制)
function markSweepSimulation() { let heap = []; // 模拟分配一些对象到堆 for (let i = 0; i < 10; i++) { heap.push({ id: i, data: 'some data', marked: false }); // 增加一个 marked 属性 } // 模拟标记阶段 function mark(obj) { if (obj && !obj.marked) { obj.marked = true; // 假设 obj 内部引用了其他对象，递归标记 // 这里简化处理，不做递归 } } // 假设 id 为偶数的对象是可达的 for (let i = 0; i < heap.length; i++) { if (heap[i].id % 2 === 0) { mark(heap[i]); } } // 模拟清除阶段 let newHeap = []; for (let i = 0; i < heap.length; i++) { if (heap[i].marked) { newHeap.push(heap[i]); // 将存活对象添加到新堆 } else { // 释放未标记的对象 (实际中是将其标记为可回收) console.log(`对象 ${heap[i].id} 被回收`); } } console.log("存活对象：", newHeap); } markSweepSimulation();同样，这只是一个高度简化的示例，实际的 Mark-Sweep 算法复杂得多，涉及到复杂的图遍历和对象依赖关系。
GC 的“爱恨情仇”：
- 爱：自动回收内存，解放程序员的双手，降低内存泄漏的风险。
- 恨：GC 会暂停 JavaScript 程序的执行（Stop-the-World），影响性能。频繁的 GC 会导致页面卡顿。
第二部分：Allocation Profiling（分配分析）：找出内存分配的“罪魁祸首”
既然 GC 会影响性能，那么我们就需要尽量减少不必要的内存分配。Allocation Profiling 就是用来分析代码中哪些地方分配了大量内存的工具。通过它，我们可以找到内存分配的热点，并进行优化。
如何使用 Allocation Profiling？
Chrome DevTools 提供了强大的 Allocation Profiling 功能。步骤如下：
- 打开 Chrome DevTools (F12 或右键 -> 检查)。
- 切换到 "Memory" 面板。
- 选择 "Allocation instrumentation on timeline" 或 "Allocation sampling"。
- Allocation instrumentation on timeline：记录每次内存分配的详细信息，包括分配时间、分配大小、调用栈等。精度高，但开销大，适合分析短时间内的内存分配。
- Allocation sampling：定期对内存分配进行采样，开销小，适合分析长时间内的内存分配。
- 点击 "Start" 按钮开始记录。
- 执行你的代码，模拟用户操作。
- 点击 "Stop" 按钮停止记录。
- DevTools 会显示内存分配的火焰图和统计信息，帮助你找出内存分配的热点。
Allocation Profiling 的数据解读：
- 火焰图：展示了内存分配的调用栈。火焰越高，表示该调用栈分配的内存越多。
- 统计信息：
- Constructor: 显示了分配的对象类型 (例如 Object, Array, String)。
- Size: 显示了分配的内存大小。
- Count: 显示了分配的对象数量。
- Distance: 显示了对象之间的距离。
- Live Size: 显示了存活对象的大小。
- Alloc. Size: 显示了分配的对象总大小。
- Bottom-Up: 显示了从叶子节点 (分配内存的函数) 到根节点 (调用链) 的调用栈信息。
- Top-Down: 显示了从根节点到叶子节点的调用栈信息。
案例分析：一个常见的内存泄漏场景
假设我们有一个页面，需要不断地更新显示当前时间。
function updateTime() {
const now = new Date();
document.getElementById('time').textContent = now.toLocaleTimeString();
setTimeout(updateTime, 1000);
}
updateTime();这段代码看起来很简单，但实际上存在内存泄漏的风险。每次调用 updateTime 函数，都会创建一个新的 Date 对象，并更新 textContent。如果页面长时间运行，就会创建大量的 Date 对象，导致内存占用不断增加。
使用 Allocation Profiling 找到问题：
- 使用 "Allocation instrumentation on timeline" 记录一段时间的内存分配。
- 观察火焰图，你会发现
updateTime函数的调用栈高度很高，说明它分配了大量的内存。 - 查看统计信息，你会发现
Date对象的分配数量非常多。
优化方案：
避免在每次更新时都创建新的 Date 对象。
const now = new Date(); // 创建一个 Date 对象
function updateTime() {
now.setTime(Date.now()); // 更新 Date 对象的时间
document.getElementById('time').textContent = now.toLocaleTimeString();
setTimeout(updateTime, 1000);
}
updateTime();通过复用 Date 对象，我们可以避免每次都分配新的内存，从而减少内存泄漏的风险。
第三部分：内存优化的一些“奇技淫巧”
除了使用 Allocation Profiling 找出内存分配的热点，我们还可以使用一些通用的内存优化技巧。
-
避免全局变量：
全局变量会一直存在于内存中，直到页面关闭。尽量使用局部变量，并在不再需要时将其设置为
null，以便垃圾回收器可以回收它们。// 不好的做法 var globalArray = new Array(1000000); // 大量的全局变量 function doSomething() { // 使用 globalArray globalArray = null; // 即使设置为 null，globalArray 仍然存在于全局作用域中 } // 好的做法 function doSomething() { var localArray = new Array(1000000); // 局部变量 // 使用 localArray localArray = null; // 显式释放内存，更快被回收 } -
注意闭包：
闭包会引用外部函数的变量，导致这些变量无法被垃圾回收。尽量避免不必要的闭包，或者在使用完闭包后，手动解除对外部变量的引用。
function outerFunction() { var largeData = new Array(1000000); // 大量数据 function innerFunction() { // innerFunction 引用了 largeData，形成闭包 console.log(largeData.length); } return innerFunction; } var closure = outerFunction(); closure(); // 避免内存泄漏的做法 closure = null; // 解除对 outerFunction 的引用，允许垃圾回收 largeData -
及时清理事件监听器：
如果不再需要某个事件监听器，一定要及时移除它，否则会导致内存泄漏。
var element = document.getElementById('myElement'); function handleClick() { console.log('Element clicked'); } element.addEventListener('click', handleClick); // 当元素不再需要时，移除事件监听器 element.removeEventListener('click', handleClick); element = null; // 释放对元素的引用 -
使用对象池：
对于频繁创建和销毁的对象，可以使用对象池来复用对象，减少内存分配的开销。
// 对象池示例 function ObjectPool(objectFactory, initialSize) { this.objectFactory = objectFactory; this.pool = []; for (let i = 0; i < initialSize; i++) { this.pool.push(objectFactory()); } } ObjectPool.prototype.acquire = function() { if (this.pool.length > 0) { return this.pool.pop(); } else { return this.objectFactory(); // 如果池为空，则创建一个新对象 } }; ObjectPool.prototype.release = function(obj) { this.pool.push(obj); }; // 使用对象池 function createMyObject() { return { data: null }; } var myObjectPool = new ObjectPool(createMyObject, 10); // 获取对象 var obj = myObjectPool.acquire(); obj.data = 'some data'; // 使用对象 console.log(obj.data); // 释放对象 myObjectPool.release(obj); -
减少 DOM 操作：
DOM 操作是昂贵的。尽量减少 DOM 操作的次数，可以使用 DocumentFragment 或虚拟 DOM 等技术来优化。
// 不好的做法：频繁的 DOM 操作 var list = document.getElementById('myList'); for (let i = 0; i < 1000; i++) { var item = document.createElement('li'); item.textContent = 'Item ' + i; list.appendChild(item); } // 好的做法：使用 DocumentFragment var list = document.getElementById('myList'); var fragment = document.createDocumentFragment(); // 创建一个 DocumentFragment for (let i = 0; i < 1000; i++) { var item = document.createElement('li'); item.textContent = 'Item ' + i; fragment.appendChild(item); // 将 item 添加到 fragment 中 } list.appendChild(fragment); // 将 fragment 一次性添加到 list 中
表格总结：内存优化技巧
| 技巧 | 说明 | 代码示例 |
|---|---|---|
| 避免全局变量 | 尽量使用局部变量，并在不再需要时将其设置为 null。 |
function doSomething() { var localArray = new Array(1000000); localArray = null; } |
| 注意闭包 | 尽量避免不必要的闭包，或者在使用完闭包后，手动解除对外部变量的引用。 | function outerFunction() { var largeData = new Array(1000000); function innerFunction() { console.log(largeData.length); } return innerFunction; } var closure = outerFunction(); closure(); closure = null; |
| 及时清理事件监听器 | 如果不再需要某个事件监听器，一定要及时移除它。 | element.removeEventListener('click', handleClick); element = null; |
| 使用对象池 | 对于频繁创建和销毁的对象，可以使用对象池来复用对象，减少内存分配的开销。 | var myObjectPool = new ObjectPool(createMyObject, 10); var obj = myObjectPool.acquire(); obj.data = 'some data'; myObjectPool.release(obj); |
| 减少 DOM 操作 | DOM 操作是昂贵的。尽量减少 DOM 操作的次数，可以使用 DocumentFragment 或虚拟 DOM 等技术来优化。 | var fragment = document.createDocumentFragment(); for (let i = 0; i < 1000; i++) { var item = document.createElement('li'); item.textContent = 'Item ' + i; fragment.appendChild(item); } list.appendChild(fragment); |
| 避免内存泄漏 | 内存泄漏是指程序中分配的内存无法被垃圾回收器回收，导致内存占用不断增加。要避免内存泄漏，需要注意以下几点：不再使用的对象及时设置为 null、及时清理事件监听器、避免循环引用、使用 WeakMap 和 WeakSet 等。 |
//不再使用的对象设置为 null, element.removeEventListener('click', handleClick); element = null;//避免循环引用：A.b = B; B.a = A; A.b = null; B.a = null;//使用 WeakMap 和 WeakSet |
总结陈词：内存优化，永无止境
内存优化是一个持续的过程，需要我们在日常开发中不断地学习和实践。理解 V8 垃圾回收机制和 Allocation Profiling 的原理，掌握一些通用的内存优化技巧，可以帮助我们编写出更高效、更稳定的前端代码，提升用户体验。记住，代码写得溜，内存不发愁！
今天就到这里，感谢各位的观看！下次再见！