代码之家 › 专栏 › 技术社区 › Tauren

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

memory-management memory jquery javascript

Tauren · 技术社区 · 16 年前

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

我的情况是:

我正在使用jquery前端和一个在json中提供数据的RESTful后端构建一个数据密集的webapp。页面加载一次,然后一切都通过Ajax进行。

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

根据答案,我想提出一些建议:

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

10 回复 | 直到 8 年前

Kostas Stamos gleb bahmutov 8 年前

2015更新

回到2012年,如果你想支持所有使用中的主要浏览器,这是不可能的。不幸的是,现在这仍然是一个 Chrome only 特征(非标准扩展 window.performance )

window.performance.memory

浏览器支持:Chrome 6+

2012答

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

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

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

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

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

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

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

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

如果您在内存中保存大型对象,那么也应该监视它们。

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

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

Sindre Sorhus 14 年前

你可以使用 Navigation Timing API .

导航计时是一个Javascript API,用于准确测量Web上的性能。API提供了一种简单的方法来获得页面导航和加载事件的准确和详细的定时统计数据。

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

推荐阅读

Measuring page load speed with Navigation Timing

Dustin Brownell 10 年前

这个问题已经存在5年了,在这段时间里,javascript和浏览器都发生了不可思议的变化。因为现在这是可能的(至少在某些浏览器中),而且这个问题是当你谷歌“javascript显示内存使用率”时的第一个结果,我想我会提供一个现代的解决方案。

内存统计.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);

tvanfosson 16 年前

我不知道有什么方法可以让你真正了解浏览器使用了多少内存,但是你可以根据页面上的元素数量使用启发式方法。uinsg jquery,可以 $('*').length 它将为您提供dom元素数量的计数。不过,老实说,仅仅做一些可用性测试,并想出固定数量的选项卡来支持可能会更容易。

Pablo Fernandez 16 年前

使用 Chrome Heap Snapshot tool

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

Zachary K 16 年前

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

David Mulder 14 年前

我想建议一个与其他答案完全不同的解决方案,即观察应用程序的速度,一旦它降到定义的水平以下,要么向用户显示关闭选项卡的提示,要么禁止打开新的选项卡。例如,提供此类信息的简单类是 https://github.com/mrdoob/stats.js . 除此之外,对于如此密集的应用程序来说,首先将所有选项卡保存在内存中可能并不明智。例如,只保留用户状态(滚动)和每次加载所有数据(最后两个选项卡除外)可能是一个更安全的选项。

最后,WebKit开发人员一直在讨论向JavaScript添加内存信息,但他们已经就不应该公开什么和不应该公开什么进行了大量的讨论。不管怎样,这类信息不太可能在几年内就可以获得(尽管目前这些信息并不太有用)。

Oleg 14 年前

与我开始一个类似的项目完美的问题时机!

没有准确的方法来监控应用程序中的JS内存使用,因为它需要更高级别的权限。正如注释中所提到的,检查所有元素的数量等将浪费时间,因为它忽略绑定事件等。

如果内存泄漏清单或未使用的元素持续存在,这将是一个体系结构问题。确保完全删除关闭的选项卡的内容而不延迟事件处理程序等将是完美的;假设已完成,您可以在浏览器中模拟大量使用,并从内存监视中推断结果(类型 关于:记忆 在地址栏中)

如果你在IE,FF,Safari中打开同一个页面…和Chrome;比导航到 关于:记忆 在chrome中,它将报告内存使用情况 全部的 其他浏览器。整洁!

Cam 16 年前

您可能需要做的是让服务器跟踪其在该会话中的带宽(向其发送了多少字节的数据)。当他们超过限制时,服务器应该发送一个错误代码,而不是通过Ajax发送数据,JavaScript将使用该代码来告诉用户他们使用了太多的数据。

Midhat 16 年前

您可以获取document.documentelement.innerhtml并检查其长度。它将提供您的网页使用的字节数。

这可能不适用于所有浏览器。所以你可以把所有的身体元素都放在一个巨大的分区中,然后在这个分区上调用innerhtml。 <body><div id="giantDiv">...</div></body>