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

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

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

Дополнительные сведения о моментальных снимках кучи и отсоединяемых элементах см. в статье Обнаружение отсоединяемых утечек памяти дерева DOM с помощью моментальных снимков кучи.

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

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

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

Открытие инструмента "Отсоединенные элементы"

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

1. Откройте демонстрационное приложение "Отсоединенные элементы" в новом окне или вкладке.

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

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

   

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

Кнопка Получить отсоединенные элементы () в инструменте Отсоединенные элементы находит и отображает все отсоединенные элементы на веб-странице.

Чтобы найти отсоединенные элементы, выполните приведенные далее действия.

1. Убедитесь, что в демонстрационном приложении выбрана кнопка Комната 1 .

2. В демонстрационном приложении нажмите кнопку Быстрый трафик .

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

   

4. Нажмите кнопку Комната 2 :

5. В инструменте Отсоединенные элементы щелкните значок Получить отсоединенные элементы ().

   В инструменте "Отсоединенные элементы " отображаются все отсоединенные элементы страницы. При переключении в комнату 2 в демонстрационном приложении сообщения, созданные в комнате 1 , больше не присоединяются к модели DOM, но на них по-прежнему ссылается JavaScript:

   

Запуск сборки мусора

Затем активируйте сборку мусора (GC) в браузере:

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

2. Щелкните значок Получить отсоединенные элементы ().

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

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

После того как вы найдете отсоединяемый элемент, который не может быть собран мусором, можно использовать кнопку Анализ () в инструменте Отсоединенные элементы , чтобы определить код JavaScript, выполняемый на странице, которая по-прежнему ссылается на отсоединяемый элемент. Кнопка Анализ создает моментальный снимок кучи и заполняет идентификатор отсоединенного элемента его расположением в куче.

Дополнительные сведения о моментальных снимках кучи см. в статье Запись моментальных снимков кучи с помощью средства "Память".

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

1. В инструменте Отсоединенные элементы щелкните значок Анализ ().

   Средство "Память " откроется на панели инструментов быстрого просмотра в нижней части devTools:

   

2. В инструменте Отсоединенные элементы выберите поле Идентификатор отсоединяемого элемента.

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

   

3. В средстве память выберите ссылку room.js:13.

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

4. hide() В функции room.jsкод JavaScript демонстрационного приложения добавляет каждое сообщение в комнате в unmounted массив. Массив unmounted — это объект, ссылающийся на отсоединяемый элемент:

   

Теперь вы определили средство хранения, которое предотвращает сбор мусора отсоединяемым элементом браузером!

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

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

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

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

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

   Родительские и дочерние связи удаляются внутри отсоединяемого дерева:

   

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

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

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

   

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

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

Дополнительные сведения

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

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

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

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

Это демонстрационная версия приложения и его утечки являются искусственными. Протестируйте средство "Отсоединенные элементы" на рабочем веб-сайте или в приложении. Если вы обнаружите потенциальные проблемы со средством "Отсоединенные элементы", обратитесь к команде Microsoft Edge DevTools , чтобы отправить отзыв об отладке средства "Отсоединенные элементы" и об отладке утечки памяти.