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

Question

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

这是我的情况:

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

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

根据大家的回答，我想澄清一下:

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

Answer 1

2015 年更新

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

window.performance.memory

浏览器支持:Chrome 6+

---

2012 年答案

Is there a way to find out how much memory is being used by a web page, or by my jquery application? 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.

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

Counting DOM elements or document size might be a good estimation, but it could be quite inaccurate since it wouldn't include event binding, data(), plugins, and other in-memory data structures.

如果您真的想坚持自己的想法，您应该将固定内容和动态内容分开。

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

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

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

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

如果您保留大型内存对象，也应该对其进行监控。

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

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