是什么导致了将鼠标悬停在 Chrome 选项卡上时显示的内存使用情况与堆大小之间的差异？

Question

现在，当您将鼠标悬停在选项卡标题上时，Chrome 选项卡会显示该选项卡使用的活动内存；请参阅此处了解详细信息。

Chrome 还允许我们在 Devtools 的“内存”面板中获取有关内存使用情况的更多详细信息，其中提供了（不断更新的）JS 堆大小。我还可以从“内存”面板中获取堆快照，并且可以看到堆快照的大小。

我发现 JS 堆大小和堆快照大小彼此在同一范围内，但选项卡使用的活动内存（通常）明显更高。

例如，在https://example.com/上，在一次特定负载中，我的选项卡内存使用量为 23.8 MB：

作为比较，JS 堆大小为 1.1 MB（见底部）：

快照大小也是 1.1 MB（见左栏）

对于上下文，example.com 是一个非常小的页面，大小约为 1 KB，它在单个屏幕上呈现，无需滚动（请参见上面的第一个屏幕截图）。

我还注意到，在内存压力（例如，如果我打开很多选项卡）或背景（例如，我离开选项卡一段时间）下，选项卡内存使用可以稍微调整一下，但我很少看到它一直下降以匹配堆大小或堆快照大小。

那么，是什么导致活动选项卡内存使用量更大，我们如何才能更好地了解页面结构和内容的哪些方面对其产生影响，以及活动选项卡内存使用量超过堆大小是否会导致溢出-内存问题？

注意：我从/sf/ask/5328910751/了解到，Safari 通过其图层提供了有关与渲染/绘画相关的内存使用的更多信息面板，但我在 Chrome Devtools 的等效图层面板中没有看到任何有关内存使用的信息。

Answer 1

简短回答

\n

“内存使用情况”是浏览器引擎用于渲染该选项卡的全部内存（进程本身以及任何加载的 html、css、图像、脚本...）。“JS堆”只是JS引擎为对象和函数保留的空间。

\n

完整答案

\n

在现代浏览器中，网页是由浏览器引擎渲染的，对于 chromium 来说，该引擎称为眨眼，是用 C++ 编写的。

\n

根据维基百科：

\n

\n

Blink 引擎具有以下组件：

\n

\n
• DOM、HTML DOM 和 CSS 渲染引擎
\n
• Web IDL\xc2\xa0 实现
\n
• Skia\xc2\xa0图形引擎\xe2\x80\x94调用依赖于\n平台的底层\n图形库（如\xc2\xa0OpenGL、\xc2\xa0Vulkan、\xc2\xa0DirectX\xc2\xa0等）
\n
• V8\xc2\xa0JavaScript引擎
\n

\n

\n

JS 堆仅由浏览器引擎的“V8 Javascript”部分创建。另请注意，堆是

\n

\n

用于在 JavaScript 中存储对象和函数。引擎不分配固定数量的内存。相反，它会根据需要分配更多空间。（来源）

\n

\n

因此，JS 堆不包含任何使 JS 引擎或完整的浏览器引擎完成其工作所需的代码。

\n

此外，鉴于 chromium（至少在桌面上）实现了选项卡隔离，如此处所述（即每个选项卡一个单独的进程，没有共享资源），对于打开的每个新选项卡，整个浏览器引擎的（很大一部分）需要单独加载到内存中。正如开发人员所写：

\n

\n

为了稳定性，将网站实例放在单独的进程中可以限制渲染器进程崩溃或挂起的影响，从而允许其他内容继续工作。就性能而言，这允许不同的网站实例并行运行，并具有更好的响应能力，但代价是每个进程会产生一些内存开销。

\n

\n

渲染网页还有很多内容，例如您可以在此处阅读，但为了简单起见，“每个选项卡使用的内存”包括：

\n

\n
• 浏览器引擎（或其重要子集）
\n
• 网页本身和任何加载的资源（CSS、图像、视频、脚本等）
\n
• JS 堆
\n
• JS 堆栈（参见此处）
\n
• 这个特定过程所需的其他东西
\n

\n

所以 JS 堆只是其中的一小部分。它在控制台中被单独处理，因为它可能导致内存泄漏，特别是因为“它分配的空间多于所需的空间”。

\n

进一步阅读 JS 堆分析器

\n

编辑

\n

为了更全面地了解正在发生的事情，您需要深入研究如何使用开发人员工具，我将使用官方文档来完成此操作。

\n

JS 堆是导致内存泄漏的部分，但要深入了解各种性能问题，您必须首先通过控制台和性能选项卡进行操作。

\n

但是，由于您使用的是 MacOS，您可以尝试您提到的 Safari 的“更完整的内存使用情况”大纲。请注意，Safari 使用不同的浏览器引擎 Webkit，其行为与 Chrome 不同。

\n