JavaScript Chap.2 ： 記憶體

在這篇文章會學到

• 記憶體是什麼?
• 記憶體該如何計算?
• 為什麼需要知道記憶體?

記憶體是什麼?

在網頁瀏覽器中記憶體扮演關鍵角色，在輸入指令時，其實都是經過以下步驟：
INPUT > 記憶體 > CPU 運算 > 回傳記憶體 > OUTPUT

其中影片更告訴我們其中原理-點我前往

1. INPUT(鍵盤)：上輸入 「A」
2. 記憶體：記憶體接收到「指令」，傳送 CPU 該指令
3. CPU運算：回傳給記憶體後，記憶體再去做
4. 回傳記憶體：記憶體將指令
5. OUTPUT(螢幕)：螢幕顯示 A 的文字

記憶體該如何計算?

觀看程式碼，請問用了幾個記憶體？

let a= 1;

這程式碼在JavaScript中，代表我們設立ａ變數並指定一個1的數值，可以很直覺的達出 1個。

但下一題呢？

let a;
a = 1;

答案一樣是一個嗎?
~
~
~
~

錯!答案為 2個， 原因為因設立a時未給予數值，系統會自動給予undefined，之後再指定為1。

那了解後，這一題呢？

let a = 1;
a += 1;

答案是一個嗎?
~
~
~
~
答案為三個，
我們拆解程式碼，可得到以下

let a = 1;
a = a+1;

會先指定a為1，再建立一個新數值1，最後相加　1+1=2 ，a被賦予值2。

若不熟悉，可以試試看下列問題是否能答對：

第 1 題

// 觀看程式碼，請問用了幾個記憶體
let a ;
a = 1;
a = "hello";
console.log(a)

第 2 題

// 觀看程式碼，請問用了幾個記憶體
let b = 3 ;
b=5;
let c = 4;
b=8;
c=c+b;
let d = b+c;
console.log(e)

第 3 題

// 觀看程式碼，請問用了幾個記憶體
let e=0;
e = 5;
e = "hello";
e = true;
e = 3;
e+=1;
console.log(e)

答案我放在最後，記得去看喔！

另外，在網頁中，可以先開啟網頁開發工具(按下F12或右鍵選檢查)，點取記憶體欄位，可利用－堆積快照功能進行拍攝快照，就可以計算出目前網頁所使用的記憶體。

選取快照畫面：

得到目前之記憶體：

為什麼需要知道記憶體?

當新增變數、數值越多，也就代表需要準備越多的記憶體。
當CPU超過負荷時，其網頁就會開始延遲 (lag) 造成使用者體驗不佳，甚至導致系統崩潰。

可以觀看莫大這篇文章，可以理解更多為什麼我們要注意網頁記憶體的原因。

以上就是本篇文章想告訴大家的。

---

記憶體練習答案：