I’m working on a slide-show-like web app in which the current image is drawn onto a canvas and you can flip through images with next/prev buttons. The images a loaded with someImage.src and for performance reasons I’m doing that in background while user views first image.
Firefox allocates lots of memory during that preloading (up to 20-30 times more than Chrome or Safari do and even twice as much as IE). Moreover, if I change the slide show, which I can do via loading an xml description of the slide show in background (with a drop down menu) while the URL of the web site remains the same, no memory is freed, but a lot new is allocated. Not until I change or reload the URL of the web site Firefox deallocs the memory. This behavior is different to all other browsers.
What’s going on there? Why is Firefox so hungry? Any ideas, how to fix that?
Is there a way to force Firefox to free memory or to reduce the memory it uses for pre-caching loaded (but not shown) images?
Even if it looks sometimes that firefox allocates more and more memory, that might be deceptive. Firefox garbage collector works somewhat strange (to me). Its not unusual that it takes 2-8 minutes before Firefox decides to free a huge chunk of memory. Probably worth a look into the source code.
However, you might be able to speed up things by
nulling some of your variables/references so the garbage collector has a chance to detect a little earlier as to what it should abandon. That is especially a good idea with canvas elements/references. So, easily setting not more used/needed variablesshould do some work for you. If you still think that Firefox uses too much memory, open a new tab and type in about:memory. That’ll give you a detailed view from the current browser memory usage. For instance, you can see if that memory is used for Javascript code, Images or other stuff which is very useful to confine the bad guys.