Что означают цвета для отдельных узлов DOM в Chrome Heap Profiler?

При анализе снимков кучи с помощью Chrome devtools я не могу понять, что означают цвета при просмотре отдельных деревьев DOM. В чем разница между красным и желтым?

enter image description here

Ответы

Ответ 1

Здесь есть хорошее объяснение .

Из статьи:

У красных узлов нет прямых ссылок с JavaScript на них, но живы, потому что они являются частью отдельного дерева DOM. Может быть node в дереве, на который ссылается JavaScript (возможно, как закрытие или переменная), но по совпадению предотвращает все дерево DOM будучи собранным мусором.

Однако желтые узлы имеют прямые ссылки на JavaScript. Ищите желтые узлы в том же отдельном DOM, чтобы найти ссылки на ваш JavaScript. Должно быть цепочку свойств, ведущую из окна DOM к элементу (например, window.foo.bar [2].baz).

Ответ 2

Я не нашел окончательного ответа, но это кажется последовательным:

Красный фон указывает на отдельный DOM node, на который ссылается переменная в закрытии.

Желтый фон указывает на отдельный DOM node, на который ссылаются свойство объекта или элемент массива.