为什么仅在一个 div 的 innerHTML 中渲染 10mb 字符串时，chrome 任务管理器内存占用量会急剧增加（170mb）？

Question

I've did a small test where I create a 10mb string on a button click.我做了一个小测试，我在单击按钮时创建了一个 10mb 的字符串。 And then on a second button click I render that string content in a div's innerHTML.然后在第二个按钮上单击，我在 div 的 innerHTML 中呈现该字符串内容。

The code:编码：

<!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 : 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);

As explained in this answer正如这个答案中所解释的

The Memory Footprint column matches the number of MB reported for the Memory column of the process within the Task Manager or Activity Monitor.内存占用列与为任务管理器或活动监视器中进程的内存列报告的 MB 数相匹配。

Meaning the actual RAM taken from the OS for this specific tab on chrome.这意味着从操作系统中为 chrome 上的这个特定选项卡获取的实际 RAM。 Can be seen in chrome task manager.可以在chrome任务管理器中看到。

Memory Tests I did (Incognito) :我做过的记忆测试（隐身）：

I've recorded a Heap snapshot after creating the string (and assigning it to the global variable data ).在创建字符串（并将其分配给全局变量data ）后，我记录了一个堆快照。

The heap snapshot was 11MB,堆快照为 11MB，
The Memory footprint value was 51mb (after taking the snapshot).内存占用值为 51mb（拍摄快照后）。

Then I clicked on the render string button, and after the string was loaded to the screen I took another snapshot.然后我点击渲染字符串按钮，在字符串加载到屏幕后，我又拍了一张快照。

The heap snapshot was 1MB.堆快照为 1MB。
The Memory footprint surprisingly rose all the way to 222mb.内存占用令人惊讶地一路上升到 222mb。 (173mb difference on a 10mb string render in one node), and it stays like that, it doesn't drop down after a manual GC. （在一个节点中渲染 10mb 字符串时有 173mb 的差异），并且它保持这样，在手动 GC 后它不会下降。

Questions:问题：

So I wonder why there is such a big leap in memory footprint although the size of the string is only 10mb ?所以我想知道为什么虽然字符串的大小只有 10mb ，但内存占用却有如此大的飞跃？
What exactly does the memory FP contain beside the sum of the JS memory + media files + DOM Nodes ?除了 JS 内存 + 媒体文件 + DOM 节点的总和之外，内存 FP 到底包含什么？
Is there any place to read about how and by which factors the memory footprints allocates compared to live JS memory ?与实时 JS 内存相比，是否有任何地方可以了解内存占用分配的方式和因素？
Is there any performance tool I can use to analyze the memory footprint ?我可以使用任何性能工具来分析内存占用吗？
And also I'm not sure why the second snapshot of the live JS went from 10mb to 1mb, if still the values are saved on the global data variable, therefore GC should not clean it, am I right?而且我不确定为什么实时 JS 的第二个快照从 10mb 变为 1mb，如果这些值仍然保存在全局data变量上，因此 GC 不应该清理它，对吗？

Answer 1

why there is such a big leap in memory footprint although the size of the string is only 10mb ?为什么虽然字符串的大小只有 10mb，但内存占用却有如此大的飞跃？

The pixels needed to draw a string with 10 million characters onto your screen require a lot more than 10 MB.在屏幕上绘制包含 1000 万个字符的字符串所需的像素需要 10 MB 以上的空间。

What exactly does the memory FP contain beside the sum of the JS memory + media files + DOM Nodes ?除了 JS 内存 + 媒体文件 + DOM 节点的总和之外，内存 FP 到底包含什么？

The entire renderer process' memory.整个渲染器进程的内存。 Off the top of my head, that includes various libraries, fonts, the "picture" that is the result of the rendering process, and all sorts of temporary memory for ongoing tasks.在我的脑海中，包括各种库、字体、作为渲染过程结果的“图片”，以及用于正在进行的任务的各种临时内存。

Unfortunately, I'm not aware of any documentation or tools to learn more about these details;不幸的是，我不知道有任何文档或工具可以了解有关这些细节的更多信息； of course that doesn't mean that none exist (see eg wOxxOm's comment).当然，这并不意味着不存在（参见例如 wOxxOm 的评论）。

why the second snapshot of the live JS went from 10mb to 1mb, if still the values are saved on the global data variable, therefore GC should not clean it, am I right?为什么实时 JS 的第二个快照从 10mb 变为 1mb，如果这些值仍然保存在全局数据变量上，因此 GC 不应该清理它，对吗？

Yes, the GC didn't collect the string.是的，GC 没有收集字符串。 The backing stores of strings (ie the actual characters) can be handed back and forth between V8 and Blink.字符串（即实际字符）的后备存储可以在 V8 和 Blink 之间来回传递。 In this case, apparently the character contents were transferred over to being Blink's responsibility, so they are no longer part of the JavaScript heap (though the String object on the JS heap still refers to them), yet they are still part of the process' overall memory footprint.在这种情况下，显然字符内容被转移到 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