Web Application Memory Profiling, Take Two

Back in July, the Mozilla Developer Tools Lab released an experimental memory tool that allowed a web developer to get a better picture of Firefox’s memory usage. That tool was a great start, but it had a few issues:

  1. It was slow.
  2. It showed the entire Firefox JS heap, which included lots of objects internal to Firefox that weren’t of much use to web developers.
  3. It was a bit of a hassle to set up, as it involved freezing Firefox and accessing a local web server from a different browser.

I’ve spent some time trying to resolve these issues, and have a usable prototype for Firefox 3.5 that you can try out. The new tool has an entirely different front-end from the last one and runs in Firefox itself—no need to launch a separate browser. It also runs a lot faster, and allows you to profile the JavaScript memory use of individual browser tabs.

Here’s a screenshot. You can also click on it to read some annotations I’ve added through Flickr:

The above profile was taken while this page was open in a tab. Feel free to look at the page’s source code and compare it with the profiling output.

One of the first things you’ll notice is that there’s no information about actual bytes used. This is partly because we need to add more instrumentation to Firefox in order to get you really accurate information about that—something that’s currently being done with the advent of about:memory. But it’s also because raw byte counts aren’t necessarily helpful in debugging memory leaks in web applications: what’s really useful is information about what kinds of objects are staying in the page, which this new iteration of the memory tool tries to provide.

If you’re interested in learning how the tool works or hacking on the code, check out the wiki page and my Fun with SpiderMonkey blog post.

What I’m really interested in knowing is: do web developers find this useful? What could be added to it to make it more useful in diagnosing the memory use of a web application? If you’re a web developer, please download the addon, choose “Memory Profiler” from the “Tools” menu in Firefox, and let us know what you think!

17 Replies to “Web Application Memory Profiling, Take Two”

  1. Yep, I’ve actually been developing off mozilla-central and building the binaries for 3.5.

    However, the XPI only currently has binaries for 3.5, and I think the OS X binary for 3.6a2. I haven’t gotten around to pre-compiling binaries for Linux 32/64-bit and Windows on 3.6a2 yet, and m-c’s nsIXPConnect CID is unpredictable enough that I’m not bothering to build a precompiled binary for it. 😛

    If you want to build the component yourself, though, you’re welcome to. I’ve just updated the wiki page with pointers to instructions.

  2. This is an excellent tool and I’ve been looking for something of this sort for a while.

    I’m working on a fairly big jQuery powered app. It is becomming increasingly difficult to track object references and I’ve been beginning to worry that objects aren’t being garbage collected at the right points, so this does help to visualise things.

    It would be cool if you could find a way to guess names for objects (instead of listing their properties, which is confusing for similar objects).

  3. This tool really goes in the right direction and gives web developers a lot of data. It is very useful now, but there are three features I would request.

    1. An overall summary. Imagine I’m trying to performance tune my page. I make a few changes and want to quickly see if they helped or not. An overview would go a long way to help that.

    2. Filtering. Most profiling tools pick up a lot of data you don’t want. Some form of filtering really helps find the data you are looking for.

    3. Saving the data. If I’m profiling a page and trying to make it better I’ll probably do it over more than one session. It would be nice if I could save the data so I can compare it later. I could also use this mechanism to see if my 2.0 version takes more or less memory than my 1.0 version.

    Just a few suggestions. I hope they help.

    P.S. It would also be nice if there were a black on white view instead of the white on black. All that text on a black screen gets a little hard to read.

  4. Very nice, thanks.

    I agree with Zack’s comments: A summary, filtering and saving plus black text on white would be helpful.

    In addition, I would like a little bit of introspection. I notice that the function names link to the javascript code, which is nice since 90% of them are named “anonymous”.
    I would like the same capability for the object information – let me click on an object description and see the data.

    This helps with identification. In an application I am working on I have 232 “events/handle” and 191 “mouseover/mouseout”, but I don’t know which of my event handlers are most numerous, or if the mouseover handlers are counted twice.

    I also have 50,000 Array objects. In this case I know what they are, but in general arrays are used for a whole bunch of stuff and it would be nice to be able to look at the data to identify which of those uses are most frequent.

  5. Pingback: Techno barje
  6. Hi Atul, I am try to develop a firefox extension able to measuring memory occupation of the window object for each tab. For this purpose I try to use your binary component, this is the algorithm I’ve used:

    1) get the Window object from each tab;
    2) execute a breadth visit in the heap to get all
    the information about the children of the that window.

    for(i in uInfo.children)

    but I get too many object to visit.
    is this a right way to proceed?
    there is another way to analize the weight of a window object?

    scuse me for my english and thank you for your time

  7. Just to let you know. I like it a lot, but for some reason it will not profile a tab with gmail in it. I just click on the link to profile my active gmail tab and tens of minutes later there is still nothing showing.

  8. I’m in need of a memory analyzer for my web application. Is this addon available for firefox 3.6x??

  9. Hi, Atul.

    Thank you for your great work memory profiler. It helps me a lot tracing the object lifes and memory usage and finding the remaining reference of useless objects. Here I have two questions. I’m very appreciated if you could have time on them:
    1. As my understanding when I see an object (A) id appears in the children list of another one (B), does it alway mean B refers to A (like B.x = A)? or say A won’t be released before B is released?
    2. If I attach an Javascript object to a node in the HTML DOM and then clear all other references in Javascript, I will still see the object in “shapes” list, but it isn’t referred by any other object. Can we say if an object isn’t in any “children”,”prototype” or “parent”, it must be referred by a node in the HTML DOM? Is there any way we can know more infomation about references from HTML DOM?

    Thank you very much 😀

    Xiaoxing Wang

  10. Hey, here’s an update.

    The Github repository for the profiler addon contains the profiling JS that runs in a separate JSRuntime, but it also relies on a binary component called nsJetpack. The C++ source for nsJetpack was originally in the Add-on SDK repository, but it was moved out of there in late 2010. Here is a pointer to it before it was removed from the repository, though.

    I’m pretty sure that won’t compile against Firefox 4, but it could be useful.

    Sorry I can’t update it myself, but I’m currently working on other things and don’t have the time. 🙁

Comments are closed.