Is there a way to find out how much memory is being used by a web page, or by my jquery application?

Here's my situation:

I'm building a data heavy webapp using a jquery frontend and a restful backend that serves data in JSON. The page is loaded once, and then everything happens via ajax.

The UI provides users with a way to create multiple tabs within the UI, and each tab can contain lots and lots of data. I'm considering limiting the number of tabs they can create, but was thinking it would be nice to only limit them once memory usage has gone above a certain threshold.

Based on the answers, I'd like to make some clarfications:

  • I'm looking for a runtime solution (not just developer tools), so that my application can determine actions based on memory usage in a user's browser.
  • 计算DOM元素或文档大小可能是一个很好的估计,但它可能非常不准确,因为它不包括事件绑定、数据()、插件和其他内存中的数据 struct .

推荐答案

2015 Update

早在2012年,如果你想支持所有正在使用的主要浏览器,这是不可能的.不幸的是,目前这仍然是一个Chrome only特性(window.performance的非标准扩展).

window.performance.memory

Browser support: Chrome 6+


2012 Answer

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

简单但正确的答案是no.并非所有浏览器都向您公开此类数据.我认为你应该简单地放弃这个 idea ,因为"handmade"解决方案的复杂性和不准确性可能会带来更多的问题,而不是它解决的问题.

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

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

Fixed content is not dependant on user actions (memory used by script files, plugins, etc.)
Everything else is considered dynamic and should be your main focus when determining your limit.

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

Wrap或overwrite jQuery.data方法通知tracking系统您的数据分配.

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

If you keep large in-memory objects they should also be monitored.

As for event binding you should use event delegation and then it could also be considered a somewhat fixed factor.

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

Jquery相关问答推荐

如何在光滑的轮播上添加进度条

从 React 到 Node 服务器的 ajax 调用中的数据未定义

如何在没有实体框架的情况下在 ASP.NET 上使用 ajax 和 jquery 从列表创建数据表

如何在jQuery中移动表格行?

ajax调用后Jquery事件不会触发

$(document).ready(function() VS $(function(){

[本机代码]是什么意思?

在 contenteditable div 中的插入符号处插入 html

为什么要两次声明 jQuery?

如何在 JavaScript 或 jQuery 中规范化 HTML?

使用 JQuery 获取触发事件的元素的类

Underscore.js 和 jQuery 互补吗?

检测用户是否创建了滚动事件

页面加载后如何执行jquery代码?

$.ajax 的成功和 .done() 方法有什么区别

在 jquery 中使用 AJAX Post 从强类型 MVC3 视图传递模型的正确方法

组织 jQuery/JavaScript 代码的最佳方式 (2013)

JQuery 判断 DOM 中的重复 id

如何让 jQuery 等到效果完成?

AJAX 成功中的 $(this) 不起作用