jQuery或javascript查找页面的内存使用情况

98

有没有办法找出网页或我的jquery应用程序正在使用多少内存？

这是我的情况：

我正在使用一个jQuery前端和一个提供JSON数据的restful后端来构建一个数据繁重的webapp。页面被加载一次，然后一切都通过ajax发生。

用户界面为用户提供了一种在用户界面内创建多个选项卡的方式，每个选项卡可以包含大量数据。我正在考虑限制它们可以创建的选项卡的数量，但我认为仅在内存使用量超过特定阈值时才限制它们是很好的。

根据答案，我想作一些澄清：

我正在寻找一种运行时解决方案（而不仅仅是开发人员工具），以便我的应用程序可以根据用户浏览器中的内存使用情况来确定操作。
计算DOM元素或文档大小可能是一个不错的估计，但由于它不包括事件绑定，data（），插件和其他内存中的数据结构，因此可能非常不准确。

— 牛头人
source

您应该调查Web应用程序的用户类型，以确定他们在使用Web应用程序时是否存在内存问题。还是您自己的Web应用存在内存/性能问题？

— Prutswonder 2010年

@Prutswonder：不，我没有麻烦，但是我只是好奇是否存在这样的工具。只是认为动态方法可能很酷，而不仅仅是在选项卡上设置固定限制。

— 牛头人

我只是在问题中添加了一些其他详细信息，以帮助阐明我在寻找运行时解决方案，而不是构建时解决方案。

— 牛头人

2

只是一个问题，如果已经缓存了某些内容，那还会计数吗？

— ajax333221 2012年

65

2015年更新

如果您想支持所有使用中的主流浏览器，那在2012年是不可能的。不幸的是，目前，这仍然是仅限Chrome的功能（的非标准扩展window.performance）。

window.performance.memory

浏览器支持：Chrome 6+

2012年答案

有没有办法找出网页或我的jquery应用程序正在使用多少内存？我正在寻找一种运行时解决方案（而不仅仅是开发人员工具），以便我的应用程序可以根据用户浏览器中的内存使用情况来确定操作。

简单但正确的答案是“ 否”。并非所有浏览器都向您公开此类数据。而且我认为您应该放弃这个想法仅仅是因为“手工”解决方案的复杂性和不准确性可能会带来比解决方案更多的问题。

计算DOM元素或文档大小可能是一个不错的估计，但由于它不包括事件绑定，data（），插件和其他内存中的数据结构，因此可能非常不准确。

如果您真的想坚持自己的想法，则应将固定内容和动态内容分开。

固定内容不取决于用户操作（脚本文件，插件等使用的内存）。
其他所有内容都被认为是动态的，并且在确定限制时应作为主要重点。

但是没有简单的方法可以对其进行总结。您可以实施一个跟踪系统来收集所有这些信息。所有操作都应调用适当的跟踪方法。例如：

包装或覆盖jQuery.data方法，以通知跟踪系统您的数据分配。

包装html操作，以便也跟踪添加或删除内容（这innerHTML.length是最佳估计）。

如果保留较大的内存中对象，则还应对其进行监视。

至于事件绑定，您应该使用事件委托，然后也可以将其视为一个固定的因素。

另一个难以正确估计内存需求的方面是，不同的浏览器可能会不同地分配内存（对于Javascript对象和DOM元素）。

— 闪耀
source

是否也不innerHTML.length需要占用内存，RAM或CPU（或其他任何我不知道的东西）来处理？

— mrReiha 2015年

浏览器对此功能的支持不是IE9 +或Chrome以外的任何版本。Window.performance.memory仅适用于Chrome。docs.webplatform.org/wiki/apis/timing/properties/memory

— Blunderfest

没错，我以为记忆是导航计时标准和window.performance对象的一部分。旧的“支持者”条目适用于该标准。Chrome window.performance.memory被视为非标准扩展程序。

— gblazex

要通过window.performance.memory启用实时内存监视，您需要使用--enable-precise-memory-info标志启动Chrome。

— kluverua

更新：Opera也支持此功能。资料来源：Mozilla。developer.mozilla.org/en-US/docs/Web/API/…–

— HoldOffHunger

39

您可以使用Navigation Timing API。

导航计时是一种JavaScript API，用于准确衡量网络性能。该API提供了一种简单的方法来获取准确和详细的时序统计信息（本地），以进行页面导航和加载事件。

window.performance.memory 允许访问JavaScript内存使用情况数据。

推荐读物

使用导航计时测量页面加载速度

— 信德·索尔胡斯（Sindre Sorhus）
source

很棒的建议。谢谢。

— MaximOrlovsky 2015年

21

这个问题已有5年历史了，这段时间javascript和浏览器都取得了令人难以置信的发展。由于现在（至少在某些浏览器中）这是可能的，并且当您使用Google“ javascript显示内存使用情况”时，这个问题是第一个结果，因此，我想我将提供一个现代的解决方案。

memory-stats.js：https：//github.com/paulirish/memory-stats.js/tree/master

该脚本（您可以随时在任何页面上运行该脚本）将显示该页面的当前内存使用情况：

var script=document.createElement('script');
script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';
document.head.appendChild(script);

展开摘要

— 达斯汀·布朗内尔
source

1

这似乎是报告JS内存使用情况，而不是网页的内存使用情况，Chrome内置的任务管理器说，虽然内存stats.js报告33.7MB Gmail使用250MB

— Brandito

没有书签书签.js的github页上列出的许可证，因此它可能是受版权保护的知识产权。这给该项目带来了一定程度的不确定性。

— HoldOffHunger

8

我不知道您实际上可以找到浏览器正在使用多少内存，但是您可能可以根据页面上的元素数量使用启发式方法。您可以使用jQuery jQuery，$('*').length它将为您提供DOM元素数量的计数。坦白说，不过，进行一些可用性测试并提供固定数量的选项卡可能会更容易。

— 特凡福森
source

3

@tvanfosson：这不是一个坏主意，但这不会给我有关非DOM内存的信息，例如.data（）和内存数据结构中的信息。但这可以很好地估计我可以使用的总重量。

— 牛头人

4

使用Chrome堆快照工具

还有一个名为MemoryBug的Firebug工具，但似乎还不太成熟。

— 帕勃罗·费尔南德斯（Pablo Fernandez）
source

@Pablo：谢谢。我肯定会使用开发工具，但是希望找到可以在运行时使用的东西，以查找每个用户浏览器中的内存使用情况。

— 牛头人

3

如果您只想进行测试，Chrome可以通过开发人员页面来跟踪内存使用情况，但不确定如何直接在javascript中进行操作。

— 扎卡里K
source

@Zachary：谢谢。我肯定会使用开发工具，但是希望找到一个运行时分析解决方案。

— 牛头人

1

如果你找到一个让我知道，我很想有一个方便的

— 扎卡里ķ

3

我想提出一个与其他答案完全不同的解决方案，即观察应用程序的速度，一旦它降到定义的级别以下，要么向用户显示提示以关闭选项卡，要么禁用新选项卡。提供此类信息的简单类例如是https://github.com/mrdoob/stats.js。除此之外，如此密集的应用程序首先将所有选项卡保留在内存中可能并不明智。例如，仅保留用户状态（滚动）并在每次都打开（最后两个选项卡除外）时都加载所有数据可能是比较安全的选择。

最后，Webkit开发人员一直在讨论将内存信息添加到javascript中的问题，但是他们陷入了关于哪些内容和哪些内容不应该公开的争论。无论哪种方式，这种信息都不太可能在几年内可用（尽管现在这些信息不太有用）。

— 大卫·穆德（David Mulder）
source

1

从一个类似的项目开始，与我一起完美的提问时间！

由于需要更高级别的权限，因此无法精确监控应用内JS内存使用情况。如评论中所述，检查所有元素的数量等将浪费时间，因为它会忽略绑定事件等。

如果内存泄漏明显或未使用的元素持续存在，这将是体系结构问题。确保关闭的选项卡的内容被完全删除而不会拖延事件处理程序等，这将是一个完美的选择；假设已完成，您可以在浏览器中模拟大量使用情况，并从内存监视中推断结果（在地址栏中键入about：memory）

提示：如果您在IE，FF，Safari ...和Chrome中打开同一页面；而不是导航到Chrome中的about：memory，它将报告所有其他浏览器的内存使用情况。整齐！

— 卵
source

0

您可能想要做的是让服务器跟踪该会话的带宽（已发送多少字节的数据）。当它们超过限制时，服务器应该发送错误代码，JavaScript将使用该错误代码来告诉用户他们使用了太多数据，而不是通过ajax发送数据。

— 凸轮
source

@incrediman：这也是一个很不错的主意，但我认为如果不构建许多跟踪功能就不会起作用-仅字节数是行不通的。问题在于选项卡中的数据是用户将以多种不同方式进行过滤和排序的列表。每次更改时，将从服务器中检索新数据并替换当前的dom元素。另外，怎么说他们没有点击“重新加载”，而是从新的页面开始？我也必须跟踪304，但是我打算只提供静态html，所有数据都来自REST服务。

— 牛头人

此方法不考虑使用createElement（）或remove（）创建或销毁的元素，这会影响客户端内存使用。但是有趣的是，它与其他答案有所不同（通过测量服务器端而不是客户端，您的测量不会像其他答案那样改变内存）。

— HoldOffHunger '18

0

您可以获取document.documentElement.innerHTML并检查其长度。它会为您提供网页使用的字节数。

这可能不适用于所有浏览器。因此，您可以将所有身体元素包含在一个巨大的div中，然后在该div上调用innerhtml。就像是<body><div id="giantDiv">...</div></body>

— 中帽
source

4

生成的innerHTML字符串的长度不太可能与浏览器使用的内存（例如，在其内部对象模型中）呈现HTML的内存有效地关联在一起。

— TJ Crowder

那为什么呢？我的理由是，如果在浏览器中加载了一些文本，则必须将其存储在内存中。因此，它确实提供了浏览器用于呈现页面的内存的某种度量。

— Midhat 2010年

4

这样想吧。如果您说“我想给您一千万美元”，那就是8个字。另一方面，如果您说“我想在餐巾纸上打喷嚏”，那就是7。难道第一个只有8/7比第二个更有价值吗？

— 直觉

1

这类似于@tvanfosson关于获取DOM元素计数的建议。因为不同的dom元素可以包含不同数量的文本，所以您的精确度可能更高一些。但是它仍然没有获得有关data（），单击处理程序，内存中的数据结构和对象等的任何信息。我的应用程序使用了许多这些功能。

— 牛头人

1

作用域中可能有JS变量指向分离的DOM节点，它们不会成为文档元素的一部分。您也可以编写代码，将一个很长的字符串加载到一个变量中，从而消耗千兆字节的内存，而不会影响页面上的文本。

— Josh Ribakoff 2015年