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

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

这是我的情况:

我正在使用jquery前端和一个以JSON提供数据的restful后端来构建数据量很大的webapp.页面加载一次,然后一切都通过ajax发生.

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

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

我正在寻找运行时解决方案(不仅仅是开发人员工具),以便我的应用程序可以根据用户浏览器中的内存使用情况确定操作.

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

gblazex.. 62

2015年更新

回到2012年,如果您想支持所有主流浏览器,那么这是不可能的.不幸的是,现在这仍然是Chrome专用功能(非标准扩展window.performance).

window.performance.memory

浏览器支持:Chrome 6+

2012答案

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

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

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

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

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

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

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

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

如果保留大型内存中对象,则还应对其进行监视.

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

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

2015年更新

回到2012年,如果您想支持所有主流浏览器,那么这是不可能的.不幸的是,现在这仍然是Chrome专用功能(非标准扩展window.performance).

window.performance.memory

浏览器支持:Chrome 6+

2012答案

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

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

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

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

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

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

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

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

如果保留大型内存中对象,则还应对其进行监视.

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

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

您可以使用Navigation Timing API.

Navigation Timing是一个JavaScript API,用于准确测量Web上的性能.API提供了一种简单的方法,可以为页面导航和加载事件本地获取准确而详细的计时统计信息.

window.performance.memory 可以访问JavaScript内存使用数据.

推荐阅读

使用Navigation Timing测量页面加载速度

这个问题已经有5年了,而且javascript和浏览器在这个时代都有了令人难以置信的进化.由于现在可以(至少在某些浏览器中),这个问题是Google"javascript show memory useage"的第一个结果,我想我会提供一个现代化的解决方案.

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);