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

IT技术 javascript jquery memory memory-management
2021-01-29 05:55:02

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

这是我的情况:

我正在使用 jquery 前端和以 JSON 格式提供数据的 Restful 后端构建一个数据繁重的 web 应用程序。页面加载一次,然后一切都通过ajax发生。

UI 为用户提供了一种在 UI 中创建多个选项卡的方法,每个选项卡可以包含大量数据。我正在考虑限制他们可以创建的选项卡的数量,但我认为只有在内存使用量超过某个阈值时才限制它们会很好。

根据这些答案,我想作一些澄清:

  • 我正在寻找运行时解决方案(不仅仅是开发人员工具),以便我的应用程序可以根据用户浏览器中的内存使用情况确定操作。
  • 计算 DOM 元素或文档大小可能是一个很好的估计,但它可能非常不准确,因为它不包括事件绑定、data()、插件和其他内存数据结构。
6个回答

2015年更新

早在 2012 年,如果您想支持所有正在使用的主要浏览器,这是不可能的。不幸的是,现在这仍然是Chrome 独有的功能(非标准扩展window.performance)。

window.performance.memory

浏览器支持:Chrome 6+


2012 答案

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

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

计算 DOM 元素或文档大小可能是一个很好的估计,但它可能非常不准确,因为它不包括事件绑定、data()、插件和其他内存数据结构。

如果你真的想坚持你的想法,你应该将固定内容和动态内容分开。

固定内容不依赖于用户操作(脚本文件、插件等使用的内存)。
其他一切都被认为是动态的,在确定限制时应该是您的主要关注点。

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

Wrap 或 overwritejQuery.data方法来通知跟踪系统您的数据分配。

包装 html 操作,以便添加或删除内容也被跟踪(innerHTML.length是最好的估计)。

如果您保留大型内存对象,则还应监视它们。

至于事件绑定,你应该使用事件委托,然后它也可以被认为是一个有点固定的因素。

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

也不innerHTML.length需要内存、RAM 或 CPU(或其他任何东西,我不知道)来处理吗?
2021-03-14 05:55:02
要通过 window.performance.memory 启用实时内存监控,您需要使用 --enable-precise-memory-info 标志启动 Chrome。
2021-03-16 05:55:02
更新:Opera 也支持这一点。来源:Mozilla。developer.mozilla.org/en-US/docs/Web/API/...
2021-03-29 05:55:02
浏览器对此功能的支持不是 IE9+ 或除 Chrome 之外的任何东西。Window.performance.memory 仅适用于 Chrome。docs.webplatform.org/wiki/apis/timing/properties/memory
2021-04-04 05:55:02
你是对的,我认为内存是导航计时标准和window.performance对象的一部分。旧的“支持”条目适用于该标准。window.performance.memoryChrome视为非标准扩展。
2021-04-10 05:55:02

您可以使用导航计时 API

Navigation Timing 是一个 JavaScript API,用于准确测量网络性能。API 提供了一种简单的方法来获取准确和详细的计时统计信息(原生)用于页面导航和加载事件。

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


推荐阅读

很棒的建议。谢谢你。
2021-03-30 05:55:02

这个问题已经有 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);

这似乎是在报告 JS 内存使用情况而不是页面内存使用情况,Chrome 的内置任务管理器说 Gmail 使用的是 250MB,而 memory-stats.js 报告的是 33.7MB
2021-03-25 05:55:02
bookmarklet.js 的 github 页面没有列出许可证,因此它可能是受版权保护的知识产权。这在取决于该项目时留下了一定程度的不确定性。
2021-03-31 05:55:02

我不知道有什么方法可以让您实际了解浏览器使用了多少内存,但您也许可以根据页面上的元素数量使用启发式方法。Uinsg jQuery,你可以这样做$('*').length,它会给你 DOM 元素的数量。不过,老实说,做一些可用性测试并提供固定数量的选项卡来支持可能更容易。

@tvanfosson:这不是一个坏主意,但这不会为我提供有关非 DOM 内存的信息,例如 .data() 和内存数据结构。但它可以很好地估计我可以使用的整体重量。
2021-03-31 05:55:02

使用Chrome 堆快照工具

还有一个叫做MemoryBug的 Firebug 工具,但似乎还不是很成熟。

@巴勃罗:谢谢。我肯定会使用开发工具,但希望找到一些我可以在运行时使用的东西来查找每个用户浏览器中的内存使用情况。
2021-03-28 05:55:02