jQuery load() 方法内存泄漏? [英] jQuery load() method memory leak?
问题描述
我四处寻找这个问题的答案，虽然找到了相关的问题，但我找不到完全匹配的问题.
我有一个相当大的应用程序，它应该使用 jQuery.load() 方法将页面加载到另一个页面的 div 中.我遇到的问题是，当一遍又一遍地将同一个页面加载到同一个 div 中时，我看到浏览器的内存大幅增加(内存泄漏).如果我调用 $("*").unbind，我当然看不到泄漏，但随后一切都已重置，因此这并不是真正的修复.下面的代码示例重现了这个问题:
Test1.htm
<title></title><script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js"></script><script type="text/javascript" language="javascript"><!--变量 i = 0;$(document).ready(function() {$("#btn").click(功能() {我++;$("#Test1").load("Test2.htm", null, function() {//$(document).trigger("test");})$("#count").html(i);});});//--><身体><img id="btn" src="someimage.png"/><h3>我们正在将 Test2.htm 加载到下面的 div</h3><div>计数负载 =<span id="count">0</span><div id="Test1" style="border-style:solid">EMPTY</div>
Test2.htm = 任何旧的 html 页面..
如果您加载 Test1.htm 并多次单击按钮，您会注意到浏览器内存稳步增加.我认为问题在于加载的 js 和 DOM 元素从未设置为垃圾收集.在我的现实世界系统中，我尝试删除(elem.remove() 或 .empty())加载的元素，但这并不能真正解决问题.我也有很多使用src"加载的 js 文件，我用 $.getScript 替换了它，这似乎做了一个小小的改进.这些都是想到的变通办法，我想为这个问题找到一个真正的解决方案.有什么想法吗?
更新由于提供了有关 test2.htm(正在加载的页面)的更多信息
原始答案(出于历史目的):我实际上没有在您提供的代码/标记中看到任何泄漏 - 泄漏是否可能在 Test2.htm(您尚未提供代码)中/markup for)?
新答案:
我认为这可能是由于多次加载 jQuery 或 test2.htm 中的其他脚本造成的.
假设 jQuery 不会通过简单地实例化然后取消 jQuery 和 $ 来泄漏，那么多次加载将在内存中保留至少 2 个 jQuery 副本.加载时，jQuery 会在 _$ 和 _jQuery 中保留任何以前版本的 $ 和 jQuery 的备份 - 所以当您多次使用 load() 时，您将至少加载 2 个 jQuery 副本.
上述假设很可能不正确，但是 - 即使您通过设置 $,jQuery 来卸载"它，jQuery 也很有可能发生泄漏,_$ 和 _jQuery 到 null - 它并不是真的打算像那样多次加载(但是我确定他们故意允许它，因此您可以在必要时使用 noConflict() 加载和使用两个不同版本的 jQuery).
您可以向加载 URL 添加选择器".例如:
$("#Test1").load("Test2.htm body", null, function() {//回调什么都不做});//或者$("#Test1").load("Test2.htm div#the_Div_I_Want", null, function() {//回调什么都不做});如果您对 ajax 结果中的任何脚本不感兴趣，或者如果您确实想要脚本，我建议您这样做，您需要选择一个选择器来仅禁用某些元素/脚本，例如
/* 用选择器加载除了脚本之外的所有元素src 属性以 'jquery.js' 结尾" */$("#Test1").load("Test2.htm :not(script[src$='jquery.js'])", null, function() {//回调什么都不做});另外值得注意的是，如果您省略data"参数(您将其设为 null)，并提供一个函数作为第二个参数，jQuery 将正确确定第二个参数是回调，所以
$("#Test1").load("Test2.htm :not(script[src$='jquery.js'])", function() {//回调什么都不做});可以接受
I have hunted around for answer to this one, and though have found related quesions, I couldn't quite find an exact match for this.
I have a fairly large app which is supposed to load pages into divs in another page using the jQuery.load() method. The problem I have is that when loading the same page over and over again into the same div, I see the memory of the browser increase substantially (memory leak). If I call $("*").unbind, I of course do not see a leak, but then everything has been reset, so this isn't reallya fix. The following code example reproduces this problem:
Test1.htm
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" language="javascript">
<!--
var i = 0;
$(document).ready(function() {
$("#btn").click(
function() {
i++;
$("#Test1").load("Test2.htm", null, function() {
//$(document).trigger("test");
})
$("#count").html(i);
});
});
//-->
</script>
</head>
<body>
<img id="btn" src="someimage.png" />
<h3>We are loading Test2.htm into below div</h3>
<div>
Count loads =<span id="count">0</span>
</div>
<div id="Test1" style="border-style:solid">EMPTY</div>
</body>
Test2.htm = any old html page..
If you load Test1.htm and click the button mutliple times, you'll notice the browser memory steadily increasing. I believe the problem is that the loaded js and DOM elements are never set for garbage collection. In my real world system I have tried removing (elem.remove() or .empty()) the loaded elements, but this doens't really fix the problem. I also have many js files loaded using "src", which I replaced with $.getScript, this seems to have had made a small improvement. These are all workarounds thought, and I wanted to find a real solution for this problem. Any ideas?
Edit: update due to more info provided about test2.htm (the page being loaded)
Original answer (for historical purposes): I don't actually see any leaks in the code/markup you have provided - is it possible the leak is in Test2.htm (which you haven't provided the code/markup for)?
New answer:
I would suggest that it it probably due to either multiple loads of jQuery, or other scripts you have in test2.htm.
Assuming jQuery does not leak by simply instantiating and then nullifying jQuery and $, loading multiple times will keep at least 2 copies of jQuery in memory. When loaded, jQuery keeps a backup of any previous versions of $ and jQuery in _$ and _jQuery - so you are going to have at least 2 copies of jQuery loaded when you use load() multiple times.
The above assumption is most likely not correct however - there is every chance that jQuery has leaks even if you "unload" it by setting $,jQuery,_$ and _jQuery to null - it's not really intended to be loaded multiple times like that (however I'm sure that they allow it intentionally, so you can use noConflict() to load and use two different versions of jQuery if necessary).
You can add a "selector" to a load URL. For example:
$("#Test1").load("Test2.htm body", null, function() {
//callback does nothing
});
//or
$("#Test1").load("Test2.htm div#the_Div_I_Want", null, function() {
//callback does nothing
});
I would suggest doing this if you are not interested in any scripts in the ajax result, or alternatively if you do want scripts, you'd need to choose a selector to disable only certain elements/scripts, e.g.
/* load with selector "all elements except scripts whose
src attribute ends in 'jquery.js'" */
$("#Test1").load("Test2.htm :not(script[src$='jquery.js'])", null, function() {
//callback does nothing
});
Also of note is that if you leave out the "data" argument (you have it as null), and provide a function as the second argument, jQuery will correctly determine that the second argument is the callback, so
$("#Test1").load("Test2.htm :not(script[src$='jquery.js'])", function() {
//callback does nothing
});
is acceptible
这篇关于jQuery load() 方法内存泄漏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
