diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /devtools/docs/user/memory/tree_map_view | |
parent | Initial commit. (diff) | |
download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/docs/user/memory/tree_map_view')
-rw-r--r-- | devtools/docs/user/memory/tree_map_view/index.rst | 47 | ||||
-rw-r--r-- | devtools/docs/user/memory/tree_map_view/treemap-bbc.png | bin | 0 -> 48965 bytes | |||
-rw-r--r-- | devtools/docs/user/memory/tree_map_view/treemap-domnodes.png | bin | 0 -> 10998 bytes | |||
-rw-r--r-- | devtools/docs/user/memory/tree_map_view/treemap-monsters.png | bin | 0 -> 20713 bytes |
4 files changed, 47 insertions, 0 deletions
diff --git a/devtools/docs/user/memory/tree_map_view/index.rst b/devtools/docs/user/memory/tree_map_view/index.rst new file mode 100644 index 0000000000..3ab11d733b --- /dev/null +++ b/devtools/docs/user/memory/tree_map_view/index.rst @@ -0,0 +1,47 @@ +============= +Tree map view +============= + +The Tree map view is new in Firefox 48. + +The Tree map view provides a visual representation of the snapshot, that helps you quickly get an idea of which objects are using the most memory. + +A treemap displays `"hierarchical (tree-structured) data as a set of nested rectangles" <https://en.wikipedia.org/wiki/Treemapping>`_. The size of the rectangles corresponds to some quantitative aspect of the data. + +For the treemaps shown in the Memory tool, things on the heap are divided at the top level into four categories: + + +- **objects**: JavaScript and DOM objects, such as `Function <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function>`_, `Object <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object>`_, or `Array <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array>`_, and DOM types like `Window <https://developer.mozilla.org/en-US/docs/Web/API/Window>`_ and `HTMLDivElement <https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement>`_. +- **scripts**: JavaScript sources loaded by the page. +- **strings** +- **other**: this includes internal `SpiderMonkey <https://spidermonkey.dev/>`_ objects. + + +Each category is represented with a rectangle, and the size of the rectangle corresponds to the proportion of the heap occupied by items in that category. This means you can quickly get an idea of roughly what sorts of things allocated by your site are using the most memory. + +Within top-level categories: + + +- **objects** is further divided by the object's type. +- **scripts** is further subdivided by the script's origin. It also includes a separate rectangle for code that can't be correlated with a file, such as JIT-optimized code. +- **other** is further subdivided by the object's type. + + +Here are some example snapshots, as they appear in the Tree map view: + +.. image:: treemap-domnodes.png + :class: center + + +This treemap is from the :doc:`DOM allocation example <../dom_allocation_example/index>`, which runs a script that creates a large number of DOM nodes (200 `HTMLDivElement <https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement>`_ objects and 4000 `HTMLSpanElement <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement>`_ objects). You can see how almost all the heap usage is from the ``HTMLSpanElement`` objects that it creates. + +.. image:: treemap-monsters.png + :class: center + + +This treemap is from the :doc:`monster allocation example <../monster_example/index>`, which creates three arrays, each containing 5000 monsters, each monster having a randomly-generated name. You can see that most of the heap is occupied by the strings used for the monsters' names, and the objects used to contain the monsters' other attributes. + +.. image:: treemap-bbc.png + :class: center + +This treemap is from http://www.bbc.com/, and is probably more representative of real life than the examples. You can see the much larger proportion of the heap occupied by scripts, that are loaded from a large number of origins. diff --git a/devtools/docs/user/memory/tree_map_view/treemap-bbc.png b/devtools/docs/user/memory/tree_map_view/treemap-bbc.png Binary files differnew file mode 100644 index 0000000000..55552b8382 --- /dev/null +++ b/devtools/docs/user/memory/tree_map_view/treemap-bbc.png diff --git a/devtools/docs/user/memory/tree_map_view/treemap-domnodes.png b/devtools/docs/user/memory/tree_map_view/treemap-domnodes.png Binary files differnew file mode 100644 index 0000000000..1192e390da --- /dev/null +++ b/devtools/docs/user/memory/tree_map_view/treemap-domnodes.png diff --git a/devtools/docs/user/memory/tree_map_view/treemap-monsters.png b/devtools/docs/user/memory/tree_map_view/treemap-monsters.png Binary files differnew file mode 100644 index 0000000000..513adab923 --- /dev/null +++ b/devtools/docs/user/memory/tree_map_view/treemap-monsters.png |