Javascript leak type diagnostics
I have a web page with an auto-update feature. When it is enabled, every second the page is fetched via ajax (called page_request) and replaces the contents of the container div with the provided container:
document.getElementById(containerid).innerHTML=page_request.responseText;
This works most of the time, no problem.
The problem occurs when the following script is in page_response:
<script type=\"text/javascript\">
$(document).ready(function() {
dtable = $('#multi-stat-table').dataTable();
});
</script>
This script turns the table with the id "multi-stat-table" into a sortable table using the JQuery DataTables plugin. The script is running and I have sorted tables. However, if auto-update is enabled, a memory leak occurs that eventually consumes the entire heap (slowly but surely).
I see this phenomenon using high and chrome memory profiler. Every second, ~ 70KB of data is allocated, but only ~ 20KB is freed. Hence, there is a net memory loss of 50 KB per second. I've looked at objects in the profiler that take up memory, but it's very difficult to figure out from a number without a description what these arrays and objects actually refer to. I couldn't figure out how to make the garbage collector collect those unused objects that accumulate every second:
I've tried setting dtable to null before every auto update, to no avail. I have also tried calling dtable.api (). Clear () and dtable.api (). Destroy (), but the leak persists. How can I find this leak, and more importantly, what can I do to stop it?
source to share
I was able to pinpoint the exact cause of the memory leak.
I first got the idea that it might be a jQuery caching issue when I looked through the Chrome profiler and saw that the jQuery cache object was referencing 45MB objects. After a little research, this is the article I read that helped me figure out how to fix it: http://javascript.info/tutorial/memory-leaks#jquery-anti-leak-measures-and-leaks
Before I did this: document.getElementById (containerid) .innerHTML = page_request.responseText; // Dangerous if something inside the container is referenced by jQuery later!
After the fix:. $ ("# Container") HTML (page_request.responseText); // html () dereferences unused objects cached inside the container
Note to myself: It can be dangerous to mix and match jQuery and non-jQuery DOM
source to share