IE9 memory leak for dynamic DOM objects with ID attribute

I noticed that assigning an ID attribute value to dynamically created DOM objects leads to IE9 memory leak. Has anyone else experienced this and, more importantly, been aware of any problems? It does not leak in other browsers, even IE6 passes!

Leakage code demo:

It simply adds and removes rows from the table continuously and assigns an identifier to each row, which will be used for searching later.

No leak without "row.id = eid;"

<html> <head> <script type="text/javascript"> function addRow(tbl, index) { var row = tbl.insertRow(index); var eid = "loongrowid" + count; row.id = eid; for (var i = 0; i < 9; i++) { row.insertCell(i); } return row; } function removeTableRow(tbl, index) { var row = tbl.rows[index]; tbl.deleteRow( index ); } var count = 1; function fillRow(row){ row.cells[0].innerHTML = '<input type="checkbox"' + ' checked="checked"' + ' />'; for (var i = 1; i < 9; i++) { row.cells[i].innerHTML = count + " c"; } ++count; } var added = false; function dostuff() { var tbl = document.getElementById("tbl"); var i; if (added) { for (i = 0; i < 20; ++i) { removeTableRow(tbl,1); } } else { for (i = 0; i < 20; ++i) { var row = addRow(tbl, i+1); fillRow(row); } } added = !added; setTimeout(dostuff, 1); } </script> </head> <body onload="setTimeout(dostuff, 1)"> <h1 id="count">TESTING</h1> <table id="tbl" style="width:100%;"> <tr> <th>selected</th> <th>date</th> <th>time</th> <th>place</th> <th>device</th> <th>text</th> <th>state</th> <th>status</th> <th>quality</th> </tr> </table> </body> </html> 

I noticed that removing all cells from a table row causes a memory leak compression, so I think IE holds onto the row after it is deleted from the table.

I also tried a job that added the created table rows to a Javascript object that would be used as a hash table instead of relying on getElementById (row.id), but also leaked for some reason that I don't see.

 var hash = []; // when creating row row.extid = eid; // Note: this by itself causes no leak hash[eid] = row; // when removing row delete hash[row.extid]; 
+6
source share
2 answers

In my case, I found a suitable solution, noting that reloading the included test page after it had been “launched” for a while caused the memory usage to remain constant temporarily (relative to the time it took before the reload). After that, he began to grow again.

So it seems that, yes, IE does not delete the resources used by the ID: d elements completely after the element has been deleted, but it seems that it will reuse these resources if the same identifier is added to the page again.

Ergo, just make sure that the added and deleted identifiers are part of a limited set, not an unlimited one. The test page uses strictly increasing identifiers based on integer numbers, and in my original case of the problem, identical identifiers of sequence numbers are used. Fortunately, in both cases it is fairly easy to fix them in a limited range.

For the test code above:

++ count; if (count> 1000) count = 0;

+2
source

Back in my Java Swing days (yes, yes, I'm old), the JVM had a somewhat similar problem. The fact that the garbage collector could not clean up Swing objects that were nested inside other Swing objects and, thus, cause a memory leak.

I used this by explicitly setting each Swing object to NULL, as they are no longer needed.

In the case of deeply nested objects (i.e. Swing tables containing other Swing objects), I wrote a recursive method that could be used by all my Swing classes that intersect any Swing object, NULL-ing every object found inside.

It was annoying that I had to go through all these extra efforts to get around the error in the JVM garbage collector, but it worked beautifully. As soon as I had it in place, the memory leaks disappeared.

It might be worth a try trying something similar with IE9. Force DOM objects to NULL since they are no longer needed can solve this for you. And all the rest...: -)

0
source

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


All Articles