How to clear browser memory with Javascript

Question

I have a simple single-page app that scrolls a bunch of photos indefinitely, meant to be run on displays for days at a time.

Because of the large number of scrolling pics, the memory use in Chrome keeps growing. I want a way to programmatically reduce the memory consumption at intervals (every few hours).

When I stop the animation programmatically, the memory footprint still doesn't go down. Even when I reload the page with location.reload();, it doesn't go down.

Is there a way to do this? How I can I "clear everything" programmatically that has the same effect as closing the tab?

FYI, in Firefox there isn't a memory issue. Just in Chrome. The code is super simple, uses requestAnimationFrame to animate two divs across the screen constantly. I'm not accumulating references anywhere. My question isn't about my code specifically, but rather about general ways to reset the tab's memory if it can be done.

Answer 1

Please find out with chrome or Firefox memory debugger, where the memory leak is.Then, when you find, just think, how you can clean this objects.

Reasonable causes of memory leaks are:

1. You are loading big images, you need to resize it on server, or simply draw it to smaller canvases
2. You have too many dom elements (for an example more than 10000)
3. You have some js objects, that are growing up, and you don't clean it.

When in task manager you will see, that usage of memory is very high. You can see what going on with memory at firefox if you put to address bar about memory , and then press button "Measure".