1. 程式人生 > >前端進階(第一期)-呼叫堆疊筆記

前端進階(第一期)-呼叫堆疊筆記

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