JavaScript中的垃圾回收和記憶體洩漏
摘要: JS記憶體管理。
- 作者:浪裡行舟
Fundebug經授權轉載,版權歸原作者所有。
前言
程式的執行需要記憶體。只要程式提出要求,作業系統或者執行時就必須供給記憶體。所謂的記憶體洩漏簡單來說是不再用到的記憶體,沒有及時釋放。為了更好避免記憶體洩漏,我們先介紹Javascript垃圾回收機制。
在C與C++等語言中,開發人員可以直接控制記憶體的申請和回收。但是在Java、C#、JavaScript語言中,變數的記憶體空間的申請和釋放都由程式自己處理,開發人員不需要關心。也就是說Javascript具有自動垃圾回收機制(Garbage Collecation)。
一、垃圾回收的必要性
下面這段話引自《JavaScript權威指南(第四版)》
由於字串、物件和陣列沒有固定大小,所有當他們的大小已知時,才能對他們進行動態的儲存分配。JavaScript程式每次建立字串、陣列或物件時,直譯器都必須分配記憶體來儲存那個實體。只要像這樣動態地分配了記憶體,最終都要釋放這些記憶體以便他們能夠被再用,否則,JavaScript的直譯器將會消耗完系統中所有可用的記憶體,造成系統崩潰。
這段話解釋了為什麼需要系統需要垃圾回收,JavaScript不像C/C++,它有自己的一套垃圾回收機制。
JavaScript垃圾回收的機制很簡單:找出不再使用的變數,然後釋放掉其佔用的記憶體,但是這個過程不是時時的,因為其開銷比較大,所以垃圾回收器會按照固定的時間間隔週期性的執行。
var a = "浪裡行舟";
var b = "前端工匠";
var a = b; //重寫a
這段程式碼執行之後,“浪裡行舟”這個字串失去了引用(之前是被a引用),系統檢測到這個事實之後,就會釋放該字串的儲存空間以便這些空間可以被再利用。
二、垃圾回收機制
垃圾回收機制怎麼知道,哪些記憶體不再需要呢?
垃圾回收有兩種方法:標記清除、引用計數。引用計數不太常用,標記清除較為常用。
1.標記清除
這是javascript中最常用的垃圾回收方式。當變數進入執行環境是,就標記這個變數為“進入環境”。從邏輯上講,永遠不能釋放進入環境的變數所佔用的記憶體,因為只要執行流進入相應的環境,就可能會用到他們。當變數離開環境時,則將其標記為“離開環境”。
垃圾收集器在執行的時候會給儲存在記憶體中的所有變數都加上標記。然後,它會去掉環境中的變數以及被環境中的變數引用的標記。而在此之後再被加上標記的變數將被視為準備刪除的變數,原因是環境中的變數已經無法訪問到這些變量了。最後。垃圾收集器完成記憶體清除工作,銷燬那些帶標記的值,並回收他們所佔用的記憶體空間。
我們用個例子,解釋下這個方法:
var m = 0,n = 19 // 把 m,n,add() 標記為進入環境。
add(m, n) // 把 a, b, c標記為進入環境。
console.log(n) // a,b,c標記為離開環境,等待垃圾回收。
function add(a, b) {
a++
var c = a + b
return c
}
2. 引用計數
所謂"引用計數"是指語言引擎有一張"引用表",儲存了記憶體裡面所有的資源(通常是各種值)的引用次數。如果一個值的引用次數是0,就表示這個值不再用到了,因此可以將這塊記憶體釋放。
上圖中,左下角的兩個值,沒有任何引用,所以可以釋放。
如果一個值不再需要了,引用數卻不為0,垃圾回收機制無法釋放這塊記憶體,從而導致記憶體洩漏。
var arr = [1, 2, 3, 4];
arr = [2, 4, 5]
console.log('浪裡行舟');
上面程式碼中,陣列[1, 2, 3, 4]是一個值,會佔用記憶體。變數arr是僅有的對這個值的引用,因此引用次數為1。儘管後面的程式碼沒有用到arr,它還是會持續佔用記憶體。至於如何釋放記憶體,我們下文介紹。
第三行程式碼中,陣列[1, 2, 3, 4]引用的變數arr又取得了另外一個值,則陣列[1, 2, 3, 4]的引用次數就減1,此時它引用次數變成0,則說明沒有辦法再訪問這個值了,因而就可以將其所佔的記憶體空間給收回來。
但是引用計數有個最大的問題: 迴圈引用
function func() {
let obj1 = {};
let obj2 = {};
obj1.a = obj2; // obj1 引用 obj2
obj2.a = obj1; // obj2 引用 obj1
}
當函式 func 執行結束後,返回值為 undefined,所以整個函式以及內部的變數都應該被回收,但根據引用計數方法,obj1 和 obj2 的引用次數都不為 0,所以他們不會被回收。
要解決迴圈引用的問題,最好是在不使用它們的時候手工將它們設為空。上面的例子可以這麼做:
obj1 = null;
obj2 = null;
三、哪些情況會引起記憶體洩漏?
雖然JavaScript會自動垃圾收集,但是如果我們的程式碼寫法不當,會讓變數一直處於“進入環境”的狀態,無法被回收。下面列一下記憶體洩漏常見的幾種情況:
1. 意外的全域性變數
function foo(arg) {
bar = "this is a hidden global variable";
}
bar沒被宣告,會變成一個全域性變數,在頁面關閉之前不會被釋放。
另一種意外的全域性變數可能由 this
建立:
function foo() {
this.variable = "potential accidental global";
}
// foo 呼叫自己,this 指向了全域性物件(window)
foo();
在 JavaScript 檔案頭部加上 'use strict',可以避免此類錯誤發生。啟用嚴格模式解析 JavaScript ,避免意外的全域性變數。
2. 被遺忘的計時器或回撥函式
var someResource = getData();
setInterval(function() {
var node = document.getElementById('Node');
if(node) {
// 處理 node 和 someResource
node.innerHTML = JSON.stringify(someResource));
}
}, 1000);
這樣的程式碼很常見,如果id為Node的元素從DOM中移除,該定時器仍會存在,同時,因為回撥函式中包含對someResource的引用,定時器外面的someResource也不會被釋放。
3. 閉包
function bindEvent(){
var obj=document.createElement('xxx')
obj.onclick=function(){
// Even if it is a empty function
}
}
閉包可以維持函式內區域性變數,使其得不到釋放。上例定義事件回撥時,由於是函式內定義函式,並且內部函式--事件回撥引用外部函式,形成了閉包。
// 將事件處理函式定義在外面
function bindEvent() {
var obj = document.createElement('xxx')
obj.onclick = onclickHandler
}
// 或者在定義事件處理函式的外部函式中,刪除對dom的引用
function bindEvent() {
var obj = document.createElement('xxx')
obj.onclick = function() {
// Even if it is a empty function
}
obj = null
}
解決之道,將事件處理函式定義在外部,解除閉包,或者在定義事件處理函式的外部函式中,刪除對dom的引用。
4. 沒有清理的DOM元素引用
有時,儲存 DOM 節點內部資料結構很有用。假如你想快速更新表格的幾行內容,把每一行 DOM 存成字典(JSON 鍵值對)或者陣列很有意義。此時,同樣的 DOM 元素存在兩個引用:一個在 DOM 樹中,另一個在字典中。將來你決定刪除這些行時,需要把兩個引用都清除。
var elements = {
button: document.getElementById('button'),
image: document.getElementById('image'),
text: document.getElementById('text')
};
function doStuff() {
image.src = 'http://some.url/image';
button.click();
console.log(text.innerHTML);
}
function removeButton() {
document.body.removeChild(document.getElementById('button'));
// 此時,仍舊存在一個全域性的 #button 的引用
// elements 字典。button 元素仍舊在記憶體中,不能被 GC 回收。
}
雖然我們用removeChild移除了button,但是還在elements物件裡儲存著#button的引用,換言之,DOM元素還在記憶體裡面。
四、記憶體洩漏的識別方法
新版本的chrome在 performance 中檢視:
步驟:
- 開啟開發者工具 Performance
- 勾選 Screenshots 和 memory
- 左上角小圓點開始錄製(record)
- 停止錄製
圖中 Heap 對應的部分就可以看到記憶體在週期性的回落也可以看到垃圾回收的週期,如果垃圾回收之後的最低值(我們稱為min),min在不斷上漲,那麼肯定是有較為嚴重的記憶體洩漏問題。
避免記憶體洩漏的一些方式:
- 減少不必要的全域性變數,或者生命週期較長的物件,及時對無用的資料進行垃圾回收
- 注意程式邏輯,避免“死迴圈”之類的
- 避免建立過多的物件
總而言之需要遵循一條原則:不用了的東西要及時歸還
五、垃圾回收的使用場景優化
1. 陣列array優化
將[]賦值給一個數組物件,是清空陣列的捷徑(例如: arr = [];),但是需要注意的是,這種方式又建立了一個新的空物件,並且將原來的陣列物件變成了一小片記憶體垃圾!實際上,將陣列長度賦值為0(arr.length = 0)也能達到清空陣列的目的,並且同時能實現陣列重用,減少記憶體垃圾的產生。
const arr = [1, 2, 3, 4];
console.log('浪裡行舟');
arr.length = 0 // 可以直接讓數字清空,而且陣列型別不變。
// arr = []; 雖然讓a變數成一個空陣列,但是在堆上重新申請了一個空陣列物件。
2. 物件儘量複用
物件儘量複用,尤其是在迴圈等地方出現建立新物件,能複用就複用。不用的物件,儘可能設定為null,儘快被垃圾回收掉。
var t = {} // 每次迴圈都會建立一個新物件。
for (var i = 0; i < 10; i++) {
// var t = {};// 每次迴圈都會建立一個新物件。
t.age = 19
t.name = '123'
t.index = i
console.log(t)
}
t = null //物件如果已經不用了,那就立即設定為null;等待垃圾回收。
3. 在迴圈中的函式表示式,能複用最好放到迴圈外面。
// 在迴圈中最好也別使用函式表示式。
for (var k = 0; k < 10; k++) {
var t = function(a) {
// 建立了10次 函式物件。
console.log(a)
}
t(k)
}
// 推薦用法
function t(a) {
console.log(a)
}
for (var k = 0; k < 10; k++) {
t(k)
}
t = null
參考資料
- JavaScript高階內幕(js高階)
- JavaScript垃圾回收機制
- JavaScript 記憶體洩漏教程
- JavaScript權威指南(第四版)
- JavaScript 中的垃圾回收
- 4類 JavaScript 記憶體洩漏及如何避免
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了10億+錯誤事件,付費客戶有Google、360、金山軟體、百姓網等眾多品牌企業。歡迎大家免費試用!
相關推薦
JavaScript中的垃圾回收和記憶體洩漏
摘要: JS記憶體管理。 作者:浪裡行舟 Fundebug經授權轉載,版權歸原作者所有。 前言 程式的執行需要記憶體。只要程式
【JavaScript基礎筆記】資料型別轉換、false值、記憶體圖、垃圾回收和深淺拷貝簡易概念
其他型別轉換成字串 xxx.toString() // var object = {a:1}; object.toString = [object Object] //這種方法對null undefined使用會報錯 xxx +
JavaScript的垃圾回收機制與記憶體洩漏
常用的兩種演算法: 引用計數(新版瀏覽器已棄用,棄用原因:會出現迴圈引用的情況,無法進行垃圾回收,導致記憶體洩漏) 標記清除 引用計數法 引用計數,顧名思義一個物件是否有指向它的引用,即看棧中是否有指向要釋放的該塊堆記憶體中的地址,如果沒有,則該塊記憶體是不需要的,可以進行釋放,即垃圾回收 下面引用大佬的一個
JavaScript: 再論setTimeout、setInterval。其第三個引數和this的討論,超時巢狀和記憶體洩漏
最近用setTimeout、setInterval,因為要傳入的函式要用到this,所以深入瞭解了一番! setTimeout和setInterval函式的第三個引數本來只是定義語言型別,後來在非IE瀏覽器下支援傳遞引數,並且在不同瀏覽器下支援的不同。 原來的set
JVM中垃圾回收機制如何判斷是否死亡?詳解引用計數法和可達性分析 !
> 因為熱愛,所以堅持。 > 文章下方有本文參考電子書和視訊的**下載地址**哦~ 這節我們主要講垃圾收集的一些基本概念,先了解垃圾收集是什麼、然後觸發條件是什麼、最後虛擬機器如何判斷物件是否死亡。 ### 一、前言 我們都知道Java和C++有一個非常大的區別就是Java有自動的垃圾回收
Javascript中的感嘆號和函數function
ava -a msg 分號 賦值 表達式 java alert 聲明 js函數前加分號和感嘆號是什麽意思?有什麽用?:http://www.cnblogs.com/mq0036/p/4605255.html function與感嘆號:https://swordair.co
JavaScript中離線應用和客戶端存儲(cookies、sessionStorage、localStorage)
getc 帶寬 元素 locals back cookie 代碼 無形中 空間名 一、離線應用 所謂離線web應用,就是在設備不能上網的情況下仍然可以運行的應用。 開發離線web應用需要幾個步驟:首先,確保應用知道設備是否能上網,以便下一步執行正確的操作;然後,應用還必須能
javascript中數組和字符串的方法比較
很多 ext javascrip new ole 多個 轉換 join() ber 前面的話 字符串和數組有很多的相同之處,它們的方法眾多,且相似度很高;但它們又有不同之處,字符串是不可變值,於是可以把其看作只讀的數組。本文將對字符串和數組的類似方法進行比較 可索引
JavaScript中的堆和棧
空間 發生 棧內存 .com cnblogs width null image 數據類型 棧(stack) 棧stack為自動分配的內存空間,它由系統自動釋放; 堆(heap) 堆heap是動態分配的內存,大小不定也不會自動釋放; JavaScript的數據類型分為兩種,基
JavaScript中的Map和Set
bob 二維數組 mic span 添加 ber {} trac 語言 JavaScript的默認對象表示方法{}可以視為其他語言中的Map或者Dictionary的數據結構,即一組鍵值對。 但是JavaScript的對象有個小問題,就是鍵必須是字符串,但實際上Number
JavaScript中:表達式和語句的區別
運算 false 第一個 ron 為我 error 直接 -- 組成 1.語句和表達式 JavaScript中的表達式和語句是有區別的.一個表達式會產生一個值,它可以放在任何需要一個值的地方,比如,作為一個函數調用的參數.下面的每行代碼都是一個表達式: myvar3
JavaScript中原始值和引用值傳遞
scrip int 性能 直接 一模一樣 post 完全 引用類型 是把 a 聲明變量時不同的內存分配: 1)原始值:存儲在棧(stack)中的簡單數據段,也就是說,它們的值直接存儲在變量訪問的位置。 這是因為這些原始類型占據的空間是固定的,所以可將他們存儲在較小的內存區
javaScript中"=="和"==="的區別
== === 區別; 區別:==, 兩邊值類型不同的時候,要先進行類型轉換,再比較。 ==,不做類型轉換,類型不同的一定不等。下面分別說明: 先說 "===",這個比較簡單。下面的規則用來判斷兩個值是否===相等: 1、如果類型不同,就不相等 2、如果兩個都是數值,並且是同一個
對比JavaScript中的Continue和Break
sta 兩個 異同點 方法 先來 rip .com class 都是 譯者按: 最好是不用,不過基礎知識要掌握。 原文: JavaScript: Continue vs Break - Learn the difference between the continue a
JavaScript的垃圾回收機制
垃圾回收器 聲明 過程 賦值 cti 變量 global light 垃圾回收 原文 https://www.jianshu.com/p/4aa1a29781cc 大綱 1、認識垃圾回收機制 2、垃圾回收機制的原理 3、垃圾回收機制的標記策略 4、垃圾回收機制
Javascript中call()方法和apply()方法的作用與區別
形式 時速 有效 let 調用函數 ply lane pan arguments ECMAScript規範所有函數都包含兩個非繼承的方法,分別為call()和apply(),這兩個函數都是在特定的作用域中調用函數,能改變函數的作用域,實際上是改變函數體內“t
關於記憶體溢位和記憶體洩漏的討論
什麼是記憶體洩漏? 程式的執行需要記憶體。只要程式提出要求,作業系統或者執行時(runtime)就必須供給記憶體。 不再用到的記憶體,沒有及時釋放,就叫做記憶體洩漏(memory leak),對於持續執行的服務程序(daemon),必須及時釋放不再用到的記憶體。否則,記
Java中的陣列和記憶體分配
理解陣列 概念:陣列是儲存同一種資料型別多個元素的集合。也可以看成是一個容器。 陣列既可以儲存基本資料型別,也可以儲存引用資料型別,只要所有的陣列元素具有相同的資料型別即可 定義陣列的方法: ①:type[] arrayName;(推薦使用這種方式) ②:ty
記憶體溢位和記憶體洩漏的區別、產生原因以及解決方案【轉】
(轉自:https://www.cnblogs.com/Sharley/p/5285045.html) 記憶體溢位 out of memory,是指程式在申請記憶體時,沒有足夠的記憶體空間供其使用,出現out of memory;比如申請了一個integer,但給它存了long才能存下的數,那就
javascript中for of和for in的區別
https://segmentfault.com/q/1010000006658882 先說結論: 推薦在迴圈物件屬性的時候,使用for...in,在遍歷陣列的時候的時候使用for...of。 for...in迴圈出的是key,for...of迴圈出的是value