【问题标题】：Chrome heap snapshots statistics, what does the grey color represent?Chrome 堆快照统计，灰色代表什么？
【发布时间】：2020-06-30 19:11:56
【问题描述】：

上图中灰色代表什么？

【问题讨论】：

正要问这个完全相同的问题。似乎 chrome 开发人员觉得（对他们来说）太明显了，甚至无法展示！
你知道它是什么吗？我看到它随着我的 SPA 中的后续页面而增加。
还没有头绪，只能猜测是V8的开销？
我在这个“暗物质”区域发生了内存泄漏，chrome 似乎对此一无所知，开发人员认为没有理由解释其含义。这个问题的唯一答案是不够的。如何调试这个灰色区域的内存泄漏？？
灰色条表示在时间线内分配的对象，但此后已被垃圾回收：developers.google.com/web/tools/chrome-devtools/memory-problems/…

【解决方案1】：

未分配的内存

总内存：20,526 KB

总分配内存：1925 + 2939 + 2918 + 494 + 840 = 9,116 KB

未分配内存总量：20,526 - 9,116 = 11,410 KB

11410 / 20526 = ~0.56 (0.56/1)，即图表上的阴影区域。

总未分配内存/总内存 = Shaded Area

显示已分配内存与未分配内存的圆环图

【讨论】：

这真的正确吗？在我的情况下，我有灰色（白色）区域：~349MB，统计选项卡中的 js 数组说 81MB，但在摘要选项卡中，它说“（数组）”的“浅大小”是 368MB，那么“未分配空间”怎么办349MB？

【解决方案2】：

总值

在一个代表Heap Snapshot Statictics的饼图中——

TOTAL 是 JavaScript 对象和相关 DOM 节点之间的总内存堆分布。另外我应该说堆是为动态分配预留的内存。

当网站使用的能量超出必要时，就会发生内存泄漏。严重的内存泄漏甚至会使网站无法使用。由于 JavaScript 内存泄漏检测器是 Google Chrome 浏览器的一部分，因此您应该毫不犹豫地选择分析类型并分析您网站的内存使用情况。

Google Chrome 堆快照将揭示 JavaScript 对象和相关 DOM 节点之间的内存分布。此功能很有用，因为您将能够比较不同的快照并发现内存泄漏。

【讨论】：

【解决方案3】：

Total是reachable JavaScript objects的总数这是当时为该堆填充数据的已创建对象的当前内存。

在您的图像中，您会在图像上找到71955 kb，它与Total 的值相同

Total之前的值是在开始点用数据填充对象之前的字节数据值

【讨论】：

【解决方案4】：

shallow 和 retained 大小之间的区别（您可以在摘要视图中看到这些）

换句话说，数据本身和分配的内存之间的区别

对象的保留大小是其浅层大小加上浅层大小只能直接或间接访问的对象这个对象。换句话说，保留的大小代表了数量当此对象时，垃圾收集器将释放的内存量被收集。

【讨论】：