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

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

成都創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務嘉禾,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792

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

比如：

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

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

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

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

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

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

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

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

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

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

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

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

按 ESC 打開 Console，或者手動切換到 Console 面板，輸入

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

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

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

選中之后下面有詳細：

Detached DOM 的意思是這個 DOM 是游離在頁面 DOM 之外的。

運行代碼

a = "Hello";

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

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

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

上述內(nèi)容就是怎樣用Chrome開發(fā)者工具分析javascript的內(nèi)存回收，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標題：怎樣用Chrome開發(fā)者工具分析javascript的內(nèi)存回收
標題URL：http://muchs.cn/article12/pdjcgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、App設(shè)計、企業(yè)網(wǎng)站制作、網(wǎng)站營銷、微信小程序、服務器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)