Отладка утечек памяти DOM с помощью инструмента "Отсоединенные элементы"

Средство "Отсоединенные элементы " — это один из способов поиска и отображения всех отсоединяемых элементов на веб-странице. Дополнительные способы оценки утечек памяти см. в статье Средства для исследования отсоединяемых элементов в статье Устранение проблем с памятью.

Важно!

Средство "Отсоединенные элементы" устарело. Начиная с Microsoft Edge 130, средство "Отсоединенные элементы" содержит сообщение о том, что средство устарело; Вместо этого в средстве память на начальном экране Выбор типа профилирования нажмите кнопку Отсоединенные элементы . Функция EdgeDOMMemory.getDetachedNodesIds протокола Chrome DevTools (CDP) только для Edge продолжает работать, но вместо этого используется DOM.getDetachedDomNodes .

В Microsoft Edge 133 средство "Отсоединенные элементы" будет удалено; Вместо этого в средстве память на начальном экране Выбор типа профилирования нажмите кнопку Отсоединенные элементы . Функция EdgeDOMMemory.getDetachedNodesIds CDP будет удалена; вместо нее используйте DOM.getDetachedDomNodes .

Чтобы повысить производительность веб-страницы, найдите элементы, отсоединенные от дерева DOM и на которые вы не ожидали по-прежнему ссылаться в коде JavaScript. Найдите отсоединенные элементы, которые браузер не может собрать из мусора, так как код по-прежнему ссылается на них, а затем отпустите ссылки кода JavaScript на отсоединенные элементы.

Средство "Отсоединенные элементы ", отображающее средства хранения в средстве "Память ", со ссылками для открытия кода JavaScript в средстве "Источники ":

Видео: Отладка утечек памяти с помощью средства "Отсоединенные элементы" в Microsoft Edge

Стратегия устранения утечек памяти с помощью инструмента "Отсоединенные элементы"

1. Откройте веб-страницу для анализа.
2. Откройте инструмент "Отсоединенные элементы ".
3. Запустите сборку мусора, удалив все узлы, на которые больше не ссылается объект JavaScript.
4. Получение всех отсоединяемых элементов, которые не удалось собрать мусор.
5. Проанализируйте конкретный отсоединяемый элемент и его JavaScript, чтобы определить виновного узла в отсоединяемом дереве, которое вызывает сохранение всего дерева.

Получение отсоединяемых элементов и анализ JavaScript отсоединяемого элемента

Чтобы проанализировать отсоединенные элементы с помощью демонстрационной веб-страницы отсоединенные элементы , выполните следующие действия:

1. Откройте демонстрационную веб-страницу "Отсоединенные элементы" в новом окне или вкладке.

   Кнопка Комната 1 изначально выбрана. В коде JavaScript демонстрационной веб-страницы экземпляр Room класса используется для управления сообщениями в комнате 1.

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS).

   Откроется devTools.

3. В средствах разработки на панели действий выберите вкладку Отсоединенные элементы (). Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (") или сделайте средства разработки шире. Откроется средство "Отсоединенные элементы ":

   

   Создайте сообщения, которые будут храниться экземпляром JavaScript класса Room:

4. На демонстрационной веб-странице нажмите кнопку Быстрый трафик .

   Демонстрационная веб-страница начинает создавать сообщения и отображать их на веб-странице:

   

5. После отображения некоторых сообщений нажмите кнопку Остановить на демонстрационной веб-странице.

   Каждое сообщение является элементом <div class="message"> , на который ссылается экземпляр Room Класса Room 1. В дереве DOM веб-страницы нет отсоединяемых элементов, так как все элементы сообщения присоединяются к настоящему экземпляру класса Room 1.

   Измените на другой экземпляр класса Room, чтобы элементы стали отсоединяться:

6. На демонстрационной веб-странице нажмите кнопку Комната 2 , которая соответствует другому экземпляру Room класса .

   На веб-странице сообщения исчезают:

   

   Сообщения, созданные для экземпляра Room 1 класса Room (<div class="message"> элементы), больше не присоединяются к DOM, но на них по-прежнему ссылается экземпляр Room 1 класса Room . Они являются отсоединяемыми элементами, которые могут привести к утечке памяти, если они не будут использоваться снова веб-страницей.

   Получите список отсоединяемых элементов:

7. В средствах разработки в инструменте "Отсоединенные элементы " щелкните значок Сбор мусора (.

   Браузер запускает сборку мусора, удаляя все узлы, на которые больше не ссылается объект JavaScript.

8. В инструменте Отсоединенные элементы нажмите кнопку Получить отсоединенные элементы ().

   Отсоединенные элементы DOM, которые не могут быть собраны с помощью мусора, отображаются:

   

   Эти отсоединенные элементы являются утечками памяти, если они не будут использоваться повторно приложением.

   Определите код JavaScript, который ссылается на конкретный отсоединяемый элемент:

9. В инструменте "Отсоединенные элементы " нажмите кнопку Анализ ().

   Краткое сообщение отображается в нижней части инструмента "Отсоединенные элементы", "Принимая кучу памяти snapshot...", а затем сообщение Все готово. Средство "Память " откроется на панели Быстрого просмотра в нижней части devTools:

   

   Если в средстве "Память" вместо пользовательского интерфейса "Сводка" и "Средства хранения" отображаются кнопки "Тип профилирования", нажмите кнопку Анализ (") еще раз.

10. В инструменте Отсоединенные элементы в столбце Идентификатор дважды щелкните идентификатор, например @21299 или @21783.

    Это уникальный идентификатор одного из <div class="message"> элементов в куче памяти snapshot. Средство "Память " отображает средства хранения на вкладке Средства хранения :

    

    Средство "Память " автоматически выбирает объект в куче, ссылающийся на отсоединяемый элемент. Такой объект называется хранителем.

11. На вкладке Средства хранения в вложенной записи хранителя об unmounted элементе, например отключенном в Room @54011, щелкните ссылку room.js:13.

    Средство "Источники" откроется на панели действий и отображает строку 13 файла room.js ( Room конструктор):

    

    unmounted — это член массива класса , определенный Room в строке 19 в конструкторе: this.unmounted = [];.

12. Прокрутите hide вниз до строки 49 this.unmounted.push(el); в методе Room класса :

    

    Код добавляет каждое сообщение в комнате в unmounted массив. Массив unmounted — это объект, ссылающийся на отсоединяемый элемент.

В коде JavaScript вы определили объект хранителя ( unmounted массив), который предотвращает сбор отсоединяемого элемента браузером.

Вы нашли отсоединенные элементы, которые браузер не может собирать мусор, и обнаружили объект JavaScript, который по-прежнему ссылается на отсоединяемый элемент. Затем можно изменить код JavaScript, чтобы освободить элемент, чтобы уменьшить количество отсоединяемых элементов на веб-странице, повышая производительность веб-страницы и скорость реагирования.

Определение узла DOM, который вызывает сохранение других узлов DOM

Так как DOM является полностью подключенным графом, если один узел DOM сохраняется в памяти с помощью JavaScript, это может привести к тому, что другие узлы DOM будут сохранены вместе с ним.

Чтобы определить виновник узла в отсоединяемом дереве, которое вызывает сохранение всего дерева, выполните следующие действия:

1. Щелкните значок Отсоединить элементы (), чтобы уничтожить ссылки "родители-потомки" внутри отсоединяемого дерева.

2. Щелкните значок Сбор мусора (.

   Родительские и дочерние связи удаляются внутри отсоединяемого дерева, а оставшийся элемент является узлом DOM, который вызвал сохранение других узлов DOM:

   

Изменение выбранного целевого объекта на другой источник

Чтобы проверка для отсоединяемых элементов из разных источников или кадров с помощью раскрывающегося списка Выбранный целевой объект:

1. Щелкните раскрывающийся список Выбранный целевой объект :

   

2. Выберите другой источник.

Новый источник отображается в инструменте "Отсоединенные элементы ".

Сведения об отсоединяемых элементах и утечках памяти

Отсоединенные элементы не всегда указывают на утечку памяти, а утечки памяти не всегда вызываются отсоединяемыми элементами. Утечки памяти зависят от контекста приложения.

Утечка памяти может произойти в приложении, если элемент больше не присоединен к дереву модели DOM, но по-прежнему ссылается на некоторые javaScript, запущенные на веб-странице. Эти элементы называются отсоединяемые элементы. Чтобы браузер собирал мусор (GC) отсоединяемый элемент, на элемент не следует ссылаться из дерева DOM или кода JavaScript.

Проблемы с памятью влияют на производительность веб-страницы, включая утечки памяти, раздутие памяти и частые сборки мусора. Ниже перечислены симптомы для пользователей.

• Производительность веб-страницы постепенно ухудшается с течением времени.
• Производительность веб-страницы постоянно плоха.
• Производительность веб-страницы задерживается или часто приостанавливается.

Запустите GC перед получением отсоединяемых элементов, чтобы отобразить только элементы, которые не могут быть GC'd

Чтобы отобразить только те элементы, которые отсоединяются от дерева DOM и которые не могут быть собраны с помощью мусора, сначала всегда нажмите кнопку Собрать мусор , а затем — Получить отсоединенные элементы.

Несмотря на то, что некоторые элементы могут отображаться как отсоединенные в определенный момент времени, вы не узнаете, действительно ли на них по-прежнему ссылаются код JavaScript на веб-странице, пока не будет запущена сборка мусора. При переключении между комнатами чата в демонстрационном приложении веб-страница удаляет элементы, используемые для отображения сообщений из модели DOM. Но при переключении на другой экземпляр Room класса эти элементы не удаляются полностью, и ссылки на эти элементы по-прежнему существуют, поэтому эти элементы остаются в памяти.

Повторное присоединение элементов

На демонстрационной веб-странице "Отсоединенные элементы" имеет смысл сохранить список сообщений чата, чтобы, если пользователь переключился обратно в комнату 1, журнал сообщений сохранялся. Аналогичным образом веб-канал в социальных сетях может отсоединять элементы, когда пользователи прокручивают мимо них, и повторно подключить их к DOM при прокрутке пользователей вверх.

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

Отсоединение узлов DOM является полезным подходом, если в конечном итоге вы повторно используете эти отсоединенные элементы (или удаляете их). Значение инструмента "Отсоединенные элементы" заключается в том, что при подозрении на утечку памяти вы можете проверка, сообщается ли о нем все большее число непредвиденных отсоединяемых элементов DOM.

Длительные приложения и отключаемые компоненты

Не забудьте отключить компоненты. Для длительных приложений небольшая утечка памяти всего в несколько килобайт может со временем заметно снизить производительность. Для веб-страниц, использующих платформу React, React поддерживает виртуализированную копию модели DOM. Сбой правильного отключения компонентов может привести к утечке приложения больших частей виртуальной модели DOM.

Как сообщать о проблемах

Если вы обнаружите проблемы с работой функции Отсоединенные элементы , обратитесь к команде Средств разработки Microsoft Edge , чтобы отправить отзыв об отладке функции отсоединяемых элементов и об отладке утечки памяти.

См. также

• Средства для исследования отсоединяемых элементов в статье Устранение проблем с памятью — сравнение средств для просмотра отсоединяемых элементов.

Демонстрация:

• Веб-страница демонстрации "Отсоединенные элементы"
• Папка репозитория отсоединяемых элементов MicrosoftEdge/Demos > — исходный код.