I've read many Stack articles and blog posts about memory management in Javascript.
My understanding is that within a given scope variable are marked for cleanup when all references to them are removed. Most "memory leaks" seem to relate to variables being linked via scope, or linked to DOM elements, which in turn prevents them from being garbage collected.
I am trying to understand then why these three code segments require the same RAM usage in Chrome and Firefox:
<html>
<body>
<script>
var bigString1=new Array(1000).join(new Array(2000).join("XXXX1"));
var bigString2=new Array(1000).join(new Array(2000).join("XXXX2"));
var bigString3=new Array(1000).join(new Array(2000).join("XXXX3"));
var bigString4=new Array(1000).join(new Array(2000).join("XXXX4"));
var bigString5=new Array(1000).join(new Array(2000).join("XXXX5"));
</script>
</body>
</html>
This simply created the variables in the window scope and so they reside in memory.
<html>
<body>
<script>
var bigString1=new Array(1000).join(new Array(2000).join("XXXX1"));
var bigString2=new Array(1000).join(new Array(2000).join("XXXX2"));
var bigString3=new Array(1000).join(new Array(2000).join("XXXX3"));
var bigString4=new Array(1000).join(new Array(2000).join("XXXX4"));
var bigString5=new Array(1000).join(new Array(2000).join("XXXX5"));
bigString1 = null;
bigString2 = null;
bigString3 = null;
bigString4 = null;
bigString5 = null;
</script>
</body>
</html>
However deleting them from memory does not reduce memory usage.
<html>
<body>
<script>
var test = function(){
var bigString1=new Array(1000).join(new Array(2000).join("XXXX1"));
var bigString2=new Array(1000).join(new Array(2000).join("XXXX2"));
var bigString3=new Array(1000).join(new Array(2000).join("XXXX3"));
var bigString4=new Array(1000).join(new Array(2000).join("XXXX4"));
var bigString5=new Array(1000).join(new Array(2000).join("XXXX5"));
bigString1 = null;
bigString2 = null;
bigString3 = null;
bigString4 = null;
bigString5 = null;
}
test();
</script>
</body>
</html>
Even placing them inside a scope that completes, does not remove them from memory.
Try it yourself. Watch the memory allocation in Activity Monitor. All three HTML files allocate and retain the exact same amount of RAM.
Can anyone help point out what piece of information I am missing here? How exactly can we get Javascript to release the memory from unused data?
For instance, if I continue to run
(function(){ var bigString1=new Array(1000).join(new Array(2000).join("XXXX3")); })();
Over and over again, each time the browser allocates ~20mb of RAM. I can let the computer sit there for hours and the RAM is never freed up. If the RAM were reserved, but cleared, then running the same command again and again would simply use the same memory space over and over again.
Most likely chrome is keeping the allocated memory to re-use it later. You should be able to create new arrays in that allocated (but unused) memory.
update I just tested this myself using Chrome 23 on Linux Mint.
Running
(function(){ var bigString1=new Array(1000).join(new Array(2000).join("XXXX3")); })();
Allocates about 20MB on top of whatever the page was using. Repeatedly spamming the snippet in console does not further increase memory usage. After roughly 30 seconds the memory is reclaimed.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With