Отладка утечек памяти DOM (тип профилирования "Отсоединенные элементы")

Используйте тип профилирования отсоединяемых элементов средства "Память", чтобы найти и отобразить все отсоединенные элементы на веб-странице. Сравнение средств для просмотра отсоединяемых элементов см. в статье Средства для исследования отсоединяемых элементов в статье Устранение проблем с памятью.

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

Анализ отсоединяемых элементов веб-страницы

Чтобы использовать тип профилирования отсоединяемых элементов для анализа отсоединяемых элементов веб-страницы:

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

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

   Откроется devTools.

3. В Средствах разработки на панели действий выберите Память (память).

   Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты ( и выберите Память. Откроется средство "Память ":

   

   Если кнопка "Отсоединенные элементы " не отображается, так как профиль уже отображается, в левом верхнем углу щелкните Профили ().

   На этом этапе не нужно нажимать кнопку Отсоединенные элементы , так как веб-страница еще не создает отсоединенные элементы.

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

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

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. В devTools в средстве памяти нажмите кнопку Отсоединенные элементы , а затем нажмите кнопку Пуск .

   Список отключенных узлов отображается в столбце Отсоединенные узлы созданного профиля отсоединяемых элементов :

   

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

8. Разверните узел DOM, чтобы отобразить его дочерние элементы (узлы DOM):

   

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

Если вы хотите вернуться к списку кнопок параметров для типов профилирования, в левом верхнем углу средства "Память " щелкните Профили ().

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

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

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

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

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

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

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

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

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

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

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

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

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

См. также

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