Устранение проблем с памятью
Чтобы найти проблемы с памятью, влияющие на производительность страницы, включая утечку памяти, раздутие памяти и частые сборки мусора, используйте следующие средства:
- Диспетчер задач браузера Microsoft Edge.
- Флажок Память средства производительности.
- Различные типы профилирования средства "Память ".
Средства для исследования использования памяти
| Вариант использования | Инструмент | Статья |
|---|---|---|
| Отслеживайте объем памяти, используемой веб-страницей, в режиме реального времени. | Диспетчер задач браузера Microsoft Edge | Мониторинг использования памяти в режиме реального времени (диспетчер задач браузера Microsoft Edge) |
| Визуализация использования памяти веб-страницы в течение определенного периода времени. | Флажок"Память" средства > производительности | Визуализация утечек памяти (средство производительности: флажок память) в справочнике по функциям производительности. |
| Обнаруживайте частые сборки мусора. | Диспетчер задач браузера Microsoft Edge или флажок Память средства >производительности | Выявляйте частые сборки мусора (диспетчер задач браузера Microsoft Edge, флажок "Память" средства производительности) ниже. |
| Проверьте содержимое памяти, используемой веб-страницей. | Snapshot кучи средства >памяти | Запись моментальных снимков кучи с помощью средства "Память" (тип профилирования "Куча snapshot") |
| Узнайте, какие объекты JavaScript создаются за определенное время, чтобы изолировать утечки памяти. | Выделение средств> памяти в временная шкала | Использование инструментирования выделения на временная шкала (тип профилирования "Выделение временная шкала") |
| Узнайте, какие функции JavaScript выделяют память в течение определенного периода времени. Этот тип профиля имеет минимальные издержки на производительность и может использоваться для длительных операций. | Выборка выделения средств >памяти | Ускорение среды выполнения JavaScript (тип профилирования "Выборка выделения") |
| Поиск утечек памяти дерева DOM. | Отсоединенные элементы средства >памяти | Отладка утечек памяти DOM (тип профилирования "Отсоединенные элементы") |
Средство "Память"
Main инструментом для исследования проблем с памятью является средство "Память":
Профиль отсоединяемых элементов в средстве "Память ":
Чтобы вернуться к списку кнопок параметров для типов профилирования, в левом верхнем углу средства "Память" щелкните Профили (
).
Общие сведения об устранении проблем с памятью
В духе модели производительности RAIL основное внимание должно уделяться вашим пользователям.
Проблемы с памятью важны, так как они часто могут восприниматься пользователями. Пользователи могут воспринимать проблемы с памятью следующими способами:
Со временем производительность страницы постепенно ухудшается. Возможно, это является симптомом утечки памяти. Утечка памяти — это когда ошибка на странице приводит к тому, что страница постепенно использует все больше памяти с течением времени.
Производительность страницы постоянно плоха. Возможно, это симптом раздутого объема памяти. Раздутие памяти — это когда страница использует больше памяти, чем необходимо для оптимальной скорости страницы.
Производительность страницы задерживается или часто приостанавливается. Возможно, это симптом частой сборки мусора. Сборка мусора — это когда браузер освобождает память. Браузер решает, когда это произойдет. Во время коллекций все выполняемые скрипты приостанавливаются. Таким образом, если браузер собирает много мусора, среда выполнения скрипта будет приостановлена.
Раздутие памяти: сколько "слишком много"?
Утечку памяти легко определить. Если сайт постепенно использует все больше и больше памяти, значит, у вас есть утечка. Но раздутие памяти немного сложнее закрепить. Что квалифисируется как "использование слишком большого объема памяти"?
Здесь нет жестких чисел, так как разные устройства и браузеры имеют разные возможности. Та же страница, которая работает гладко на высококлассном смартфоне может разрезаться на низом смартфоне.
Здесь важно использовать модель RAIL и сосредоточиться на пользователях. Узнайте, какие устройства популярны среди пользователей, а затем протестируйте страницу на этих устройствах. Если взаимодействие постоянно плохое, страница может превысить возможности памяти этих устройств.
Обнаружить частые сборки мусора (диспетчер задач браузера Microsoft Edge, флажок "Память" средства производительности)
Если страница часто приостанавливается, могут возникнуть проблемы со сборкой мусора. Для выявления частой сборки мусора можно использовать один из следующих способов:
Диспетчер задач браузера Microsoft Edge. Часто увеличивающиеся и падающие значения памяти или памяти JavaScript представляют собой частую сборку мусора. См. раздел Мониторинг использования памяти в режиме реального времени (диспетчер задач браузера Microsoft Edge).
Флажок Память средства производительности. В записях памяти производительности частые изменения (увеличение и падение) в диаграммах кучи JS или числа узлов указывают на частую сборку мусора. См . раздел Просмотр метрик памяти в справочнике по функциям производительности.
После того как вы определили проблему с помощью любого из этих средств, вы можете использовать выделение памятидля временная шкала типа профилирования, чтобы узнать, где выделяется память и какие функции вызывают выделение. См. раздел Использование инструментирования выделения для временная шкала (тип профилирования "Выделение временная шкала").
Поиск утечек памяти дерева DOM из отсоединяемых элементов
Узел DOM собирается браузером только в том случае, если нет ссылок на узел из дерева DOM или кода JavaScript, выполняемого на странице. При удалении из дерева DOM узел считается "отсоединяется", но некоторые javaScript по-прежнему ссылаются на него. Отсоединяемые узлы DOM являются распространенной причиной утечек памяти.
Средства для исследования отсоединяемых элементов
| Вариант использования | Инструмент | Статья |
|---|---|---|
| Показывать только отсоединенные элементы в виде узлов дерева DOM. | Тип профилирования отсоединяемых элементов средства >памяти | Отладка утечек памяти DOM (тип профилирования "Отсоединенные элементы") |
| Отображение всех объектов в памяти, отфильтрованных для отображения отсоединяемых элементов, со ссылками на исходный код JavaScript. | Кучи кучи памяти>snapshot тип > профилирования Отсоединяется | Поиск утечек памяти дерева DOM (тип > профилирования "Куча snapshot" Отсоединен) в разделе Запись моментальных снимков кучи с помощью средства памяти (тип профилирования "Куча snapshot"). |
| Показывать только отсоединенные элементы в виде узлов дерева DOM со ссылками на исходный код JavaScript. | Средство "Отсоединенные элементы " | Отладка утечек памяти DOM с помощью инструмента "Отсоединенные элементы" |
См. также
- Использование инструментирования выделения на временная шкала (тип профилирования "Выделение временная шкала")
- Отладка утечек памяти DOM с помощью инструмента "Отсоединенные элементы"
- Запись моментальных снимков кучи с помощью средства "Память" (тип профилирования "Куча snapshot")
Внешний:
- Поиск и отладка утечек памяти в JavaScript с помощью Chrome DevTools ( Gonzalo Ruiz de Villa), которая также относится к Microsoft Edge DevTools.
Примечание.
Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Кейс Баски.
Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.