JavaScript的垃圾回收機(jī)制與內(nèi)存管理
如果我們想要優(yōu)化性能,首先我們必須得了解JavaScript中的垃圾回收機(jī)制,這樣可以將很多沒有被使用到的變量從內(nèi)存中清除掉,騰出更多的內(nèi)存空間,給別的變量分配內(nèi)存空間。
JavaScript中的垃圾回收機(jī)制
引言
本篇文章將講解一下javascript的垃圾回收機(jī)制。同時,我們必須先具備作用域鏈的概念,不懂的小伙伴可以先花5分鐘觀看一下這篇文章,簡單了解一下作用域鏈的知識——從零開始講解JavaScript中作用域鏈的概念及用途
正文
一、垃圾回收機(jī)制
在JavaScript中,具有自動垃圾回收機(jī)制,也就是說執(zhí)行環(huán)境會自動負(fù)責(zé)管理代碼執(zhí)行過程中的內(nèi)存使用情況,會自動清除一些沒有用的變量,以此來釋放內(nèi)存。該機(jī)制每隔一段時間會執(zhí)行一次。
例如下面這段代碼,函數(shù) change 在執(zhí)行時,聲明了一個局部變量my_color,然后等函數(shù)執(zhí)行完畢以后,這個局部變量也沒有作用了,所以這時垃圾回收機(jī)制就會將這個沒用的的局部變量my_color給清除掉。
let color = 'red' function change() { let my_color = 'blue' color = 'green' } change()
JavaScript中能實(shí)現(xiàn)這樣的垃圾回收的功能的一共有兩種方式: 標(biāo)記清除 、引用計(jì)數(shù)
(1)標(biāo)記清除
標(biāo)記清除是JavaScript中最常用的垃圾回收方式。它的實(shí)現(xiàn)方式是這樣的,當(dāng)代碼執(zhí)行在一個環(huán)境中時,每聲明一個變量,就會對該變量做一個標(biāo)記,例如標(biāo)記一個進(jìn)入執(zhí)行環(huán)境;當(dāng)代碼執(zhí)行進(jìn)入另一個環(huán)境中時,也就是說要離開上一個環(huán)境,這時對上一個環(huán)境中的變量做一個標(biāo)記,例如標(biāo)記一個離開執(zhí)行環(huán)境,等到垃圾回收執(zhí)行時,會根據(jù)標(biāo)記來決定要清除哪些變量。
(2)引用計(jì)數(shù)
引用計(jì)數(shù)是一種不太常用的垃圾回收方式。顧名思義,就是針對值為引用類型數(shù)據(jù)的變量進(jìn)行計(jì)數(shù),那么我們先來看一下以下這個例子,來理解一下這個方式的實(shí)現(xiàn)方式
let color = [1, 2, 3] function change() { let new_color = [4, 5, 6] color = new_color } change() console.log(color) //返回 [4, 5, 6]
這個例子中的函數(shù)change內(nèi)部聲明了一個變量new_color,并將一個引用類型值賦值給它,同時又將變量new_color賦值給了全局變量color,那么這種情況下,這個局部變量new_color就不會被當(dāng)成垃圾回收了,因?yàn)榇藭r的變量new_color并不是一個無用的局部變量了,它被全局變量color所引用了。
那么為什么變量new_color不會被當(dāng)成垃圾回收呢?其實(shí)引用計(jì)數(shù)的垃圾回收方式是這樣的,當(dāng)聲明一個變量時,會給該變量設(shè)定一個值為0的引用次數(shù),當(dāng)該變量被別的變量所引用,就將引用次數(shù)+1,若取消了原本的引用,則引用次數(shù)-1,而垃圾回收機(jī)制就是判斷一個變量的值的引用數(shù)是否為0,如果為0,就被當(dāng)成無用變量給回收掉,如果不為0,則不對該變量做任何的處理。
二、管理內(nèi)存
有時我們需要手動管理一下內(nèi)存的分配和清除,應(yīng)該很好理解,如果有更大的內(nèi)存空間,因?yàn)榭梢越o更多的變量分配內(nèi)存,就會提高代碼運(yùn)行的效率,增加線程中能夠執(zhí)行的代碼語句的數(shù)量。
所以我們要確保占用更少的內(nèi)存使得頁面獲得更好的性能,就可以只將需要用到的數(shù)據(jù)保存到變量中,一旦數(shù)據(jù)不再使用,我們可以通過給變量賦值null來釋放數(shù)據(jù)的引用,這種方法就叫做解除引用。這種方法大多數(shù)是用于全局變量,因?yàn)榫植孔兞恳话阍陔x開環(huán)境以后就會被自動清除。
我們來改變一下上面這個例子,使得變量new_color被引用完后,當(dāng)成無用變量給清除掉
let color = [1, 2, 3] function change() { let new_color = [4, 5, 6] color = new_color } change() console.log(color) //返回 [4, 5, 6] color = null
在這個例子中,函數(shù)change內(nèi)部聲明的變量new_color被全局變量color所引用,所以此時變量new_color的引用次數(shù)為1,我們?yōu)榱俗屪兞縩ew_color被清除,所以在代碼的最后一行,賦值一個null給全局變量color,手動解除了變量color對變量new_color的引用,此時變量new_color的引用次數(shù)-1,所以啊當(dāng)前它的引用次數(shù)為0了。當(dāng)垃圾回收機(jī)制執(zhí)行的時候,發(fā)現(xiàn)它的引用次數(shù)為0,就把該變量當(dāng)成無用變量給清除了,釋放了內(nèi)存。
結(jié)束語
理解了js的垃圾回收機(jī)制,我們才能修改代碼對性能進(jìn)行優(yōu)化 。好了,JavaScript的垃圾回收機(jī)制的講解就講到這里,希望對大家有所幫助。
我是前端Lpyexplore,原創(chuàng)不易,喜歡我的文章的點(diǎn)個關(guān)注,甩個贊,不嫌麻煩的評論支持一下,謝謝大家啦~
到此這篇關(guān)于JavaScript的垃圾回收機(jī)制與內(nèi)存管理的文章就介紹到這了,更多相關(guān)JavaScript的垃圾回收機(jī)制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在TypeScript中迭代對象鍵Object.keys不起作用的原因和解決方案
在TypeScript中迭代對象鍵object?keys可能是一場噩夢,以下是我所知道的所有解決方案,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-10-10moment.js使用方法總結(jié)(全網(wǎng)最全)
日常開發(fā)中通常會對時間進(jìn)行下面這幾個操作,比如獲取時間,設(shè)置時間,格式化時間,比較時間等等,下面這篇文章主要給大家介紹了關(guān)于moment.js使用方法的相關(guān)資料,需要的朋友可以參考下2024-03-03詳解JavaScript時間處理之幾個月前或幾個月后的指定日期
本篇文章主要介紹了JavaScript時間處理之幾個月前或幾個月后的指定日期 ,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2016-12-12原生JS實(shí)現(xiàn)圖片無縫滾動方法(附帶封裝的運(yùn)動框架)
下面小編就為大家?guī)硪黄鶭S實(shí)現(xiàn)圖片無縫滾動方法(附帶封裝的運(yùn)動框架)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10常用js,css文件統(tǒng)一加載方法(推薦) 并在加載之后調(diào)用回調(diào)函數(shù)
下面小編就為大家?guī)硪黄S胘s,css文件統(tǒng)一加載方法(推薦) 并在加載之后調(diào)用回調(diào)函數(shù)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09axios/fetch實(shí)現(xiàn)stream流式請求示例詳解
這篇文章主要為大家介紹了axios/fetch實(shí)現(xiàn)stream流式請求示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09一個頁面元素appendchild追加到另一個頁面元素的問題
一般都是自己創(chuàng)建元素然后append到頁面的但是如果是頁面本身有的元素append到另一個頁面元素呢,很多的新手朋友對此問題比較好奇,本人也是如此啊,好了不多說,切入主題,感興趣的朋友可以了解下哦2013-01-01