I found a memory leak in my code that looks like the following snippet
function random() {
return Math.floor(Math.random() * 1000);
}
var _target = $('#target');
function add() {
_target.empty();
for (var i = 0; i < 100; i++) {
_target.append('<tr><td>'+random()+'</td><td>'+random()+'</td><td>'+random()+'</td></tr>')
}
}
var addInt = setInterval(add, 500);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Memory leak test: jquery</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<table id="target"></table>
</body>
</html>
The same code that is written by innerHTML does not leak memory. The tab with this code in Chrome 57.0.2987.133 (64-bit) has grown from 37 to 161 MB. The problem exists if we use any of these methods in our code:
.html ();
.append ();
.appendTo ();
.prependTo ();
.prepend ();
I am not sure about .remove () and .empty (); I could not find a solution to this problem. All the posts I found are too old. Here is the result of my test:
source
share