Performance 內存監控使用技巧詳解

Posted on by

Performance

介紹

為什麼使⽤Performance呢？GC 的⽬的是為瞭實現內存空間的良性循環，⽽良性循環的基⽯是合理的使⽤內存空間。 由於 ECMAScript 並沒有提供操作內存的 API，所以內存分配是否合理我們不可知。Performance 提供瞭多種⽅式，在程序運⾏時可以時時監控，確定內存分配是否合理。

使⽤

具體步驟

打開瀏覽器輸⼊⽬標⽹址

進⼊開發⼈員⼯具⾯板

開啟錄制功能，訪問具體⻚⾯

執⾏⽤戶⾏為，⼀段時間後停⽌錄制

分析界⾯中記錄的內存信息

內存問題的具體體現

內存問題的外在顯示（限定⽹絡情況正常）

  • ⻚⾯出現延遲加載或經常性暫停
    • 可能存在頻繁的垃圾回收，程序代碼可能瞬間占滿內存空間
  • ⻚⾯持續性出現糟糕的性能（卡頓）
    • 可能存在內存膨脹，為瞭達到最優的效果，程序⼀直在申請內存空間，⽽申請的空間⼤⼩遠超過當前設備能提供的內存⼤⼩。
  • ⻚⾯的性能隨時間延⻓越來越差可能存在內存泄露。某些代碼會隨著時間的增⻓，讓可⽤內存空間越來越少。 監控內存的⽅式 界定內存問題的標準
  • 內存泄漏：內存使⽤持續⾛⾼，沒有下降趨勢。 通過內存⾛勢圖可以得到相關信息
  • 內存膨脹：相對模糊。在多數設備（硬件）上都可能存在性能問題。可以測試不同的設備。 如果在常⽤設備上程序表現都⽐較差，那就不是設備問題⽽是程序本身的問題。
  • 頻繁垃圾回收：通過內存變化圖進⾏分析，通過界⾯很難感知到。

監控內存的⼏種⽅式

  • 瀏覽器任務管理器 以數值的形式，體現程序運⾏過程中內存的變化
  • Timeline時序圖記錄 以時間點的形式呈現內存的變化
  • 堆快照查找分離DOM 分離 DOM 其實就是內存的泄露。堆快照可以有針對性的查找分離DOM
  • 判斷是否存在頻繁的垃圾回收 使⽤其他⼯具 任務管理器監控 代碼演示：通過點擊事件創建⻓度很⻓的數組。
 <body>
<button id="btn">Add</button>
</body>
<script>
	const oBtn = document.getElementById('btn')
	oBtn.onclick = function(){
		let arrList = new Array(1000000)
	}
</script>

  • Memory 列表示原⽣內存。DOM 節點存儲在原⽣內存中。 如果此值正在增⼤，則說明正在創建 DOM 節點。
  • JavaScript Memory 列表示 JS 堆。此列包含兩個值。 實時數字（括號中的數字）表示⻚⾯上的可到達對象正在使⽤的內存量。 如果此數字在增⼤，要麼是正在創建新對象，要麼是現有對象正在增⻓。

此時點擊按鈕，實時內存增⼤。如果持續增⻓，當前⼯具⽆法監控。隻能判斷，⽆法定位問題。

TimeLine

可以定位問題 代碼示例：

<body>
<button id="btn">Add</button>
</body>
<script>
var x = []
function grow() {
for (var i = 0; i < 10000; i++) {
	// 創建⼤量元素
	document.body.appendChild(document.createElement('div'))
}
// 創建字符串
x.push(new Array(1000000).join('x'))
}
document.getElementById('btn').addEventListener('click', grow)
</script>

每次按代碼中引⽤的按鈕時，將向⽂檔正⽂附加 1 萬個 div 節點，並將⼀個由 100 萬個 x 字 符組成的字符串推送到 x 數組。 然後

  • 在 DevTools 上打開 Timeline ⾯板。
  • 啟⽤ Memory 復選框。
  • 做記錄。

如果查看節點計數器（綠⾊圖表），節點計數以離散步⻓⽅式增⼤。 可以假定節點計數的每次增⼤都是對 task() 的⼀次調⽤。 JS 堆圖表（藍⾊圖表）的顯示並不直接。為瞭符合最佳做法，第⼀次下降實際上是⼀次強制垃圾回收（通過按 Collect garbage 按鈕實現）。隨著記錄的進⾏， JS 堆⼤⼩⾼低交錯變化。這種現象是正常的並且在預料之中：每次點擊按鈕，JavaScript代碼都會創建 DOM 節點，在創建由 100 萬個字符組成的字符串期間，代碼會完成⼤量⼯作。這⾥的關鍵是，JS 堆在結束時會⽐開始時⼤（這⾥“開始”是指強制垃圾回收後的時間點）。在實際使⽤過程中，如果您看到這種 JS 堆⼤⼩或節點⼤⼩不斷增⼤的模式，則可能存在內存泄漏。

通過時序圖和屏幕快照，可以找到具體的問題所在。

以上就是Performance 內存監控使用技巧詳解的詳細內容，更多關於Performance 內存監控的資料請關註WalkonNet其它相關文章！

推薦閱讀：