DEV Community

loading...

Finding memory bloat in Firefox tabs

rrees profile image Robert Rees ・2 min read

I use a lot of tabs and as a consequence I can frequently find myself in a situation where my browsers are consuming all the resources my machine has. Chrome has some excellent tooling for solving this in the form of the Task Manager.

Firefox has equally good tools but they are not as neatly packaged and require a bit of practiced eye to understand.

The other day though the memory diagnostics proved invaluable in revealing some unexpected features of pages that were causing memory-bloat and in turn causing lots of memory paging and CPU-use that was crowding out the applications that I actually wanted to be focusing on.

Despite closing down a number of tabs that I thought would be resource hungry Firefox was still consuming large amounts of CPU.

Opening up the memory report and hitting the "Measure" button generates a tree of all the memory allocation Firefox is using. For the most part you can scroll through the panels until you get to the Web Content section, there are multiple panels here depending on what the pages are doing. Really though you're just looking at the first number in the tree and looking for big numbers.

When you've found a bit number you then traverse through the tree visually looking at the window allocations.

In my case there were two pages at the top of tree that were using three times as much memory as anything else. The first was a page that I thought was just a static image, however the memory report told me there was a Youtube embed on the page.

Sure enough scrolling down the page after the image there was a lot of "subscription" promotion including a video embed.

The second page was again something that I thought was a text and pictures page that was a design moodboard. The memory report revealed though that there were several Gfycat embeds all of which were consuming a lot of memory. Again scrolling through the page the top half was all reasonable while the bottom-half had a lot of unnecessary animated screen captures (it's the web, link to the demo for the love of hypertext).

In both cases I had been fooled by long pages where the content at the top and bottom were very different and I had wasted a lot of time speculating from experience about what might be consuming resources when a minute or two with the report and closing two windows resolved my issue immediately.

Discussion (0)

pic
Editor guide