{"id":828,"date":"2012-02-04T21:25:52","date_gmt":"2012-02-05T05:25:52","guid":{"rendered":"http:\/\/www.visophyte.org\/blog\/?p=828"},"modified":"2012-02-13T12:06:12","modified_gmt":"2012-02-13T20:06:12","slug":"aboutnosy-is-aboutmemory-with-charts-helps-you-lay-blame-more-easily","status":"publish","type":"post","link":"https:\/\/www.visophyte.org\/blog\/2012\/02\/04\/aboutnosy-is-aboutmemory-with-charts-helps-you-lay-blame-more-easily\/","title":{"rendered":"about:nosy is about:memory with charts, helps you lay blame more easily"},"content":{"rendered":"<p>about:memory and the memory reporter infrastructure that powers it are amazing.\u00a0 They provide an explicit hierarchy that breaks down the memory use in the system to the subsystems and increasingly the causes of allocation.\u00a0 about:memory looks like this (if you stand a few feet back from your monitor and take off your glasses):<\/p>\n<p><a href=\"http:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-memory-example.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-829\" title=\"Example (non-verbose) about:memory session\" src=\"http:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-memory-example-225x300.png\" alt=\"\" width=\"225\" height=\"300\" srcset=\"https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-memory-example-225x300.png 225w, https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-memory-example-450x600.png 450w, https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-memory-example.png 695w\" sizes=\"auto, (max-width: 225px) 100vw, 225px\" \/><\/a><\/p>\n<p>If you are going to look at about:memory, it is probably for one of two reasons:<\/p>\n<ol>\n<li>You are <a href=\"http:\/\/blog.mozilla.com\/nnethercote\/\">Nicholas Nethercote<\/a> or one of his merry band of <a href=\"https:\/\/wiki.mozilla.org\/Performance\/MemShrink\">MemShrink<\/a> hackers kicking ass and taking names (of inefficient uses of memory).\u00a0 In this case, about:memory is exactly what you need.<\/li>\n<li>You suspect some tab in Firefox has gone crazy and you want to figure out which one it is and take your vengeance upon it.\u00a0 Vengeance can take the form of thinking mean thoughts, closing the tab, or writing a snarky tweet.\u00a0 about:memory will let you do this, but you have to look at a lot of text and you may already be too late to find the culprit!\u00a0 If only there was an easier way&#8230;<\/li>\n<\/ol>\n<p>Enter about:nosy:<\/p>\n<p><a href=\"http:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-tabs-cnn.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-832\" title=\"about:nosy showing three tabs open from cnn.com\" src=\"http:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-tabs-cnn-600x104.png\" alt=\"\" width=\"600\" height=\"104\" srcset=\"https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-tabs-cnn-600x104.png 600w, https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-tabs-cnn-300x52.png 300w, https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-tabs-cnn.png 810w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>It can show us a list of all the open tabs and their memory usage <strong>sans JS<\/strong> for now, as per the above screenshot.\u00a0 If you expand the tab capsules, you get to see the list of all the inner windows\/iframes that live in the hierarchy of that page.\u00a0 In most cases the list is either really short and boring or really long and boring.\u00a0 In the case of www.cnn.com I end up with 26 inner windows.<\/p>\n<p><a href=\"http:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-origin-cnn.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-833\" title=\"about:nosy expanded origin capsule for www.cnn.com\" src=\"http:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-origin-cnn-600x193.png\" alt=\"\" width=\"600\" height=\"193\" srcset=\"https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-origin-cnn-600x193.png 600w, https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-origin-cnn-300x96.png 300w, https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-origin-cnn.png 823w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>It can also show us memory aggregated by origin.\u00a0 We do show JS for this case because JS is currently only trackable on a per-origin basis.\u00a0 When <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=650353\">Bug 650353<\/a> gets fixed or the memory reporters get more specific we should be able to apportion JS usage to pages directly.<\/p>\n<p><a href=\"http:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-exts.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-834\" title=\"about:nosy extensions display\" src=\"http:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-exts-600x123.png\" alt=\"\" width=\"600\" height=\"123\" srcset=\"https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-exts-600x123.png 600w, https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-exts-300x61.png 300w, https:\/\/www.visophyte.org\/blog\/wp-content\/uploads\/2012\/02\/about-nosy-exts.png 830w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>It also attempts to aggregate extension JS compartments back to their owning extension.\u00a0 We ask the add-on manager for a list of the installed extensions to find their filesystem roots, ask the resource protocol to explain resource mappings, and from there are able to translate such paths.\u00a0 Just keep in mind that traditional overlay-based extensions do not create their own compartments and so are invisible for tracking purposes.<\/p>\n<p>In the screenshot above, you can see that about:nosy keeps the charts exciting by generating a ridiculous amount of garbage all by itself.\u00a0 Much of this is just the about:memory tree-building code that we are reusing.\u00a0 If you refreshed about:memory once a second you would probably see similar garbage creation from the main system JS compartment.<\/p>\n<p>You can install a <a href=\"https:\/\/clicky.visophyte.org\/files\/labs\/about-nosy\/about-nosy-0.3.xpi\">restartless XPI<\/a> (<strong>update:<\/strong> points at 0.3 now which does not screw up style shell apportionment and uses a better add-on SDK that does not create throwaway JS compartments every second) of the state of the now that will not auto-update.\u00a0 It wants a recent <a href=\"http:\/\/nightly.mozilla.org\/\">nightly build of Firefox<\/a> because it makes assumptions about the structure of the memory reporters in order to better serve you.<\/p>\n<p>You can find the <a href=\"https:\/\/github.com\/asutherland\/about-nosy\/\">source repo on github<\/a>.\u00a0 It requires the <a href=\"https:\/\/github.com\/mozilla\/addon-sdk\/\">add-on SDK<\/a> to build.\u00a0 It might seem a little overkill for just graphing memory history, but if you&#8217;re looking at the repo you will notice my goal is to use <a href=\"http:\/\/www.cs.washington.edu\/homes\/burg\/\">Brian Burg<\/a>&#8216;s <a href=\"http:\/\/brrian.tumblr.com\/post\/10571624125\/jsprobes\">jsprobes work<\/a> <a href=\"http:\/\/blog.mozilla.com\/sfink\/2011\/09\/21\/js-probes\/\">aided by Steve Fink<\/a> and now <a href=\"https:\/\/bitbucket.org\/asuth\/jsprobes-patches\">de-bitrotted by me<\/a> (but still a bit crashy) to be able to graph CPU usage, including raw JS, layout\/reflow, and paint (eventually, after adding probe points).\u00a0 It&#8217;s also possible for those statistics to be gathered via static mechanisms, but the probes are fun and I want to see them work.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>about:memory and the memory reporter infrastructure that powers it are amazing.\u00a0 They provide an explicit hierarchy that breaks down the memory use in the system to the subsystems and increasingly the causes of allocation.\u00a0 about:memory looks like this (if you &hellip; <a href=\"https:\/\/www.visophyte.org\/blog\/2012\/02\/04\/aboutnosy-is-aboutmemory-with-charts-helps-you-lay-blame-more-easily\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[16,3,8,13,4],"tags":[111,110,112],"class_list":["post-828","post","type-post","status-publish","format-standard","hentry","category-clicky","category-mozilla","category-program-execution","category-shiny","category-visualizing","tag-aboutmemory","tag-aboutnosy","tag-memory-reporters"],"_links":{"self":[{"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/posts\/828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/comments?post=828"}],"version-history":[{"count":9,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/posts\/828\/revisions"}],"predecessor-version":[{"id":840,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/posts\/828\/revisions\/840"}],"wp:attachment":[{"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/media?parent=828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/categories?post=828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.visophyte.org\/blog\/wp-json\/wp\/v2\/tags?post=828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}