Javascripts causing browser memory leak

Question

I have a Web app which is a monitoring tool. So someone it's going to keep it open on the browser all the day long. The problem is I'm refreshing the index page each 3 min:

var auto_refresh = setTimeout( function () {
    $('#page-body').load('/Monitor/Index').fadeIn("slow");
}, 180000); 

And every time the app refreshes itself, it's loading 3 javascripts which I'm invoking on my layout:

<script type="text/javascript" src="@Url.Content("~/Scripts/script-core-v1.0.js")">
</script> 
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.dataTables.js")"> 
</script>  
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.sparkline.js")">
</script>

So, my browser keeps getting bigger and bigger every time the app refreshes, and I think the main reason are those scripts.

How can I avoid this problem? Thanks!

Answer 1

Load a specific part of that page, not the whole thing:

$('#page-body').load('/Monitor/Index body')
                                     ^^^^

That's a selector on the end so you can target a specific element.

When you don't provide a selector, the whole page is loaded (scripts and all). When you provide a selector, the <script> tags are stripped.

Also, your browser probably isn't leaking memory. Your website is just consuming it all.