大贊！Chrome 瀏覽器現(xiàn)在會顯示每個活動標(biāo)簽頁的內(nèi)存使用情況了

作者：dev 2023-10-10 08:40:29

Chrome的新懸停卡片為用戶提供了有關(guān)每個標(biāo)簽的內(nèi)存使用情況的有用見解。對于開發(fā)人員，結(jié)合DevTools、性能API和仔細(xì)的優(yōu)化，這個功能可以幫助你交付更流暢、內(nèi)存效率更高的web應(yīng)用，用戶會喜歡的。

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

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

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

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

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

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

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

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

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

測量內(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)鍵指標(biāo)，對內(nèi)存使用情況進(jìn)行高層次的實時監(jiān)控。

注意

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

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

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

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

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

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

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

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

因此，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í)行上下文的細(xì)分。

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

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

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

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

一些常見的來源包括：

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

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

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

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

結(jié)論

責(zé)任編輯：姜華來源：大遷世界

Chrome