Diagnostics of memory leaks on page reload

Question

I suspect that the single page javascript application contains a memory leak somewhere. Weak devices running Firefox or Chrome will end up crashing if the page remains open. I am trying to determine if a page reload will be expected to free memory or not.

I understand that memory processing is browser-specific, so the answer may be different in Chrome or Firefox.

NOTE. I admit that there are a lot of references to browsers on this issue (which would be off topic), but this issue is about debugging javascript, which I think is very relevant.

Answer 1

Barring browser errors / extensions, browsers free up resources when they are no longer needed; Firefox cleans up compartments , Chrome kills processes and its associated storage.

Firefox does its best, but it may take some time to clear the memory and can sometimes create zombie compacts :

Compartments are destroyed when they are collected in garbage. This happens some time after the last link to them disappears. This means that there may be a delay between the page being closed and the disappearance of its compartments ...

Sometimes due to errors in Firefox add SDK add-ins and / or add-ons that are not destroyed. This is a special type of memory leak, and they cause Firefox's memory usage to gradually increase over time, slowing it down and leading to a more severe crash.

Chrome uses a process for each tab (and indeed subprocesses for some objects in the tab, as well as IIRC, such as plugins, iframes, etc.) with the same effect. Although a quick check on chrome://memory-redirect/ and updating the tab looks like it is using pid . Therefore, updating is not a completely clean list.

FWIW Chrome has a "Force Reload" that clears the cache and can be useful for clearing more memory or a placebo: cmd-shift-r

I am not very familiar with the internal components, but I only saw that it was not reliably released between updates when a particular browser was getting too smart and trying to save things, when you did not change the origin, etc., to improve download performance.

In short, you can turn off the browser error if you do not see the freed memory as you expect, but you want to use various "about: memory" tools to check that at this point it will be from you to avoid this behavior and / or report this issue to your browser development team .

Otherwise, I think you're best off looking at your own memory leaks on the page using the various tools available.

Answer 2

A good way to debug JS resource usage is to use the Firefox performance monitor in a validation tool. Firefox Dev Edition has more detailed tools

Press F12 when on the page and click the small speedometer icon in the test window; this will open a performance monitor. Click the "Start recording" button, and Firefox will begin to test all script timings, CSS activity, user input, etc. On the page.

When you feel that it works long enough, stop recording and you will be presented with all the data. A diagram showing the performance will be shown at the top, and you can click on any part and examine all the scripts that were running at that time.

A complete tutorial for performance tools can be found here.