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

Posted

技术标签:

【中文标题】jQuery或javascript查找页面的内存使用情况【英文标题】：jQuery or javascript to find memory usage of page 【发布时间】：2011-02-01 13:56:11 【问题描述】：

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

这是我的情况：

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

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

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

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

【问题讨论】：

您应该调查您的 webapp 的用户类型，以确定他们在使用您的 webapp 时是否存在内存问题。还是您自己的 web 应用程序存在内存/性能问题？ @Prutswonder：不，我没有遇到麻烦，但我只是好奇是否存在这样的工具。只是认为，与其在选项卡上设置固定限制，不如动态方法可能很酷。 我只是在问题中添加了一些额外的细节，以帮助澄清我正在寻找运行时解决方案，而不是构建时解决方案。 只是一个问题，如果某些东西已经被缓存了，那还算数吗？ 【参考方案1】：

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

【讨论】：

@tvanfosson：不错的主意，但这不会给我有关非 DOM 内存的信息，例如 .data() 和内存数据结构。但它可以很好地估计我可以使用的整体重量。【参考方案2】：

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

【讨论】：

@Zachary：谢谢。我肯定会使用开发工具，但希望找到运行时分析解决方案。 如果你找到了请告诉我，我很想有一个方便的【参考方案3】：

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

【讨论】：

@incrediman：这也是一个很酷的想法，但我认为如果不构建大量跟踪功能就行不通——仅仅字节计数是行不通的。问题是选项卡中的数据是一个列表，用户将以多种不同的方式对其进行过滤和排序。每次他们进行更改时，都会从服务器检索新数据并替换当前的 dom 元素。另外，怎么说他们没有点击“重新加载”，而是从一个新页面开始？我还必须跟踪 304 等，但我打算只提供静态 html，所有数据都来自 REST 服务。 此方法不考虑使用 createElement() 或 remove() 创建或销毁的元素，这会影响客户端内存使用。但有趣的是，它与其他答案不同（通过测量服务器端而不是客户端，您的测量不会像其他答案那样改变内存）。【参考方案4】：

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

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

【讨论】：

生成的innerHTML 字符串的长度不太可能有用与浏览器用于呈现该HTML 的内存（例如，在其内部对象模型中）相关。 为什么会这样？我的理由是，如果在浏览器中加载了某些文本，则必须将其存储在内存中。所以它确实给出了浏览器用于呈现页面的内存的一些度量。 这样想。如果你说“我想给你1000万美元”，那就是8个字。另一方面，如果你说“我想在你的餐巾纸上打喷嚏”，那就是 7。第一个只有 8/7 比第二个更有价值吗？ 这类似于@tvanfosson 建议获取 DOM 元素的数量。你的可能更准确一些，因为不同的 dom 元素可以包含不同数量的文本。但是它仍然没有得到关于 data()、点击处理程序、内存数据结构和对象等的任何信息。我的应用使用了很多这些功能。 范围内可以有指向分离的 DOM 节点的 JS 变量，这些变量不会是文档元素的一部分。你也可以编写代码来将一个非常长的字符串加载到一个变量中，消耗千兆字节的内存，而不影响页面上的文本。【参考方案5】：

使用Chrome Heap Snapshot tool

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

【讨论】：

@Pablo：谢谢。我肯定会使用开发工具，但我希望能找到一些可以在运行时使用的东西来查找每个用户浏览器的内存使用情况。【参考方案6】：

您可以使用Navigation Timing API。

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

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

推荐阅读

Measuring page load speed with Navigation Timing

【讨论】：

很好的建议。谢谢。【参考方案7】：

与我开始类似项目的完美问题时机！

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

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

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

【讨论】：

【参考方案8】：

2015 年更新

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

window.performance.memory

浏览器支持：Chrome 6+

2012 年答案

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

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

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

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

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

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

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

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

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

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

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

【讨论】：

innerHTML.length 不占用内存或 RAM 或 CPU（或其他任何东西，我不知道）来处理吗？ 浏览器对此功能的支持不是 IE9+ 或除 Chrome 之外的任何东西。 Window.performance.memory 仅适用于 Chrome。 docs.webplatform.org/wiki/apis/timing/properties/memory 你说得对，我认为内存是导航计时标准和window.performance 对象的一部分。旧的“支持”条目适用于该标准。 window.performance.memory 被 Chrome 视为非标准扩展。 要通过 window.performance.memory 启用实时内存监控，您需要使用 --enable-precise-memory-info 标志启动 Chrome。 更新：Opera 也支持这个。资料来源：Mozilla。 developer.mozilla.org/en-US/docs/Web/API/…【参考方案9】：

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

最后，webkit 开发人员一直在讨论向 javascript 添加内存信息，但他们就哪些内容和哪些内容不应该公开存在争议。无论哪种方式，这种信息在几年内都不太可能出现（尽管这些信息目前还不太有用）。

【讨论】：

【参考方案10】：

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

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

【讨论】：

这似乎是报告 JS 内存使用而不是页面内存使用，Chrome 的内置任务管理器说 Gmail 使用 250MB 而 memory-stats.js 报告 33.7MB bookmarklet.js 的 github 页面没有列出许可证，因此它可能是受版权保护的知识产权。这在依赖该项目时留下了一定程度的不确定性。

以上是关于jQuery或javascript查找页面的内存使用情况的主要内容，如果未能解决你的问题，请参考以下文章

HTML基础（jQuery）

在 javascript 或 JQuery 中查找控件

当您使用 javascript 或 jquery 将鼠标悬停时，如何使图像或按钮发光？

如何从 jquery 或 javascript 中的两个不同数组中查找唯一记录？

使用 jquery 或 javascript 在 GridView 的 TemplateField 中查找控件

jQuery