测量网页的内存使用情况

Posted 2023-03-06

【中文标题】测量网页的内存使用情况

【英文标题】：Measuring memory usage of a web page

【发布时间】：2013-08-16 21:40:22

【问题描述】：

我正在尝试使用 Chrome 开发人员工具中时间轴选项卡的内存部分来测量我的网站的内存使用情况。

在不同的点上，我点击了垃圾桶按钮来强制进行垃圾收集。问题是图表突然变得软弱无力，并停止了所有测量。最终，在我开始做其他事情后，它又开始测量，但我从未在图表上看到我点击 GC 按钮的确切位置/值。

前两个向下的斜坡在我点击垃圾收集按钮后立即开始，后来它们只是在我工作后连接到一个新的当前值。

问题是：

有没有办法强制这个图表保持或开始测量？或者，在 javascript 中是否有一种简单的方法来console.log 当前的内存使用值？

作为一个相关问题，有没有办法指向图表上的某个点并查看该点的确切内存使用情况？

【问题讨论】：

从控制台，您可以通过performance.memory获取当前内存使用情况。

很好 - 谢谢。你介意添加这个作为答案吗，@bfavaretto

@bfavaretto - 另外，知道为什么 performance.memory 给我全零吗？

不知道，这就是它给我的这个页面：MemoryInfo jsHeapSizeLimit: 793000000, usedJSHeapSize: 10000000, totalJSHeapSize: 17100000。我实际上不太了解它，也不了解时间轴工具。这就是我刚刚添加评论的原因，可能有更好的答案......

【参考方案1】：

时间轴记录渲染器端发生的事件。每个事件记录也有“内存使用”字段。时间线将这些数字用于内存图。因此，如果在某个时间间隔内没有事件，则内存图不会显示任何内容。

如果渲染器什么都不做，那么内存大小不会改变。

如果您绝对确定需要内存数据，那么您可以设置一个不执行任何操作的计时器。

例如你可以在控制台中执行setInterval(function() , 1000); 在这种情况下，Timeline 将获取带有内存使用数据的计时器事件并绘制内存图。

【讨论】：

感谢您的回答。不幸的是，由于某种原因，一旦我点击了垃圾收集按钮，图表似乎就完全停止了响应——即使里面有 setInterval。

听起来像一个错误。您能否提供指向该页面或简化的测试用例的链接。

你用的是什么版本的chrome？

能否请您尝试开发频道甚至金丝雀版本。

Canary 版本与其他版本并排安装。