瀏覽器performance工具介紹及內存問題表現與監控內存的幾種方式


一.GC的目的

為了實現內存空間的良性循環,performance提供多種監控方式監控內存 分析內存相關信息 當代碼出現問題的時候及時定位到出現問題的代碼塊,

提高執行效率。

preforcemance使用步驟(以谷歌瀏覽器為例)

進入開發人員工具面板(F12)->點擊preforcemance->點擊錄制功能->點擊模塊操作,完成后->點擊停止

如上圖所示:紅色框住的就是錄制區間內內存的變化

二.當內存出現問題外在表現(首先要排除網速沒有問題)

1.頁面出現延遲加載或經常性暫停

一般與GC頻繁的垃圾操作是相關的,肯定有一個代碼塊瞬間讓我們的內存爆掉了

2.頁面持續性出現糟糕的性能

底層一般認為是內存膨脹,指的當前界面為了達到一個最佳的使用速度,可能會申請一定的內存空間這個內存空間的大小遠超過設備本

身所能提供的大小

3.頁面性能隨時間的延長越來越差

這個涉及到內存的泄露,由於某塊代碼讓我們的內存持續的增長稱之為內存泄露

三.界定內存問題的標准

1.內存泄露:內存使用持續升高

這種情況如上圖所示,通過觀察內存的走勢圖,如果持續升高不下降,則可以判斷為內存泄露,這時候需要看我們的代碼哪里出了問題

2.內存膨脹:在多數設備上都存在性能問題

需要在用戶喜愛的設備上,多做測試,如果說所有的設備都出現問題,則需要查找代碼問題。如果不是則是設備配置有問題

3.頻繁的垃圾回收:通過內存變化圖進行分析

四.監控內存的幾種方式

1.瀏覽器任務管理器

2.Timeline時序圖記錄

3.堆快照查找分離DOM

4.判斷是否存在頻繁的垃圾回收

1.任務管理器監控內存

舉例如下圖所示:

打開任務管理器 如下圖所示的‘內存占用空間’ 這里的內存指的是DOM節點所占據的內存,如果說數值在不斷增大 說明我們在創建新

DOM,最后一列JavaScript的內存指的是JavaScript的堆,這里的數值代表所有可達對象使用的內存大小,如果一直增長說明可能在

創建新對象,也可能是現有對象在不斷地增長,沒有GC消耗 所以說就有問題了,任務管理端作用更多的是判斷內存是否存在問題。

2.Timeline記錄內存

Timeline更精確的定位具體跟什么樣的腳本有關,通過時間記錄內存變化的方式來演示怎樣更精確的定位跟哪塊代碼是相關的

舉例如下圖所示:

如上圖代碼完成后,(F12)->點擊preforcemance->點擊錄制功能,可以間斷性的點擊幾次按鈕,完成后點擊停止錄播,如下圖所示:

如上圖標記1所示,點擊add之后內存瞬間暴漲,2表示點擊完成之后沒有做任何操作,所以是平穩狀態3表示GC開始垃圾回收了,4表示

瀏覽器正常的開銷 點擊了幾次以此類推。

3.堆快照查找分離DOM

什么是分離DOM

在界面上 看見很多元素,其實就是DOM節點,這些DOM節點都在一個存活的DOM樹上的,對於DOM節點有這么幾種形態,

一種是脫離了DOM樹,而且在代碼中也沒有引用着這個DOM節點,就成為了一種垃圾,稱之為垃圾。

還有一種是當前的DOM節點只是從我們的DOM樹上脫離了,在其他的代碼塊上還有所引用,這種DOM稱為分離DOM,這種

DOM是看不見的,但是在內存中真實占據着空間,這就是一種內存泄露。

堆快照簡單點來說就是找到我們的js堆,對它進行照片留存。找到分離DOM,針對代碼進行一些清除,讓我們當前的內存進行一些釋放。

下面用代碼去實現一下:

 

下面繼續用代碼去實現,在內部代碼的內部進行置空 試一下再次點擊按鈕后進行拍照后發現,分離DOM消失

如下圖

1中 我還沒有點擊按鈕 所以不存在分離DOM, 可以搜索下detached,發現沒有相應的分離DOM。

2中 點擊了按鈕,存在分離DOM節點,雖然並沒有往界面上進行添加,但是確實存在我們的堆中,這其實就是空間上的浪費,因此現

在我們就通過這種叫做堆快照的功能找到了腳本里面存在的問題,也就是分離DOM。

3中 為進行置空操作后點擊按鈕,所以並沒有分離DOM。

4.判斷是否存在頻繁GC

GC工作時應用程序是停止的,當頻繁且過長的GC會導致應用假死,用戶使用過程中感知應用卡頓確定頻繁垃圾回收的標准

確定頻繁垃圾回收的標准:

1.Timeline中頻繁的上升下降

2.任務管理器中數據頻繁的增加減小


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM