Попытка разобраться с профилировщиком кучи в инструментах разработчика Chrome. Я вижу несколько достижимых объектов в снимке, некоторые из них имеют желтый фон, а некоторые нет. Что это значит? Какая разница?
В этом случае цветовая легенда не совсем полезна, так как она имеет желтый фон (wtf).
Хорошо, получается желтый фон означает, что объект, у которого он есть, имеет на нем JavaScript-дескриптор, или, так сказать, доступен из JavaScript, а объект без фона (или белого) недоступен из JavaScript, но может все еще достигнуты из корня графика.
Самый интересный, хотя кажется, объект с красным фоном. Красный фон означает, что объект, который имеет его, является частью отдельного дерева DOM. Таким образом, это в основном элемент DOM, который недоступен из корневого node, но ссылается на какой-то другой объект, который на нем оказывается доступным из JavaScript (имеет желтый фон, который есть).
Короткая цитата из отличная запись Адди Османи:
В: Я заметил несколько узлов DOM в снимке кучи, где некоторые из них выделено красным цветом и обозначено как "Отдельное дерево DOM" в то время как другие - желтые. Что это значит?
Вы увидите узлы нескольких разных цветов. У красных узлов нет прямые ссылки на JavaScript из них, но живы, потому что они являются частью отдельного дерева DOM. В дереве может быть nodeссылается на JavaScript (возможно, на закрытие или переменную), но по совпадению, препятствуя тому, чтобы все дерево DOM было мусором собраны.
Однако желтые узлы имеют прямые ссылки на JavaScript. Искать желтые узлы в одном отдельном дереве DOM для поиска ссылок из ваш JavaScript. Должна существовать цепочка свойств, ведущая из Окно DOM для элемента (например, window.foo.bar [2].baz).