🧠 一、为何要有 栈内存 和 非堆内存（包括代码空间、MapSpace 等）？

📌 1. 栈内存 vs 堆内存：性能与功能的权衡

👉 为什么需要栈？

• 快速响应函数调用（如递归、作用域压栈）
• 更节省内存，临时变量很快被释放

👉 为什么需要堆？

• 存放动态分配和生命周期不确定的对象
• 如闭包对象、事件监听器、DOM 节点引用等

📌 2. 为什么还需要“非堆内存”空间（如 Code Space、ReadOnly Space）？

V8 除了“普通堆”，还有很多特殊用途的内存区间：

✅ 这些空间本质上是为了安全性、性能、内存利用率最大化设计的。

🛠️ 二、Chrome DevTools → Memory 面板使用技巧

Chrome DevTools 提供了强大的内存分析功能，主要用于：

• 查找内存泄漏
• 分析对象生命周期
• 监控垃圾回收行为

📌 打开方式

1. 打开 DevTools（F12 或 Ctrl + Shift + I）
2. 切换到 Memory 面板

📌 三种快照工具的作用

🧪 使用技巧（经典排查流程）

✅ 1. 分析内存泄漏（快照对比法）

1
2
3

① 打开页面 → Snapshot1
② 执行操作 → Snapshot2
③ 再清理操作（如返回、解绑）→ Snapshot3

• 对比 Snapshot2 和 Snapshot3，看是否有对象未被回收
• 用 “Object retained by” 找出哪个对象引用了它

✅ 2. 查看 Detached DOM 节点

• 搜索关键字：Detached，表示已脱离 DOM 树但仍在 JS 引用中的元素
• 这类对象非常容易导致内存泄漏（如事件未解绑）

✅ 3. 观察“retainers”（引用链）

• 在某个对象上右键 → Reveal in Summary
• 查看其被哪些对象引用
• 找到 GC 无法释放的根引用（通常是全局变量、闭包、缓存）

✅ 4. 使用 Timeline 模式分析增长

• 点击 Allocation instrumentation on timeline
• 执行交互操作
• 观察内存是否持续增长，是否 GC 无法回收

📘 小技巧列表

✅ 总结

是的，完全正确！在 JavaScript 中，栈不仅仅用于存储原始数据类型，还承担着非常核心的职责：管理函数的执行过程。我们来具体解释一下这句话：

✅ 一、栈中包含的内容

在 JavaScript 中，所谓“栈”主要是指调用栈（Call Stack），这是 JS 引擎（如 V8）在运行时用来追踪函数调用的结构。

📦 调用栈中每一层都叫一个“执行上下文（Execution Context）”，它包含：

✅ 这些内容整体就是函数的“调用帧”（Call Frame），每当你调用一个函数，JS 引擎就把这个帧压到调用栈顶部。

🔁 二、函数调用过程中的调用栈演化示例

1
2
3
4
5
6
7
8
9
10
11

function foo() {
  let a = 10;
  bar();
}

function bar() {
  let b = 20;
  console.log(b);
}

foo();

🧱 执行步骤与调用栈状态变化：

1. 初始状态

   1	[Global Execution Context] // 全局上下文入栈

2. 调用 foo()

   1 2	[foo Execution Context] // foo 调用帧压栈 [Global Execution Context]

3. foo 中调用 bar()

   1 2 3

   [bar Execution Context] // bar 调用帧压栈 [foo Execution Context] [Global Execution Context]

4. console.log 执行完毕，bar() 结束

   1 2	[foo Execution Context] // bar 出栈 [Global Execution Context]

5. foo() 结束

   1	[Global Execution Context]

6. 脚本执行结束，栈清空

   1

   []

🎯 三、作用域链也依赖“执行上下文”栈结构

• 每个执行上下文都有一个作用域链（scope chain）指针。
• JS 在查找变量时，先在当前帧找，找不到就向“外层上下文”继续查找，直到全局。

🧠 总结

如果你想深入了解如闭包变量是如何在栈与堆之间共享的、递归调用导致的栈溢出原理、或如何用 DevTools 可视化这些调用栈，我可以给你具体例子或图解。需要吗？