為什么僅在一個 div 的 innerHTML 中渲染 10mb 字符串時，chrome 任務管理器內存占用量會急劇增加（170mb）？

Question

我做了一個小測試，我在單擊按鈕時創建了一個 10mb 的字符串。 然后在第二個按鈕上單擊，我在 div 的 innerHTML 中呈現該字符串內容。

編碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

</head>
<body>
    <button id="btn-load">Load string</button>
    <button id="btn-render">Render string</button>
    <div id="place-to-render"></div>
    <script type="module" src="main.js"></script>
</body>
</html>

JS main.js :

let data;
function createBigString() {
    data = new Array(10000000).join('x'); //10mb
    console.log('created object',data);
}

function render() {
    const placeToRender = document.getElementById('place-to-render');
    placeToRender.innerHTML = data;
    console.log('rendered');
}
document.getElementById('btn-load').addEventListener('click', createBigString);
document.getElementById('btn-render').addEventListener('click', render);

正如這個答案中所解釋的

內存占用列與為任務管理器或活動監視器中進程的內存列報告的 MB 數相匹配。

這意味着從操作系統中為 chrome 上的這個特定選項卡獲取的實際 RAM。 可以在chrome任務管理器中看到。

我做過的記憶測試（隱身）：

在創建字符串（並將其分配給全局變量data ）后，我記錄了一個堆快照。

堆快照為 11MB，
內存占用值為 51mb（拍攝快照后）。

然后我點擊渲染字符串按鈕，在字符串加載到屏幕后，我又拍了一張快照。

堆快照為 1MB。
內存占用令人驚訝地一路上升到 222mb。 （在一個節點中渲染 10mb 字符串時有 173mb 的差異），並且它保持這樣，在手動 GC 后它不會下降。

問題：

所以我想知道為什么雖然字符串的大小只有 10mb ，但內存占用卻有如此大的飛躍？
除了 JS 內存 + 媒體文件 + DOM 節點的總和之外，內存 FP 到底包含什么？
與實時 JS 內存相比，是否有任何地方可以了解內存占用分配的方式和因素？
我可以使用任何性能工具來分析內存占用嗎？
而且我不確定為什么實時 JS 的第二個快照從 10mb 變為 1mb，如果這些值仍然保存在全局data變量上，因此 GC 不應該清理它，對嗎？

Answer 1

為什么雖然字符串的大小只有 10mb，但內存占用卻有如此大的飛躍？

在屏幕上繪制包含 1000 萬個字符的字符串所需的像素需要 10 MB 以上的空間。

除了 JS 內存 + 媒體文件 + DOM 節點的總和之外，內存 FP 到底包含什么？

整個渲染器進程的內存。 在我的腦海中，包括各種庫、字體、作為渲染過程結果的“圖片”，以及用於正在進行的任務的各種臨時內存。

不幸的是，我不知道有任何文檔或工具可以了解有關這些細節的更多信息； 當然，這並不意味着不存在（參見例如 wOxxOm 的評論）。

為什么實時 JS 的第二個快照從 10mb 變為 1mb，如果這些值仍然保存在全局數據變量上，因此 GC 不應該清理它，對嗎？

是的，GC 沒有收集字符串。 字符串（即實際字符）的后備存儲可以在 V8 和 Blink 之間來回傳遞。 在這種情況下，顯然字符內容被轉移到 Blink 的責任，因此它們不再是 JavaScript 堆的一部分（盡管 JS 堆上的String對象仍然引用它們），但它們仍然是過程的一部分'整體內存占用。

為什么僅在一個 div 的 innerHTML 中渲染 10mb 字符串時，chrome 任務管理器內存占用量會急劇增加（170mb）？

問題描述

1 個解決方案

解決方案1
2 已采納 2020-10-14 19:41:37

為什么僅在一個 div 的 innerHTML 中渲染 10mb 字符串時，chrome 任務管理器內存占用量會急劇增加（170mb）？

問題描述

1 個解決方案

解決方案1 2 已采納 2020-10-14 19:41:37

解決方案1
2 已采納 2020-10-14 19:41:37