ajax网站内存使用累积/Chrome答案

【问题标题】：ajax website memory usage accumulation / Chromeajax网站内存使用累积/Chrome
【发布时间】：2014-09-26 15:21:42
【问题描述】：

我有一个 ajax/pushstate 网站，它通过 ajax 加载数据（页面）。在 Chrome（可能还有其他浏览器）中，我注意到导航页面时内存消耗会累积，尤其是具有大量图像的页面。您可以在此处查看提及的网站： mjau-mjau.com

我知道有很多关于一般 javascript 内存泄漏和内存管理的信息，但这个问题在大多数意义上似乎与包含大量图像（通常是大图像）的页面直接相关。在页面之间导航时，就好像图像文件在其 html 上下文被替换后不会从内存中刷新一样。

有什么我可能会忽略的吗？浏览器不应该自动为已删除的 html 数据（包括图像）回收内存吗？在使用变换的页面之间转换时，它会以某种方式与 GPU 层相关吗？

欢迎提出建议。

【问题讨论】：

我来过这里。 IIRC 将 img src 设置为一个小的缓存图像（1px × 1px）或 about:blank 似乎可以解决问题。我认为一位同事发现了 about:blank 的问题，而是选择了轻量级图像。

【解决方案1】：

我追踪了这个错误，发现它只发生在 Chrome 浏览器中。此外，它似乎与延迟加载的图像和 ajax 页面直接相关。在 ajax 调用后从 DOM 中删除加载的图像时，它们不会从内存中删除。我设法找到了一个 hack，它在用新数据更新 DOM 之前以某种方式将它们从内存中清除。

$('#content').find("img").off().attr('src', '').remove();

我不确定是否需要以上所有内容，但该组合在一定程度上起作用。奇怪的是，直到另一个带有图像的页面替换了#content DOM元素，内存才会被回收。 Chrome 内存管理问题！

【讨论】：