javascript - IE 中的内存泄漏 : Due to ajax call using . load()

标签 javascript performance internet-explorer memory-leaks html-components

我正在通过 ajax 调用将 .html 文件的全部数据加载到一个 div 中。 html 页面包含 HTC(html 组件)与页面上的元素绑定(bind)所需的链接、脚本标记。

页面结构如下:

enter image description here 我正在使用 jQuery 加载这样的 HTML 页面

<body>
<input type="radio" class="openpage" id="0001">
<input type="radio" class="openpage" id="0002">
<input type="radio" class="openpage" id="0003">
<input type="radio" class="openpage" id="0004">

<div id="loadPage"></div>
<script>
$(document).ready(function(){
  $(".openpage").on("click",function(){
    $("#loadPage").load($(this).attr("id")+".html",function(){
    //load a page with many htc bindings and external references

    //trigger some onload functions which are not called automatically in IE
    //confirmed this is in chrome

    });
  });
})
</script>

</body>

问题在于,当单击单选按钮加载页面时,IE 内存不断堆积,加载几页后浏览器停止响应。 我可以在任务管理器中看到内存在增加。

该应用程序在 IE 5、6、7、8、9 中运行,在 IE10 中以怪癖模式运行。我试图在 chrome 中复制相同的场景,但没有显示任何问题。所以我认为这是 IE 特定的内存管理相关问题。

看了很多文章都不太服气,我也看了this关于 SO 的问题,但它建议只加载页面的某些部分,这在我的情况下是 Not Acceptable 。这 article似乎相关,但我不确定在我的案例中到底是什么导致了内存泄漏。

上面的整个主体实际上都在 iframe 中。因此,作为一种解决方法,我重新加载了 单击 8 次单选按钮后包含主页的框架。 我尝试在每次加载之前清除内容:

$("#loadPages").empty();

$("#loadPages").find("*").off();

$.ajaxSetup({ cache: false });

但是没有任何作用。所以我怀疑jquery是否可以清除通过htc注册的事件。

1) 这种情况下如果能解释一下内存泄漏的原因就好了

2) 以及一般来说,为什么在加载许多资源后浏览器中会发生内存泄漏。这不会发生在现代浏览器中,但为什么会发生在旧浏览器中。

3) 有没有办法在不刷新框架的情况下释放浏览器内存。

4)有没有办法检查浏览器内存中驻留的所有资源。

最佳答案

您有几个工作流程:

  • 用动态加载的结构替换现有的 DOM 结构。
  • 加载后连接额外的事件处理。

从这里开始:

  • 移除/替换 DOM 节点时,事件仍然绑定(bind)
  • 通过绑定(bind)到事件处理程序,DOM 节点可能无法清除
  • DOM 节点保留在内存中,与 UI 分离,但仍会泄漏内存。

您的选择是:

  • 在从 DOM 中清除这些节点并允许加载新内容之前,请务必清除现有结构上的所有事件。
  • 有多个节点显示,每个节点只加载一次。
  • 检查节点是否存在,并简单地将其分离,而不是尝试替换它。

IE 为 JavaScript 和呈现引擎提供单独的 COM channel ,这意味着有时,尤其是事件绑定(bind)。 JS 中的对象/状态可以保留对 UI/DOM 节点的引用……而 DOM 节点可以引用 JS 事件处理程序。在许多情况下,这意味着这些部分不会被垃圾回收,从而导致内存使用量膨胀。早期版本的情况要糟糕得多,但仍然会发生。

您可能会遇到与其他浏览器类似的问题,但 IE 往往会更快地显示此行为。对于长期存在的单页应用程序,这种情况也经常发生。

如果您只将每个资源加载到它自己的 DOM 节点中一次,您可以简单地分离/重新附加该节点。此外,您可以依靠事件传播来监听来自父节点的事件。这些中的任何一个都会降低争用的风险和开销。

至于取消注册你的事件处理程序,jQuery 在这方面比大多数人做得更好,只要你注册 jQuery,并使用 jQuery 移除/删除节点(及其子节点)。

关于javascript - IE 中的内存泄漏 : Due to ajax call using . load(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24871838/

相关文章:

performance - 通过更少的操作提高代码的性能

python - 基于 Pandas 组内日期的有效转换?

c++ - IDebugProgramProvider2.GetProvider 在 Vista 上处理数据

c# - .NET Core 2 MVC - 从 Azure Blob 存储下载文件在 Google Chrome 中有效,但在 Internet Explorer 中无效

javascript - 如何将 angularjs 值分配给 jquery

java - 如何将 Java 数组内容传递到 javascript 数组中?

javascript文件中的php常量

java - 使用多线程下载真的会加快速度吗?

javascript - 周日只在 Jquery Datepicker 上?

css - IE flexbox 垂直对齐中心和最小高度