Performance 記憶體監控使用技巧詳解

2022-10-12 14:01:49

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 記憶體監控的資料請關注it145.com其它相關文章！

Performance 記憶體監控使用技巧詳解

目錄

Performance

介紹

使⽤

記憶體問題的具體體現

監控記憶體的⼏種⽅式

TimeLine

熱門文章