Performance 內存監(jiān)控使用技巧詳解

更新時間：2022年10月08日 17:05:15 作者：河北小寶

這篇文章主要為大家介紹了Performance 內存監(jiān)控使用技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

Performance

介紹

為什么使?Performance呢？GC 的?的是為了實現(xiàn)內存空間的良性循環(huán)，?良性循環(huán)的基?是合理的使?內存空間。由于 ECMAScript 并沒有提供操作內存的 API，所以內存分配是否合理我們不可知。Performance 提供了多種?式，在程序運?時可以時時監(jiān)控，確定內存分配是否合理。

使?

具體步驟

打開瀏覽器輸??標?址

進?開發(fā)?員?具?板

開啟錄制功能，訪問具體??

執(zhí)??戶?為，?段時間后停?錄制

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

內存問題的具體體現(xiàn)

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

??出現(xiàn)延遲加載或經(jīng)常性暫停
- 可能存在頻繁的垃圾回收，程序代碼可能瞬間占滿內存空間
??持續(xù)性出現(xiàn)糟糕的性能（卡頓）
- 可能存在內存膨脹，為了達到最優(yōu)的效果，程序?直在申請內存空間，?申請的空間??遠超過當前設備能提供的內存??。
??的性能隨時間延?越來越差可能存在內存泄露。某些代碼會隨著時間的增?，讓可?內存空間越來越少。監(jiān)控內存的?式界定內存問題的標準

內存泄漏：內存使?持續(xù)??，沒有下降趨勢。通過內存?勢圖可以得到相關信息
內存膨脹：相對模糊。在多數(shù)設備（硬件）上都可能存在性能問題?？梢詼y試不同的設備。如果在常?設備上程序表現(xiàn)都?較差，那就不是設備問題?是程序本身的問題。
頻繁垃圾回收：通過內存變化圖進?分析，通過界?很難感知到。

監(jiān)控內存的?種?式

瀏覽器任務管理器以數(shù)值的形式，體現(xiàn)程序運?過程中內存的變化
Timeline時序圖記錄以時間點的形式呈現(xiàn)內存的變化
堆快照查找分離DOM 分離 DOM 其實就是內存的泄露。堆快照可以有針對性的查找分離DOM
判斷是否存在頻繁的垃圾回收使?其他?具 任務管理器監(jiān)控 代碼演示：通過點擊事件創(chuàng)建?度很?的數(shù)組。

 <body>
<button id="btn">Add</button>
</body>
<script>
	const oBtn = document.getElementById('btn')
	oBtn.onclick = function(){
		let arrList = new Array(1000000)
	}
</script>

Memory 列表示原?內存。DOM 節(jié)點存儲在原?內存中。如果此值正在增?，則說明正在創(chuàng)建 DOM 節(jié)點。
JavaScript Memory 列表示 JS 堆。此列包含兩個值。實時數(shù)字（括號中的數(shù)字）表示??上的可到達對象正在使?的內存量。如果此數(shù)字在增?，要么是正在創(chuàng)建新對象，要么是現(xiàn)有對象正在增?。

此時點擊按鈕，實時內存增?。如果持續(xù)增?，當前?具?法監(jiān)控。只能判斷，?法定位問題。

TimeLine

可以定位問題代碼示例：

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

每次按代碼中引?的按鈕時，將向?檔正?附加 1 萬個 div 節(jié)點，并將?個由 100 萬個 x 字符組成的字符串推送到 x 數(shù)組。然后

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

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

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

以上就是Performance 內存監(jiān)控使用技巧詳解的詳細內容，更多關于Performance 內存監(jiān)控的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: