前端进阶（第一期）-调用堆栈笔记

原文地址：

1-1 理解 Javascript 执行上下文和执行栈

1-2 JavaScript深刻之执行上下文栈

1-3 内存空间详细图解

1-4 JavaScript深刻之带你走进内存机制

1-5 JavaScript深刻之4类常见内存泄漏及如何避免

1-1 理解 Javascript 执行上下文和执行栈

原文地址

知识点有：

1. JavaScript程序的内部执行机制；
2. 理解执行上下文和执行栈；

理解以上知识点有助于理解JavaScript的提高机制、做用域和闭包

执行上下文

执行上下文就是当前JavaScript代码被解析和执行时所在环境的抽象概念,JavaScript 中运行任何的代码都是在执行上下文中运行。

• 全局执行上下文
• 函数执行上下文
• Eval函数执行上下文

执行栈

执行上下文是如何建立的

分两阶段建立

1. 建立阶段
2. 执行阶段

总结

• 理解了执行上下文的定义及执行栈
• 对执行上下文的建立依然一头雾水

1-2 JavaScript深刻之执行上下文栈

原文地址

知识点有：

1. JavaScript 代码执行顺序(变量提高，函数提高)
2. 使用push、pop伪代码解释代码执行顺序

执行顺序

JavaScript 引擎并不是一行一行地分析和执行程序，而是一段一段地分析执行。

1-3 内存空间详细图解

原文地址

知识点有：

1. 变量对象与堆内存
2. 堆(heap)，栈(stack)与队列(queue)三种数据结构
3. 值类型数据和引用数据类型的复制
4. 内存空间管理

变量对象与堆内存图解

var a = 20;
var b = 'abc';
var c = true;
var d = { m: 20 }
复制代码

值类型数据和引用数据类型的复制

• 值类型数据是值的复制，开辟新的存储空间来存储值，复制先后的数据之间无联系。
• 引用类型数据仅仅是地址的复制，开辟新的存储空间来存储地址指针，复制先后的地址指针指向堆中同一个值。

内存空间管理

在JavaScript中，最经常使用的是经过标记清除的算法来找到哪些对象是再也不继续使用的，a=null是一个释放引用的操做，脱离执行环境，这个值会在下一次垃圾收集器执行操做时被找到并释放。

1-4 JavaScript深刻之带你走进内存机制

原文地址

JavaScript的内存管理机制是:内存基元在变量（对象，字符串等等）建立时分配，而后在他们再也不被使用时“自动”释放。后者被称为垃圾回收。

知识点有：

1. 内存模型
2. 内存的生命周期
3. 内存回收算法
4. 内存泄漏

内存模型

JS内存空间分为栈(stack)、堆(heap)、池(通常也会归类为栈中)。 其中栈存放变量，堆存放复杂对象，池存放常量。

内存的生命周期

内存分配 --- 内存使用 --- 内存回收

内存回收算法

• 引用计数算法

存在一个致命的问题：循环引用。若是两个对象相互引用，尽管他们已再也不使用，垃圾回收器不会进行回收，致使内存泄露。

• 标记清除算法

标记清除算法将“再也不使用的对象”定义为“没法达到的对象”。从根部（在JS中就是全局对象）出发定时扫描内存中的对象，凡是能从根部到达的对象，都是还须要使用的。那些没法由根部出发触及到的对象被标记为再也不使用，稍后进行回收。

内存泄漏

• 内存泄漏的识别方法

1. 浏览器方法
2. 命令行方法
3. WeakMap（ES6）

1-5 JavaScript深刻之4类常见内存泄漏及如何避免

原文地址

知识点有：

1. 三种常见 JavaScript 内存泄漏
2. 闭包
3. Chrome 内存剖析工具

四种常见 JavaScript 内存泄漏

• 意外的全局变量

在 JavaScript 文件头部加上 'use strict'，能够避免此类错误发生。启用严格模式解析 JavaScript ，避免意外的全局变量。

• 被遗忘的计时器或回调函数
• 脱离 DOM 的引用
• 闭包

本质上，闭包的链表已经建立，每个闭包做用域携带一个指向大数组的间接的引用，形成严重的内存泄漏。

Chrome 内存剖析工具

1. Timeline
2. Profiles