怎樣用Chrome開發(fā)者工具分析javascript的內(nèi)存回收

本篇文章為大家展示了怎樣用Chrome開發(fā)者工具分析javascript的內(nèi)存回收，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

今天在知乎看到一個(gè)問題："通過 createElment 創(chuàng)建的元素，不 append 到 html 中，那么此元素被自動(dòng)銷毀的時(shí)機(jī)是什么?"

比如：

var a;
(function(){
    a = document.createElment("div");
})();

a = "Hello";

此時(shí)瀏覽器能否正確銷毀和回收這個(gè)沒有被 append 到頁(yè)面上 dom 元素?

如果此元素不會(huì)被主動(dòng)銷毀或者回收，那么通過什么方法將其銷毀呢？

我們知道,這種通過 document.createElment 創(chuàng)建出來的元素，是沒有 parentNode 的，因?yàn)樗鼊?chuàng)建時(shí)候并沒有被添加到頁(yè)面中。那么如何才能銷毀它？

當(dāng)一個(gè)對(duì)象占用（使用）內(nèi)存時(shí)，使用兩種方式：直接和間接。直接占用內(nèi)存很容易理解，而間接占用內(nèi)存指對(duì)象中保持了對(duì)其它對(duì)象的引用，這樣垃圾回收（GC 機(jī)制）就無法對(duì)那些對(duì)象進(jìn)行回收。

在 GC 中一個(gè)很重要的概念就是 GC 根（GC root），當(dāng) javascript 程序中的某一個(gè)對(duì)象無法從 GC root 遍歷到時(shí)，這個(gè)對(duì)象使用的內(nèi)存就會(huì)被回收。

那么我們從原理角度分析一下最上面的代碼，當(dāng)執(zhí)行 document.createElment("div") 時(shí)創(chuàng)建了一個(gè) div 的 dom 對(duì)象，并賦值給了 a 變量，隨后又把一個(gè)字符串 "Hello" 賦值給了 a 變量。此時(shí) a 的值是 "Hello"，類型是字符串。而之前創(chuàng)建的 div 對(duì)象已經(jīng)不能通過 GC 遍歷到，因此 div 對(duì)象被回收了。如果 div 對(duì)象沒有被回收的話，我們觀察如上代碼，這個(gè)對(duì)象已經(jīng)無法被任何變量所引用，因此就會(huì)產(chǎn)生內(nèi)存泄漏。

下面我們通過使用 Chrome 的開發(fā)者工具分析一下如上代碼。

首先新建一個(gè)空白 html 頁(yè)面，頁(yè)面里面什么代碼也不寫。

為了防止干擾，在 chrome 中新建一個(gè)隱身窗口，在隱身窗口中打開這個(gè)空白頁(yè)面。

按 F12 或者 Ctrl + Shift + I，調(diào)出 devtools，選中 Profile 面板。

這時(shí)會(huì)記錄此刻的內(nèi)存使用情況

按 ESC 打開 Console，或者手動(dòng)切換到 Console 面板，輸入

var a;(function(){    a = document.createElment("div");})();

然后按 Ctrl?+?E，或者再次點(diǎn)擊 Take Heap Snapshot 按鈕，這時(shí)又會(huì)記錄一個(gè) Snapshot2，選擇 Comparison，可以將本次內(nèi)存和上次記錄的進(jìn)行對(duì)比。

差異比較多，好多可以不用管，看最后一個(gè)：

選中之后下面有詳細(xì)：

Detached DOM 的意思是這個(gè) DOM 是游離在頁(yè)面 DOM 之外的。

運(yùn)行代碼

a = "Hello";

繼續(xù)上面的步驟后，Snapshot3 和 Snapshot2 相比，DOM 被 Delete 了

Snapshot3 和 Snapshot1 相比，多了字符串 "Hello"

而通過 Heap Allocation Timeline 可以觀察到 DOM 到底在什么時(shí)候被 GC 的。

上述內(nèi)容就是怎樣用Chrome開發(fā)者工具分析javascript的內(nèi)存回收，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。