今天看啥  ›  专栏  ›  xszi

前端进阶(第一期)-调用堆栈笔记

xszi  · 掘金  ·  · 2018-12-04 06:09
阅读 129

前端进阶(第一期)-调用堆栈笔记

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



原文地址:访问原文地址
快照地址: 访问文章快照