All geek questions in one place

JQuery load () memory leak method?

I hunted for the answer to this question, and although I found related questions, I could not find an exact match for this.

I have a fairly large application that should load pages in divs on another page using the jQuery.load () method. The problem is that when I reload the same page into the same div, I see that the browser memory increases significantly (memory leak). If I call $ ("*"). Unbind, of course, I do not see a leak, but then everything was reset, so this is not a 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 download Test1.htm and click the mutliple button once, you will notice that browser memory is growing steadily. I believe the problem is that the loaded js and DOM elements are never set to garbage collect. On my real world system, I tried to remove (elem.remove () or .empty ()) loaded items, but this really does not fix the problem. I also have many js files uploaded with "src", which I replaced with $ .getScript, it seems to have improved a bit. All these workarounds were considered, and I wanted to find a real solution to this problem. Any ideas?

+4
source share
3 answers

Edit: update due to additional information about test2.htm (download page)

Original answer (for historical purposes): in fact, I do not see leaks in the code / markup you specified - is it possible to leak in Test2.htm (which you did not provide the code / markup for)?

New answer:

I would suggest that this is possible due to the many downloads of jQuery or other scripts that you have in test2.htm.

Assuming jQuery does not leak, just instantiating it and then dropping the jQuery and $ values, loading several times will contain at least 2 copies of jQuery in memory. When loading, jQuery backs up any previous versions of $ and jQuery to _$ and _jQuery - so you will have at least 2 copies of downloadable jQuery when you reuse load ().

The above assumption is most likely incorrect, but there is every chance that jQuery has leaks, even if you "unload" it by setting $ , jQuery , _$ and _jQuery to null - it really is not intended to be downloaded multiple times (but 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 the download URL. For instance:

 $("#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 as a result of ajax, or, alternatively, if you need scripts, you need to select a selector to disable only certain elements / scripts, for example.

 /* 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 });

It should also be noted that if you do not take into account the "data" argument (you have it as null ) and provide the function as the second argument, jQuery will correctly determine that the second argument is a callback, therefore

 $("#Test1").load("Test2.htm :not(script[src$='jquery.js'])", function() { //callback does nothing });

permissible

+4
source

Hmm, maybe this is just something really basic, but if I install $ .ajaxSetup ({cache: false}); in front of download calls, I don't seem to get the problem. Now, of course, my "real" code has this call, so why am I seeing a problem? I believe that the Tabs UI extension leads to the inclusion of caching (I actually do not believe this, but cause a false cache request before each download seems to fix it!)

+1
source

So, I finally found the problem, and this is not a leak at all (which I suspected), it is simply the result of attaching several very complex handlers to the same trigger / event. I raised this question related to this:

JQuery event model and handler avoidance duplication

0
source

Source: https://habr.com/ru/post/1299741/

More articles:


All Articles