跟我學(xué)習(xí)javascript的垃圾回收機(jī)制與內(nèi)存管理
一、垃圾回收機(jī)制—GC
Javascript具有自動(dòng)垃圾回收機(jī)制(GC:Garbage Collecation),也就是說,執(zhí)行環(huán)境會(huì)負(fù)責(zé)管理代碼執(zhí)行過程中使用的內(nèi)存。
原理:垃圾收集器會(huì)定期(周期性)找出那些不在繼續(xù)使用的變量,然后釋放其內(nèi)存。
JavaScript垃圾回收的機(jī)制很簡(jiǎn)單:找出不再使用的變量,然后釋放掉其占用的內(nèi)存,但是這個(gè)過程不是實(shí)時(shí)的,因?yàn)槠溟_銷比較大,所以垃圾回收器會(huì)按照固定的時(shí)間間隔周期性的執(zhí)行。
不再使用的變量也就是生命周期結(jié)束的變量,當(dāng)然只可能是局部變量,全局變量的生命周期直至瀏覽器卸載頁面才會(huì)結(jié)束。局部變量只在函數(shù)的執(zhí)行過程中存在,而在這個(gè)過程中會(huì)為局部變量在?;蚨焉戏峙湎鄳?yīng)的空間,以存儲(chǔ)它們的值,然后在函數(shù)中使用這些變量,直至函數(shù)結(jié)束,而閉包中由于內(nèi)部函數(shù)的原因,外部函數(shù)并不能算是結(jié)束。
還是上代碼說明吧:
function fn1() { var obj = {name: 'hanzichi', age: 10}; } function fn2() { var obj = {name:'hanzichi', age: 10}; return obj; } var a = fn1(); var b = fn2();
我們來看代碼是如何執(zhí)行的。首先定義了兩個(gè)function,分別叫做fn1和fn2,當(dāng)fn1被調(diào)用時(shí),進(jìn)入fn1的環(huán)境,會(huì)開辟一塊內(nèi)存存放對(duì)象{name: 'hanzichi', age: 10},而當(dāng)調(diào)用結(jié)束后,出了fn1的環(huán)境,那么該塊內(nèi)存會(huì)被js引擎中的垃圾回收器自動(dòng)釋放;在fn2被調(diào)用的過程中,返回的對(duì)象被全局變量b所指向,所以該塊內(nèi)存并不會(huì)被釋放。
這里問題就出現(xiàn)了:到底哪個(gè)變量是沒有用的?所以垃圾收集器必須跟蹤到底哪個(gè)變量沒用,對(duì)于不再有用的變量打上標(biāo)記,以備將來收回其內(nèi)存。用于標(biāo)記的無用變量的策略可能因?qū)崿F(xiàn)而有所區(qū)別,通常情況下有兩種實(shí)現(xiàn)方式:標(biāo)記清除和引用計(jì)數(shù)。引用計(jì)數(shù)不太常用,標(biāo)記清除較為常用。
二、標(biāo)記清除
js中最常用的垃圾回收方式就是標(biāo)記清除。當(dāng)變量進(jìn)入環(huán)境時(shí),例如,在函數(shù)中聲明一個(gè)變量,就將這個(gè)變量標(biāo)記為“進(jìn)入環(huán)境”。從邏輯上講,永遠(yuǎn)不能釋放進(jìn)入環(huán)境的變量所占用的內(nèi)存,因?yàn)橹灰獔?zhí)行流進(jìn)入相應(yīng)的環(huán)境,就可能會(huì)用到它們。而當(dāng)變量離開環(huán)境時(shí),則將其標(biāo)記為“離開環(huán)境”。
function test(){ var a = 10 ; //被標(biāo)記 ,進(jìn)入環(huán)境 var b = 20 ; //被標(biāo)記 ,進(jìn)入環(huán)境 } test(); //執(zhí)行完畢 之后 a、b又被標(biāo)離開環(huán)境,被回收。
垃圾回收器在運(yùn)行的時(shí)候會(huì)給存儲(chǔ)在內(nèi)存中的所有變量都加上標(biāo)記(當(dāng)然,可以使用任何標(biāo)記方式)。然后,它會(huì)去掉環(huán)境中的變量以及被環(huán)境中的變量引用的變量的標(biāo)記(閉包)。而在此之后再被加上標(biāo)記的變量將被視為準(zhǔn)備刪除的變量,原因是環(huán)境中的變量已經(jīng)無法訪問到這些變量了。最后,垃圾回收器完成內(nèi)存清除工作,銷毀那些帶標(biāo)記的值并回收它們所占用的內(nèi)存空間。
到目前為止,IE、Firefox、Opera、Chrome、Safari的js實(shí)現(xiàn)使用的都是標(biāo)記清除的垃圾回收策略或類似的策略,只不過垃圾收集的時(shí)間間隔互不相同。
三、引用計(jì)數(shù)
引用計(jì)數(shù)的含義是跟蹤記錄每個(gè)值被引用的次數(shù)。當(dāng)聲明了一個(gè)變量并將一個(gè)引用類型值賦給該變量時(shí),則這個(gè)值的引用次數(shù)就是1。如果同一個(gè)值又被賦給另一個(gè)變量,則該值的引用次數(shù)加1。相反,如果包含對(duì)這個(gè)值引用的變量又取得了另外一個(gè)值,則這個(gè)值的引用次數(shù)減1。當(dāng)這個(gè)值的引用次數(shù)變成0時(shí),則說明沒有辦法再訪問這個(gè)值了,因而就可以將其占用的內(nèi)存空間回收回來。這樣,當(dāng)垃圾回收器下次再運(yùn)行時(shí),它就會(huì)釋放那些引用次數(shù)為0的值所占用的內(nèi)存。
function test(){ var a = {} ; //a的引用次數(shù)為0 var b = a ; //a的引用次數(shù)加1,為1 var c =a; //a的引用次數(shù)再加1,為2 var b ={}; //a的引用次數(shù)減1,為1 }
Netscape Navigator3是最早使用引用計(jì)數(shù)策略的瀏覽器,但很快它就遇到一個(gè)嚴(yán)重的問題:循環(huán)引用。循環(huán)引用指的是對(duì)象A中包含一個(gè)指向?qū)ο驜的指針,而對(duì)象B中也包含一個(gè)指向?qū)ο驛的引用。
function fn() { var a = {}; var b = {}; a.pro = b; b.pro = a; } fn();
以上代碼a和b的引用次數(shù)都是2,fn()執(zhí)行完畢后,兩個(gè)對(duì)象都已經(jīng)離開環(huán)境,在標(biāo)記清除方式下是沒有問題的,但是在引用計(jì)數(shù)策略下,因?yàn)閍和b的引用次數(shù)不為0,所以不會(huì)被垃圾回收器回收內(nèi)存,如果fn函數(shù)被大量調(diào)用,就會(huì)造成內(nèi)存泄露。在IE7與IE8上,內(nèi)存直線上升。
我們知道,IE中有一部分對(duì)象并不是原生js對(duì)象。例如,其內(nèi)存泄露DOM和BOM中的對(duì)象就是使用C++以COM對(duì)象的形式實(shí)現(xiàn)的,而COM對(duì)象的垃圾回收機(jī)制采用的就是引用計(jì)數(shù)策略。因此,即使IE的js引擎采用標(biāo)記清除策略來實(shí)現(xiàn),但js訪問的COM對(duì)象依然是基于引用計(jì)數(shù)策略的。換句話說,只要在IE中涉及COM對(duì)象,就會(huì)存在循環(huán)引用的問題。
var element = document.getElementById("some_element"); var myObject = new Object(); myObject.e = element; element.o = myObject;
這個(gè)例子在一個(gè)DOM元素(element)與一個(gè)原生js對(duì)象(myObject)之間創(chuàng)建了循環(huán)引用。其中,變量myObject有一個(gè)名為element的屬性指向element對(duì)象;而變量element也有一個(gè)屬性名為o回指myObject。由于存在這個(gè)循環(huán)引用,即使例子中的DOM從頁面中移除,它也永遠(yuǎn)不會(huì)被回收。
看上面的例子,有同學(xué)回覺得太弱了,誰會(huì)做這樣無聊的事情,其實(shí)我們是不是就在做
window.onload=function outerFunction(){ var obj = document.getElementById("element"); obj.onclick=function innerFunction(){}; };
這段代碼看起來沒什么問題,但是obj引用了document.getElementById(“element”),而document.getElementById(“element”)的onclick方法會(huì)引用外部環(huán)境中德變量,自然也包括obj,是不是很隱蔽啊。
解決辦法
最簡(jiǎn)單的方式就是自己手工解除循環(huán)引用,比如剛才的函數(shù)可以這樣
myObject.element = null; element.o = null;
window.onload=function outerFunction(){ var obj = document.getElementById("element"); obj.onclick=function innerFunction(){}; obj=null; };
將變量設(shè)置為null意味著切斷變量與它此前引用的值之間的連接。當(dāng)垃圾回收器下次運(yùn)行時(shí),就會(huì)刪除這些值并回收它們占用的內(nèi)存。
要注意的是,IE9+并不存在循環(huán)引用導(dǎo)致Dom內(nèi)存泄露問題,可能是微軟做了優(yōu)化,或者Dom的回收方式已經(jīng)改變
四、內(nèi)存管理
1、什么時(shí)候觸發(fā)垃圾回收?
垃圾回收器周期性運(yùn)行,如果分配的內(nèi)存非常多,那么回收工作也會(huì)很艱巨,確定垃圾回收時(shí)間間隔就變成了一個(gè)值得思考的問題。IE6的垃圾回收是根據(jù)內(nèi)存分配量運(yùn)行的,當(dāng)環(huán)境中存在256個(gè)變量、4096個(gè)對(duì)象、64k的字符串任意一種情況的時(shí)候就會(huì)觸發(fā)垃圾回收器工作,看起來很科學(xué),不用按一段時(shí)間就調(diào)用一次,有時(shí)候會(huì)沒必要,這樣按需調(diào)用不是很好嗎?但是如果環(huán)境中就是有這么多變量等一直存在,現(xiàn)在腳本如此復(fù)雜,很正常,那么結(jié)果就是垃圾回收器一直在工作,這樣瀏覽器就沒法兒玩兒了。
微軟在IE7中做了調(diào)整,觸發(fā)條件不再是固定的,而是動(dòng)態(tài)修改的,初始值和IE6相同,如果垃圾回收器回收的內(nèi)存分配量低于程序占用內(nèi)存的15%,說明大部分內(nèi)存不可被回收,設(shè)的垃圾回收觸發(fā)條件過于敏感,這時(shí)候把臨街條件翻倍,如果回收的內(nèi)存高于85%,說明大部分內(nèi)存早就該清理了,這時(shí)候把觸發(fā)條件置回。這樣就使垃圾回收工作職能了很多
2、合理的GC方案
1)、Javascript引擎基礎(chǔ)GC方案是(simple GC):mark and sweep(標(biāo)記清除),即:
- (1)遍歷所有可訪問的對(duì)象。
- (2)回收已不可訪問的對(duì)象。
2)、GC的缺陷
和其他語言一樣,javascript的GC策略也無法避免一個(gè)問題:GC時(shí),停止響應(yīng)其他操作,這是為了安全考慮。而Javascript的GC在100ms甚至以上,對(duì)一般的應(yīng)用還好,但對(duì)于JS游戲,動(dòng)畫對(duì)連貫性要求比較高的應(yīng)用,就麻煩了。這就是新引擎需要優(yōu)化的點(diǎn):避免GC造成的長(zhǎng)時(shí)間停止響應(yīng)。
3)、GC優(yōu)化策略
David大叔主要介紹了2個(gè)優(yōu)化方案,而這也是最主要的2個(gè)優(yōu)化方案了:
(1)分代回收(Generation GC)
這個(gè)和Java回收策略思想是一致的。目的是通過區(qū)分“臨時(shí)”與“持久”對(duì)象;多回收“臨時(shí)對(duì)象”區(qū)(young generation),少回收“持久對(duì)象”區(qū)(tenured generation),減少每次需遍歷的對(duì)象,從而減少每次GC的耗時(shí)。如圖:
這里需要補(bǔ)充的是:對(duì)于tenured generation對(duì)象,有額外的開銷:把它從young generation遷移到tenured generation,另外,如果被引用了,那引用的指向也需要修改。
(2)增量GC
這個(gè)方案的思想很簡(jiǎn)單,就是“每次處理一點(diǎn),下次再處理一點(diǎn),如此類推”。如圖:
這種方案,雖然耗時(shí)短,但中斷較多,帶來了上下文切換頻繁的問題。
因?yàn)槊糠N方案都其適用場(chǎng)景和缺點(diǎn),因此在實(shí)際應(yīng)用中,會(huì)根據(jù)實(shí)際情況選擇方案。
比如:低 (對(duì)象/s) 比率時(shí),中斷執(zhí)行GC的頻率,simple GC更低些;如果大量對(duì)象都是長(zhǎng)期“存活”,則分代處理優(yōu)勢(shì)也不大。
參考:
以上就是關(guān)于javascript的垃圾回收機(jī)制與內(nèi)存管理的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
JavaScript簡(jiǎn)單實(shí)現(xiàn)的仿微博留言功能示例
這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)的仿微博留言功能,涉及javascript頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01關(guān)于window.pageYOffset和document.documentElement.scrollTop
window.pageYOffset:Netscape屬性,指的是滾動(dòng)條頂部到網(wǎng)頁頂部的距離2011-04-04layui動(dòng)態(tài)加載多表頭的實(shí)例
今天小編就為大家分享一篇layui動(dòng)態(tài)加載多表頭的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript利用canvas實(shí)現(xiàn)鼠標(biāo)拖拽功能
這篇文章主要為大家詳細(xì)介紹了javascript利用canvas實(shí)現(xiàn)鼠標(biāo)拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07js+CSS簡(jiǎn)單實(shí)現(xiàn)瀑布流布局
瀑布流布局,是一種視覺表現(xiàn)為參差不齊的多欄布局,常用于內(nèi)容以圖片為主的頁面展示,本文將使用css和js兩種方式來實(shí)現(xiàn)瀑布流布局,需要的可以參考下2023-11-11js實(shí)現(xiàn)隨機(jī)數(shù)小游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)數(shù)小游戲,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06