Устранение проблем с памятью

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

• Диспетчер задач браузера Microsoft Edge.
• Флажок Память средства производительности.
• Различные типы профилирования средства "Память ".

Средства для исследования использования памяти

Средство "Память"

Main инструментом для исследования проблем с памятью является средство "Память":

Профиль отсоединяемых элементов в средстве "Память ":

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

Общие сведения об устранении проблем с памятью

В духе модели производительности RAIL основное внимание должно уделяться вашим пользователям.

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

• Со временем производительность страницы постепенно ухудшается. Возможно, это является симптомом утечки памяти. Утечка памяти — это когда ошибка на странице приводит к тому, что страница постепенно использует все больше памяти с течением времени.

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

• Производительность страницы задерживается или часто приостанавливается. Возможно, это симптом частой сборки мусора. Сборка мусора — это когда браузер освобождает память. Браузер решает, когда это произойдет. Во время коллекций все выполняемые скрипты приостанавливаются. Таким образом, если браузер собирает много мусора, среда выполнения скрипта будет приостановлена.

Раздутие памяти: сколько "слишком много"?

Утечку памяти легко определить. Если сайт постепенно использует все больше и больше памяти, значит, у вас есть утечка. Но раздутие памяти немного сложнее закрепить. Что квалифисируется как "использование слишком большого объема памяти"?

Здесь нет жестких чисел, так как разные устройства и браузеры имеют разные возможности. Та же страница, которая работает гладко на высококлассном смартфоне может разрезаться на низом смартфоне.

Здесь важно использовать модель RAIL и сосредоточиться на пользователях. Узнайте, какие устройства популярны среди пользователей, а затем протестируйте страницу на этих устройствах. Если взаимодействие постоянно плохое, страница может превысить возможности памяти этих устройств.

Обнаружить частые сборки мусора (диспетчер задач браузера Microsoft Edge, флажок "Память" средства производительности)

Если страница часто приостанавливается, могут возникнуть проблемы со сборкой мусора. Для выявления частой сборки мусора можно использовать один из следующих способов:

• Диспетчер задач браузера Microsoft Edge. Часто увеличивающиеся и падающие значения памяти или памяти JavaScript представляют собой частую сборку мусора. См. раздел Мониторинг использования памяти в режиме реального времени (диспетчер задач браузера Microsoft Edge).

• Флажок Память средства производительности. В записях памяти производительности частые изменения (увеличение и падение) в диаграммах кучи JS или числа узлов указывают на частую сборку мусора. См . раздел Просмотр метрик памяти в справочнике по функциям производительности.

После того как вы определили проблему с помощью любого из этих средств, вы можете использовать выделение памятидля временная шкала типа профилирования, чтобы узнать, где выделяется память и какие функции вызывают выделение. См. раздел Использование инструментирования выделения для временная шкала (тип профилирования "Выделение временная шкала").

Поиск утечек памяти дерева DOM из отсоединяемых элементов

Узел DOM собирается браузером только в том случае, если нет ссылок на узел из дерева DOM или кода JavaScript, выполняемого на странице. При удалении из дерева DOM узел считается "отсоединяется", но некоторые javaScript по-прежнему ссылаются на него. Отсоединяемые узлы DOM являются распространенной причиной утечек памяти.

Средства для исследования отсоединяемых элементов

См. также

• Использование инструментирования выделения на временная шкала (тип профилирования "Выделение временная шкала")
• Отладка утечек памяти DOM с помощью инструмента "Отсоединенные элементы"
• Запись моментальных снимков кучи с помощью средства "Память" (тип профилирования "Куча snapshot")

Внешний:

• Поиск и отладка утечек памяти в JavaScript с помощью Chrome DevTools ( Gonzalo Ruiz de Villa), которая также относится к Microsoft Edge DevTools.

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.