问题
I noticed something odd in the Memory inspector of both Chrome and Firefox. On a large page, it will tell you how much various JavaScript objects take up, but doesn't seem to list any image/multimedia objects. In fact, in this screenshot taking from the Profiles panel in Chrome's DevTools you can see most of the memory isn't in what it reported.
(You can see this even on this page, going to Profiles -> Take Heap Snapshot, selecting Statistics from the top dropdown.)
Is there a more proper way to see how much memory is used by objects? Especially in Firefox - I ask because I had recently noticed a JavaScript profile and garbage collection took a very long time during page load.
回答1:
In Firefox press Ctrl+Shift+I to open the Developer Tools. Select the Memory tab. Check or select the available options, for example, Record allocation stacks, View: Dominators, Label by: Type. Click Take snapshot and scroll to review the Retained Size (Bytes), the Shallow Size (Bytes) and the Label of objects.
See also How to detect the memory allocations that are triggering garbage collection in JavaScript? , Clean-up of elements that are no longer referenced, and were never added to the document
回答2:
In Firefox there are two ways to measure the memory used by a page. One is described in guest271314's answer, which shows the memory usage in tree structures or as a visualized tree map. The other one is about:memory:
- Go to about:memory.
- Click the Measure button.
- In the displayed tree structure find the entry related to your page under
window-objects, which looks liketop(<URL of your website>, id=<some ID>)(depending on the size of your page it may be listed under a sub entry(<number of small websites> tiny).
The number in MB besides the entry is the size of the page in memory.
来源：https://stackoverflow.com/questions/40231122/where-can-i-find-the-real-memory-use-of-a-page-including-images-and-multimedia