什么原因导致了在 Chrome 选项卡上悬停时显示的内存使用量与堆大小之间的差异?

什么原因导致了在 Chrome 选项卡上悬停时显示的内存使用量与堆大小之间的差异?

当您将鼠标悬停在标签标题上时,Chrome 标签现在会显示该标签使用的活动内存;请参阅这里了解详情。

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

我发现 JS 堆大小和堆快照大小大致相同,但选项卡的活动内存使用量(通常)显著地更高。

例如,https://example.com/在一次特定的加载中,我的标签内存使用了 23.8 MB:

example.com 标签内存使用情况

为了进行比较,JS 堆大小为 1.1 MB(见底部):

example.com 上的 JS 堆大小

快照大小也是 1.1 MB(见左栏)

example.com 的 JS 堆快照

就上下文而言,example.com 是一个非常小的页面,大小约为 1 KB,它在单个屏幕上呈现,无需滚动(参见上面的第一个屏幕截图)。

我还注意到,在内存压力(例如,如果我打开了很多选项卡)或在后台运行(例如,我离开选项卡一段时间)的情况下,选项卡的内存使用量可以稍微向下调整,但我很少看到它一直下降到匹配堆大小或堆快照大小。

那么,是什么原因导致了更大的活动标签内存使用量,我们如何才能更好地了解页面结构和内容的哪些方面导致了这一现象,以及活动标签内存使用量是否会超越堆大小导致内存不足问题?

注意:我从https://stackoverflow.com/questions/76127296/debugging-a-ios-safari-crash-a-problem-repeatedly-occurredSafari 通过其“图层”面板提供了有关渲染/绘画相关的内存使用情况的更多信息,但我在 Chrome Devtools 中等效的“图层”面板中没有看到有关内存使用情况的任何信息。

答案1

简短回答

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

完整答案

在现代浏览器中,网页由浏览器引擎,对于铬来说,这被称为并且用 C++ 编写。

根据维基百科

Blink 引擎有以下组件:

  • DOM、HTML DOM 和 CSS 渲染引擎
  • Web IDL 实现
  • Skia 图形引擎——调用依赖于平台的底层图形库(如 OpenGL、Vulkan、DirectX 等)
  • V8 JavaScript 引擎

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

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

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

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

为了提高稳定性,将网站实例放在单独的进程中可以限制渲染器进程崩溃或挂起的影响,从而允许其他内容继续工作。为了提高性能,这允许不同的网站实例并行运行,并提高响应速度,但每个进程都会有一些内存开销。

关于渲染网页还有很多内容,你可以阅读例如这里,但为了简单起见,“每个选项卡使用的内存”包括:

  • 浏览器引擎(或其重要子集)
  • 网页本身和任何加载的资产(css、图像、视频、脚本等)
  • JS 堆
  • JS 堆栈(看这里
  • 此特定过程所需的其他东西

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

进一步了解 JS Heap Profiler

编辑

为了更全面地了解正在发生的事情,你需要深入了解如何使用开发人员工具,我会这样做使用官方文档

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

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

答案2

每个标签页都是一个单独的 Chrome 进程,因此我在任务管理器中检查了 Chrome 启动的多个进程。然后我发现一个chrome.exe进程使用的内存量与悬停消息中的数字非常相似。

我认为解释是,您在消息中看到的数量是 Chrome 显示标签所使用的总内存。这不仅包括 JS 缓存,还包括显示标签的整个过程。

由于 Windows 只在内存中保留一份代码部分chrome.exe,该副本由所有进程共享chrome.exe,因此这个大小仅包括数据和堆栈。您看到的 1.1 MB JavaScript 堆栈只是这个大小的一部分。

显示的数量比任务管理器中的数量要大一些。这可以解释为我在任务管理器中显示的活动私人工作空间不包括 Chrome 用于该选项卡的所有内容。

在此处输入图片描述

相关内容