參考:
目錄:
一 Chrome任務管理器
二 Chrome 時間軸Performance
三 Chrome Memory
一 Chrome任務管理器
這個貌似只能看一下js或者圖片占用的內存大小。對於檢查內存泄露,哪一塊泄露來說,幫助不大。
使用Chrome任務管理器,了解網頁使用的內存量。
右上角菜單,選擇工具,選擇任務管理器。

對於默認不顯示的選項。可以右鍵選擇。比如查看Javascript使用的內存。

javascirpt使用的內存

二 chrome 時間軸Performance
Performance(時間軸)面板直觀實時顯示JS內存使用情況、節點數量、監聽器數量等
開始錄制前先點擊垃圾回收-->點擊開始錄制-->點擊垃圾回收-->點擊結束錄制

三 Chrome Memory
這個功能查找內存泄露比較重要


Summary 總覽視圖:按構造函數分組。用於捕捉對象及其使用的內存。對於定位DOM內存泄露特別有用
Comparison 對比視圖:對比兩個快照。用於對比不同操作之后的堆快照,查看內存的釋放及引用計數,來分析內存是否泄露及其原因
Statistics 統計視圖:總覽堆的統計信息
其中Comparison對比視圖,這個用於檢查內存泄露比較有用。
1. 點擊開始錄制(拍照),拍下內存快照
2. 在可疑的內存泄露場景來回切換,比如你覺得退出游戲時,游戲場景有泄露,則多次進入和退出游戲,再次拍照
3. 然后對比兩張快照,發現內存泄露的來源
Constructor:構造函數,節點下的對象都是由改構造函數創建而來。
Distance:與根節點的距離。
Objects Count:對象個數及百分占比。
Shallow size:對象的直接內存總數,直接內存是指對象自身占用的內存大小。
Retained size:對象的最大保留內存,保留內存是指對象被刪除后可以釋放的那部分內存。
點擊展開構造函數,可以看到所有構造函數相關的對象實例,@后面的數字是該對象實例的唯一標識符。
