Chrome 瀏覽器最近推出了懸?？?，可以顯示每個打開的標簽頁的內(nèi)存使用情況。當(dāng)你將鼠標懸停在某個標簽頁上時，彈出窗口將顯示該標簽頁的內(nèi)存使用情況，以及 Chrome 瀏覽器的內(nèi)存保護器功能是否凍結(jié)了該標簽頁以節(jié)省內(nèi)存。

該功能使 Chrome 瀏覽器的標簽頁節(jié)流行為透明化，并讓用戶深入了解網(wǎng)站的內(nèi)存消耗情況。

新的懸浮卡基于 Chrome 瀏覽器的內(nèi)存節(jié)省功能(Memory Saver)，也可以通過 about:flags 啟用：

內(nèi)存保護器和性能控制

內(nèi)存保護器通過凍結(jié)不活動的標簽頁，讓它們進入 "睡眠 "狀態(tài)，從而為活動標簽頁釋放內(nèi)存。當(dāng)你打開大量標簽頁時，這有助于提高性能。

在最新發(fā)布的桌面版 Chrome 瀏覽器中，引入了兩個新的性能設(shè)置，使 Chrome 瀏覽器的內(nèi)存使用量最多減少 40%，最少減少 10GB，以保持標簽頁運行流暢，并在電池電量不足時延長電池使用時間。

內(nèi)存保護器是 Chrome 瀏覽器最近新增的一整套性能控制功能的一部分，其中包括延長電池使用時間的節(jié)能器。所有這些功能都旨在根據(jù)用戶的系統(tǒng)限制智能優(yōu)化 Chrome 瀏覽器的性能和資源使用情況。

Chrome使用諸如標簽可見性、標簽是否正在播放音頻以及頁面生命周期事件等信號來判斷一個標簽是否處于非活動狀態(tài)。當(dāng)一個標簽在后臺足夠長時間后，Chrome將凍結(jié)JavaScript執(zhí)行并將標簽置于低內(nèi)存狀態(tài)

這有助于將內(nèi)存分流到活動的前臺標簽頁，并在打開多個標簽頁時提高性能。當(dāng)標簽頁回到焦點時，會重新加載。

測量內(nèi)存使用情況

隨著網(wǎng)絡(luò)應(yīng)用程序越來越復(fù)雜，內(nèi)存管理已成為一個日益重要的問題。內(nèi)存泄漏或使用效率低下會導(dǎo)致性能問題甚至崩潰。**Chrome DevTools **為調(diào)試內(nèi)存問題提供了強大的工具--只要你知道如何有效地使用它們。

性能監(jiān)控器

性能監(jiān)控器可通過 CPU 利用率、FPS 和 DOM 節(jié)點等其他關(guān)鍵指標，對內(nèi)存使用情況進行高層次的實時監(jiān)控。

注意

• 隨時間穩(wěn)步增加 JS 堆或 DOM 節(jié)點。
• 某些用戶操作后，JS 堆中出現(xiàn)尖峰。

這可能表明存在潛在的內(nèi)存問題，值得進一步調(diào)查。性能監(jiān)控器可用于確認可疑問題。

使用 DevTools 測量內(nèi)存使用情況

Chrome DevTools 中的 "內(nèi)存 "面板可讓你深入了解頁面的內(nèi)存消耗情況。你可以對堆分配進行快照，記錄分配時間線，并按組件檢查內(nèi)存使用情況。

摘要視圖按 DOM 節(jié)點、JS 對象等類別顯示總體內(nèi)存使用情況。對多個快照進行比較可以發(fā)現(xiàn)內(nèi)存泄漏。

分配時間軸顯示交互過程中的實時分配活動。峰值可能表明操作效率低下。篩選特定組件可隔離其影響。

最后，"分配采樣 "視圖將內(nèi)存使用情況映射到單個頁面組件，如文檔、框架、網(wǎng)絡(luò)工作者和圖形層。這將揭示任何高使用率的來源。這將堆剖析器的詳細快照信息與性能面板的增量更新和跟蹤相結(jié)合。

跟蹤對象的堆分配通常涉及開始記錄、執(zhí)行一系列操作，然后停止記錄以進行分析。

因此，DevTools為理解 web應(yīng)用的內(nèi)存特性提供了強大的工具集。對于診斷泄漏和檢測回歸來說，它是無價之寶。

使用性能API

對于編程內(nèi)存測量，瀏覽器API performance.measureUserAgentSpecificMemory() 允許測量頁面的總內(nèi)存使用情況。

function scheduleMeasurement() {
  // 檢查測量API是否可用。
  if (!window.crossOriginIsolated) {
    console.log('performance.measureUserAgentSpecificMemory()只在跨源隔離的頁面中可用');
    console.log('參見https://web.dev/coop-coep/ 了解更多')
    return;
  }
  if (!performance.measureUserAgentSpecificMemory) {
    console.log('performance.measureUserAgentSpecificMemory()在這個瀏覽器中不可用');
    return;
  }
  const interval = measurementInterval();
  console.log(`在${Math.round(interval / 1000)}秒后運行下一個內(nèi)存測量`);
  setTimeout(performMeasurement, interval);
}

此方法返回當(dāng)前頁面及所有相關(guān)上下文（如 iframe 和 worker）的聚合RAM使用情況。結(jié)果包括將內(nèi)存使用情況歸因于特定執(zhí)行上下文的細分。

這個API可以用來收集關(guān)于內(nèi)存消耗的真實用戶數(shù)據(jù)。長期趨勢可能揭示了網(wǎng)站更改后的漸進泄漏或回歸。

然而，measureUserAgentSpecificMemory()反映了每個瀏覽器的內(nèi)部內(nèi)存表示。結(jié)果在瀏覽器之間有很大的差異。相對時間的比較是最有意義的。

內(nèi)存泄漏的常見原因

許多web應(yīng)用中的內(nèi)存泄漏源于保留對對象的過時引用，阻止垃圾收集對其進行清理。

一些常見的來源包括：

• 在DOM分離時忘記移除事件偵聽器
• 在閉包中無意中捕獲對DOM元素的引用
• 增長的數(shù)據(jù)結(jié)構(gòu)，如 map 或數(shù)組，不進行清理
• 未能正確關(guān)閉 Web Workers
• 父 iframe 和 iframe 上下文之間的殘留引用
• 閉包和意外的引用是一個常見的原因。例如，后來從頁面中刪除的在閉包內(nèi)添加的DOM元素保持其引用。

內(nèi)存泄漏往往是無意中引入的，通常隨著時間的推移逐漸增長。但即使修復(fù)小的泄漏也可以提高性能。

在典型的用戶流程中分析內(nèi)存使用情況有助于識別漸進的泄漏來源。DevTools、fuite和其他工具可以定位增長的對象。修復(fù)泄漏可能需要重新設(shè)計一些邏輯。

力爭實現(xiàn)相對平坦的內(nèi)存使用情況，而不是呈鋸齒形狀的模式，顯示在重置之間的漸進積累。如果在長時間的會話中累積，即使小于1MB的泄漏也可能值得修復(fù)。

結(jié)論

Chrome的新懸?？ㄆ瑸橛脩籼峁┝擞嘘P(guān)每個標簽的內(nèi)存使用情況的有用見解。對于開發(fā)人員，結(jié)合DevTools、性能API和仔細的優(yōu)化，這個功能可以幫助你交付更流暢、內(nèi)存效率更高的web應(yīng)用，用戶會喜歡的。