---
tags: Javascript
---

# JS記憶體存放與釋放

JavaScript 引擎具有記憶體回收的機制，會釋放不再使用的變數記憶體，基本概念為：「沒有任何的參考指向它」時則會釋放記憶體。

首先先創建一個產生大量字串的函式

function rendomString(length) {
    var result = "";
    var characters =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    var charactersLength = characters.length;
    for (var i = 0; i < length; i++) {
      result += characters.charAt(
        Math.floor(Math.random() * charactersLength)
      );
    }
    return result;
}

## 範例一：使變數維持可參考的狀態（不會釋放記憶體）
定義一個全域變數 getData，此變數會持續維持可被參考的狀態。

var getData = [];
function test_memory() {
    for (var i = 0; i < 1000; i++) {
      getData.push(rendomString(5000));
    }
}

test_memory();
console.log(getData);

可以到瀏覽器F12的記憶體，點選拍攝堆積快照，可以看到記憶體容量為6.4MB


## 範例二：使變數無法再次被參考（執行後釋放記憶體）
將變數限制在函式作用域，使變數無法再被外部參考，執行後就會釋放記憶體。

改成以下寫法

function test_memory() {
    var getData = [];
    for (var i = 0; i < 1000; i++) {
      getData.push(rendomString(5000));
    }
    console.log(getData);
}

test_memory();

再到瀏覽器F12的記憶體，點選拍攝堆積快照，可以看到記憶體容量一樣為為6.4MB，但是照理來講記憶體應該已被釋放，那是因為**Chrome的console也有占用到記憶體**的，所以在清除後可以看到變成1.4MB


## 結語

每個人Chrome瀏覽器環境不同，造成記憶體大小不同，是因為有安裝瀏覽器插件而有所不同，記憶體存放位置，就是存放在用戶端電腦以及手機，因此每個人不同的裝置也會影響網頁渲染的速度。