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

有没有办法找出多less内存正在使用的网页,或我的jQuery应用程序?

这是我的情况:

我正在构build一个数据沉重的Web应用程序使用jQuery前端和一个以JSON服务数据的宁静的后端。 页面加载一次,然后通过Ajax发生。

用户界面为用户提供了在用户界面中创build多个标签的方法,每个标签可以包含大量的数据。 我正在考虑限制他们可以创build的选项卡的数量,但认为一旦内存使用超过一定的阈值,只限制他们是不错的select。

基于这个答案,我想做一些分类:

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

2015更新

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

window.performance.memory

浏览器支持:Chrome 6+


2012答

有没有办法找出多less内存正在使用的网页,或我的jQuery应用程序? 我正在寻找一个运行时解决scheme(不只是开发工具),以便我的应用程序可以根据用户浏览器中的内存使用情况来确定操作。

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

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

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

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

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

换行或覆盖jQuery.data方法,以通知跟踪系统有关您的数据分配。

对html操作进行换行,以便跟踪添加或删除内容( innerHTML.length是最佳估计值)。

如果你保留大量的内存对象,它们也应该被监视。

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

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

您可以使用导航计时API 。

Navigation Timing是一个JavaScript API,用于精确测量Web上的性能。 API提供了一种简单的方法来获得准确和详细的时间统计 – 本地 – 页面导航和加载事件。

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

推荐阅读

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

这个问题已经5年了,在这个时候javascript和浏览器都发展得非常好。 既然现在可能(至less在一些浏览器中),这个问题是当你的谷歌“JavaScript显示内存useage”的第一个结果,我想我会提供一个现代化的解决scheme。

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

这个脚本(你可以随时在任何页面上运行)将显示当前页面的内存使用情况:

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

我不知道有什么方法可以确定浏览器正在使用多less内存,但是您可以使用基于页面上元素数目的启发式方法。 Uinsg的jQuery,你可以做$('*').length ,它会给你的DOM元素的数量的计数。 老实说,只是做一些可用性testing,并提供固定数量的标签来支持可能更容易。

使用Chrome堆快照工具

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

如果你只是想看看testing,Chrome浏览器中有一种方法可以通过开发者页面来跟踪内存的使用情况,但不知道如何直接在javascript中执行。

我想build议一个与其他答案完全不同的解决scheme,即观察应用程序的速度,一旦下降到低于定义的级别,就显示提示用户closures标签,或者禁止打开新标签。 提供这种信息的简单类是例如https://github.com/mrdoob/stats.js 。 除此之外,对于如此密集的应用程序来说,将所有标签保存在内存中可能并不明智。 例如,只保留用户状态(滚动),并加载所有的数据,每次除了最后两个标签打开可能是一个更安全的select。

最后,webkit开发人员一直在讨论向javascript添加内存信息,但是他们已经获得了许多关于什么和不应该暴露的争论。 无论哪种方式,这种信息在几年内都是不可能的(尽pipe这些信息现在不太有用)。

完美的问题时间与我开始在类似的项目!

由于需要更高级别的权限,所以没有准确的方法来监控JS内存使用情况。 正如评论中提到的那样,检查所有元素的数量等都是浪费时间,因为它忽略了绑定事件等。

如果内存泄漏清单或未使用的元素持续存在,这将是一个架构问题。 确保closures的标签页的内容被完全删除而没有延迟的事件处理程序等将是完美的; 假设完成了,你可以在浏览器中模拟大量的使用,并从内存监控中推断出结果(在地址栏中inputabout:memory

Protip:如果你在IE,FF,Safari和Chrome中打开相同的页面, 而不是在Chrome浏览中浏览:内存 ,它会报告所有其他浏览器的内存使用情况。 整齐!

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

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

你可能想要做的是服务器跟踪他们的会话带宽(有多less字节的数据已经发送给他们)。 当他们超过限制,而不是通过Ajax发送数据,服务器应该发送一个错误代码,JavaScript将使用告诉用户他们已经使用了太多的数据。