jQuery或javascript来查找页面的内存使用情况
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery或javascript来查找页面的内存使用情况相关的知识，希望对你有一定的参考价值。
有没有办法找出网页或我的jquery应用程序使用了多少内存？
这是我的情况：
我正在使用jquery前端和一个以JSON提供数据的restful后端来构建数据量很大的webapp。页面加载一次，然后一切都通过ajax发生。
UI为用户提供了在UI中创建多个选项卡的方法，每个选项卡可以包含大量数据。我正在考虑限制他们可以创建的标签数量，但他们认为只有在内存使用量超过某个阈值时才限制它们会很好。
根据答案，我想澄清一下：
- 我正在寻找运行时解决方案（不仅仅是开发人员工具），以便我的应用程序可以根据用户浏览器中的内存使用情况确定操作。
- 计算DOM元素或文档大小可能是一个很好的估计，但它可能非常不准确，因为它不包括事件绑定，data（），插件和其他内存数据结构。
2015年更新
回到2012年，如果您想支持所有主流浏览器，那么这是不可能的。不幸的是，现在这仍然是Chrome only功能（window.performance的非标准扩展）。
window.performance.memory
浏览器支持：Chrome 6+
2012答案
有没有办法找出网页或我的jquery应用程序使用了多少内存？我正在寻找运行时解决方案（不仅仅是开发人员工具），以便我的应用程序可以根据用户浏览器中的内存使用情况确定操作。
简单但正确的答案是否定的。并非所有浏览器都会向您公开此类数据。而且我认为你应该放弃这个想法只是因为“手工”解决方案的复杂性和不准确性可能会引入比解决的问题更多的问题。
计算DOM元素或文档大小可能是一个很好的估计，但它可能非常不准确，因为它不包括事件绑定，data（），插件和其他内存数据结构。
如果你真的想坚持你的想法，你应该分开固定和动态内容。
固定内容不依赖于用户操作（脚本文件，插件等使用的内存） 其他一切都被认为是动态的，在确定限制时应该是您的主要关注点。
但是没有简单的方法来总结它们。您可以实施一个收集所有这些信息的跟踪系统。所有操作都应调用适当的跟踪方法。例如：
包裹或覆盖jQuery.data方法，以通知跟踪系统您的数据分配。
包装html操作，以便跟踪添加或删除内容（innerHTML.length是最佳估计）。
如果保留大型内存中对象，则还应对其进行监视。
至于事件绑定，你应该使用事件委托，然后它也可以被认为是一个有点固定的因素。
另一个使得很难正确估计内存需求的方面是不同的浏览器可能以不同的方式分配内存（对于javascript对象和DOM元素）。
您可以获取document.documentElement.innerHTML并检查其长度。它会为您提供网页使用的字节数。
这可能不适用于所有浏览器。因此，您可以将所有身体元素包含在一个巨大的div中，并在该div上调用innerhtml。像<body><div id="giantDiv">...</div></body>之类的东西
你可以使用Navigation Timing API。
Navigation Timing是一个JavaScript API，用于准确测量Web上的性能。 API提供了一种简单的方法来获取准确和详细的计时统计信息 - 本机 - 用于页面导航和加载事件。
window.performance.memory可以访问JavaScript内存使用数据。
推荐阅读
这个问题已经有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);我不知道您是否能够确切地知道浏览器使用了多少内存，但您可以根据页面上的元素数量使用启发式方法。 Uinsg jQuery，你可以做$('*').length，它会给你DOM元素数量的计数。但老实说，只是做一些可用性测试并提出固定数量的标签来支持它可能更容易。
还有一个名为MemoryBug的Firebug工具，但它似乎还不是很成熟。
如果您只想查看测试，Chrome可以通过开发者页面跟踪内存使用情况，但不确定如何直接在javascript中执行此操作。
我想建议一个与其他答案完全不同的解决方案，即观察应用程序的速度，一旦它低于定义的级别，或者显示用户关闭选项卡的提示，或禁用新选项卡打开。提供这种信息的简单类是例如https://github.com/mrdoob/stats.js。除此之外，对于如此密集的应用程序来说，首先将所有选项卡保留在内存中可能并不明智。例如。只保留用户状态（滚动）并在每次除最后两个选项卡之外的所有数据都打开时加载所有数据可能是一个更安全的选项。
最后，webkit开发人员一直在讨论向javascript添加内存信息，但是他们已经讨论了关于什么和什么不应该暴露的争论。无论哪种方式，这种信息在几年内都不可能出现（虽然这些信息现在不太有用）。
完美的问题时间与我开始类似的项目！
没有准确的方法来监视应用内的JS内存使用情况，因为它需要更高级别的权限。正如评论中所提到的，检查所有元素的数量等会浪费时间，因为它忽略了绑定事件等。
如果内存泄漏明显或未使用的元素持续存在，这将是架构问题。确保完全删除已关闭的选项卡的内容而不会延迟事件处理程序等，这将是完美的;假设已完成，您可以在浏览器中模拟大量使用并从内存监控中推断结果（类型为：地址栏中的内存）
Protip：如果你在IE，FF，Safari ......和Chrome中打开同一页面;而不是导航到Chrome中的内存：内存，它将报告所有其他浏览器的内存使用情况。整齐！
您可能想要做的是让服务器跟踪该会话的带宽（已向其发送了多少字节的数据）。当他们超过限制时，服务器应该发送一个错误代码，javascript将用来告诉用户他们使用了太多的数据，而不是通过ajax发送数据。
以上是关于jQuery或javascript来查找页面的内存使用情况的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery 或 Javascript 在页面上选择数字