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.

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.

• javascript

• 1 This feels like a memory leak which may be worth reporting to Chrome developers. – apokryfos Commented Jun 20, 2016 at 12:45

2 Answers 2

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".

You can use location.reload(true), with this it clears all the memory(caches etc). Moreover if you want to further clear the storage of a browser then you can use localStorage.clear() in your javascript code. This clears the items stored in the localStorage if you have saved something like this. localStorage.myItem = "something".