Просмотр дерева объектов памяти

Вид "Дерево объектов" (Карта объектов, Tree map view) даёт визуальное представление снимка памяти (snapshot), который поможет быстро определить, какие из объектов используют больше оперативной памяти.

Данный вид - это "иерархическое (древовидное) представление данных, представленное в виде набора вложенных прямоугольников". Размер прямоугольников соответствует некоторому относительному количественному представлению о данных.

В Дереве, показываемом в "Memory tool", объекты в куче (heap) разделены на четыре верхнеуровневых категории:

• objects (объекты): JavaScript и DOM-объекты, такие как Function, Object или Array, а также типы DOM, такие как Window и HTMLDivElement.
• scripts (скрипты): скрипты JavaScript, загруженные на страницу.
• strings (строки)
• other (другое): включает внутренние объекты SpiderMonkey.

Каждая категория представлена прямоугольником, размер каждого их которых пропорционален размеру занимаемой памяти объектами в "куче". Это значит, что вы можете быстро сообразить, какие виды объектов используют больше памяти.

Подкатегории верхнего уровня:

• objects - дополнительно делятся по типам объектов.
• scripts - дополнительно разделены по источнику происхождения. Также добавлены отдельные прямоугольники для кода, который не коррелирует с файлами, такие как  JIT-оптимизированный код.
• other - делится по типам объектов.

Вот несколько примеров снимков памяти (snapshots) в древовидном виде:

Это дерево создано по скрипту в начале страницы DOM allocation example, создающем большое число DOM-узлов (200 объектов HTMLDivElement и 4000 объектов HTMLSpanElement). Вы видите, как почти вся "куча" используется элементами HTMLSpanElement, которые уже создались.

Это дерево после выполнения скрипта со страницы monster allocation example, который создаёт три массива, каждый содержащий 5000 монстров (персонажей), каждый из которых имеет случайно-сгенерированное имя. Вы заметите, что большая часть "кучи" занята строками (strings), используемых для имён, и объектов, используемых для хранения других атрибутов монстров.

Это дерево со страницы https://www.bbc.com/, и, вероятно, является примером из жизни лучшим, чем предыдущие примеры. Вы видите, что большую часть занимают скрипты (scripts), которые загружены из множества разных источников.