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

jQuery or javascript to find memory usage of page

提问by Tauren

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

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

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.

我正在使用 jquery 前端和以 JSON 格式提供数据的 Restful 后端构建一个数据繁重的 web 应用程序。页面加载一次，然后一切都通过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.

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

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.
• 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.

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

采纳答案by gblazex

2015 Update

2015年更新

Back in 2012 this wasn't possible, if you wanted to support all major browsers in-use. Unfortunately, right now this is still a Chrome onlyfeature (a non-standard extension of window.performance).

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

window.performance.memory

window.performance.memory

Browser support: Chrome 6+

浏览器支持：Chrome 6+

---

---

2012 Answer

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.

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

The simple but correct answer is no. Not all browsers expose such data to you. And I think you should drop the idea simply because the complexity and inaccuracy of a "handmade"solution may introduce more problem than it solves.

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

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.

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

If you really want to stick with your idea you should separate fixed and dynamic content.

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

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.

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

But there is no easy way to summarize them. You could implement a trackingsystem that gathers all these information. All operations should call the appropriate tracking methods. e.g:

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

Wrap or overwrite jQuery.datamethod to inform the trackingsystem about your data allocations.

Wrap 或 overwritejQuery.data方法来通知跟踪系统您的数据分配。

Wrap html manipulations so that adding or removing content is also tracked (innerHTML.lengthis the best estimate).

包装 html 操作，以便添加或删除内容也被跟踪（innerHTML.length是最好的估计）。

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

如果您保留大型内存对象，则还应监视它们。

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

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

Another aspect that makes it hard to estimate your memory requirements correctly is that different browsers may allocate memory differently (for Javascript objects and DOM elements).

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

回答by Sindre Sorhus

You can use the Navigation Timing API.

您可以使用导航计时 API。

Navigation Timing is a JavaScript API for accurately measuring performance on the web. The API provides a simple way to get accurate and detailed timing statistics—natively—for page navigation and load events.

Navigation Timing 是一个 JavaScript API，用于准确衡量网络性能。API 提供了一种简单的方法来获取准确和详细的计时统计信息（原生）用于页面导航和加载事件。

window.performance.memorygives access to JavaScript memory usage data.

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

Recommended reading

推荐阅读

• Measuring page load speed with Navigation Timing

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

回答by Dustin Brownell

This question is 5 years old, and both javascript and browsers have evolved incredibly in this time. Since this now possible (in at least some browsers), and this question is the first result when you Google "javascript show memory useage", I thought I'd offer a modern solution.

这个问题已经有 5 年历史了，这段时间 javascript 和浏览器都取得了令人难以置信的发展。由于这现在是可能的（至少在某些浏览器中），并且这个问题是您在谷歌“javascript 显示内存使用情况”时的第一个结果，我想我会提供一个现代解决方案。

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

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

This script (which you can run at any time on any page) will display the current memory useage of the page:

此脚本（您可以随时在任何页面上运行）将显示页面的当前内存使用情况：

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

回答by tvanfosson

I don't know of any way that you could actually find out how much memory is being used by the browser, but you might be able to use a heuristic based on the number of elements on the page. Uinsg jQuery, you could do $('*').lengthand it will give you the count of the number of DOM elements. Honestly, though, it's probably easier just to do some usability testing and come up with a fixed number of tabs to support.

我不知道您有什么方法可以实际找出浏览器使用了多少内存，但您可以根据页面上的元素数量使用启发式方法。Uinsg jQuery，你可以这样做$('*').length，它会给你 DOM 元素的数量。不过，老实说，做一些可用性测试并提供固定数量的选项卡来支持可能更容易。

回答by Pablo Fernandez

Use the Chrome Heap Snapshot tool

使用Chrome 堆快照工具

There's also a Firebug tool called MemoryBugbut seems it's not very mature yet.

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

回答by Zachary K

If you want to just see for testing there is a way in Chrome via the developer page to track memory use, but not sure how to do it in javascript directly.

如果您只想查看测试，Chrome 中有一种方法可以通过开发人员页面跟踪内存使用情况，但不确定如何直接在 javascript 中执行此操作。

回答by David Mulder

I would like to suggest an entirely different solution from the other answers, namely to observe the speed of your application and once it drops below defined levels either show tips to the user to close tabs, or disable new tabs from opening. A simple class which provides this kind of information is for example https://github.com/mrdoob/stats.js. Aside of that, it might not be wise for such an intensive application to keep all tabs in memory in the first place. E.g. keeping only the user state (scroll) and loading all the data each time all but the last two tabs are opening might be a safer option.

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

Lastly, webkit developers have been discussing adding memory information to javascript, but they have gotten in a number of arguments about what and what should not be exposed. Either way, it's not unlikely that this kind of information will be available in a few years (although that information isn't too useful right now).

最后，webkit 开发人员一直在讨论向 javascript 添加内存信息，但他们已经就什么和什么不应该公开的问题争论不休。无论哪种方式，这种信息在几年内都不太可能提供（尽管这些信息现在不太有用）。

回答by o.v.

Perfect question timing with me starting on a similar project!

完美的提问时机，我开始了一个类似的项目！

There is no accurate way of monitoring JS memory usage in-app since it would require higher level privileges. As mentioned in comments, checking the number of all elements etc. would be a waste of time since it ignores bound events etc.

没有准确的方法来监控应用程序内的 JS 内存使用情况，因为它需要更高级别的权限。如评论中所述，检查所有元素的数量等将是浪费时间，因为它会忽略绑定事件等。

This would be an architecture issue if memory leaks manifest or unused elements persist. Making sure that closed tabs' content is deleted completely without lingering event handlers etc. would be perfect; assuming that it's done you could just simulate heavy usage in a browser and extrapolate the results from memory monitoring (type about:memoryin the address bar)

如果内存泄漏清单或未使用的元素持续存在，这将是一个体系结构问题。确保关闭标签的内容被完全删除而没有延迟事件处理程序等将是完美的；假设它已经完成，你可以在浏览器中模拟大量使用并推断内存监控的结果（在地址栏中输入about:memory）

Protip: if you open the same page in IE, FF, Safari... and Chrome; and than navigate to about:memoryin Chrome, it will report memory usage across allother browsers. Neat!

提示：如果您在 IE、FF、Safari...和 ​​Chrome 中打开同一页面；并在 Chrome 中导航到about:memory，它将报告所有其他浏览器的内存使用情况。整洁的！

回答by Cam

What you might want to do is have the server keep track of their bandwidth for that session (how many bytes of data have been sent to them). When they go over the limit, instead of sending data via ajax, the server should send an error code which javascript will use to tell the user they've used too much data.

您可能想要做的是让服务器跟踪该会话的带宽（已向它们发送了多少字节的数据）。当他们超过限制时，服务器应该发送一个错误代码，而不是通过 ajax 发送数据，javascript 将使用该代码告诉用户他们使用了太多数据。

回答by Midhat

You can get the document.documentElement.innerHTML and check its length. It would give you the number of bytes used by your web page.

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

This may not work in all browsers. So you can enclose all your body elements in a giant div and call innerhtml on that div. Something like <body><div id="giantDiv">...</div></body>

这可能不适用于所有浏览器。因此，您可以将所有 body 元素包含在一个巨大的 div 中，并在该 div 上调用 innerhtml。就像是<body><div id="giantDiv">...</div></body>