为什么仅在一个 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