Использование инструментирования выделения на временная шкала (тип профилирования "Выделение временная шкала")

В средстве "Память" используйте функцию Выделения на временная шкала типа профилирования, чтобы найти объекты, которые не собираются должным образом и сохраняют память.

Как работает инструментирование выделения в временная шкала

Выделение памятидля типа профилирования временная шкала объединяет подробные snapshot сведения профилировщика кучи с добавочным обновлением и отслеживанием средства производительности. Аналогичным образом отслеживание выделения кучи для объектов включает запуск записи, выполнение последовательности действий и остановку записи для анализа.

Выделение временная шкала периодически делает моментальные снимки кучи на протяжении всей записи (каждые 50 мс) и один последний snapshot в конце записи.

Номер после @ — это идентификатор объекта, который сохраняется в нескольких моментальных снимках, сделанных во время сеанса записи. Идентификатор постоянного объекта позволяет точно сравнивать состояния кучи. Объекты перемещаются во время сборки мусора, поэтому отображение адреса объекта не имеет смысла.

Включение инструментирования выделения на временной шкале

Чтобы начать использовать выделение на временная шкала, выполните приведенные далее действия.

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

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

   Откроется devTools.

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

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

   

4. Нажмите кнопку Выделения на временная шкала.

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

5. В нижней части средства "Память " нажмите кнопку Пуск .

6. Взаимодействие с веб-страницей; Например, нажмите кнопку Быстрый трафик , а затем кнопку Остановить на демонстрационной веб-странице. В зависимости от того, что вы пытаетесь проанализировать, можно обновить страницу, взаимодействовать со страницей или просто разрешить запуск страницы.

7. В левом верхнем углу средства "Память" нажмите кнопку Остановить профиль кучи записи (

   Новый моментальный снимок создается в разделе Временные шкалы выделения списка Профилей :

   

Запись выделения на временная шкала

В средстве "Память" используйте тип выделения временная шкала профилирования. Это одна из функций DevTools для отслеживания утечек памяти в куче JS.

С учетом следующего кода:

var x = [];
function grow() {
    x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);

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

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

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

2. Откройте DevTools и выберите средство "Память ".

3. Нажмите кнопку Выделения на временная шкала, а затем нажмите кнопку Пуск.

4. Выполните действие, которое, как вы подозреваете, вызывает утечку памяти.

5. По завершении нажмите кнопку Остановить запись кучи, чтобы .

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

   

   Эти синие полосы представляют собой новые выделения памяти. Эти новые выделения памяти являются вашими кандидатами на утечку памяти.

7. Увеличьте масштаб панели, чтобы отфильтровать область конструктора , чтобы отобразить только объекты, выделенные в течение указанного периода времени.

   

8. Разверните объект и выберите значение, чтобы просмотреть дополнительные сведения в области Объект .

   Например, в сведениях о вновь выделенном объекте указывается, что он был выделен переменной xWindow в область:

   

Чтение временная шкала выделения кучи

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

Высота каждой полосы соответствует размеру недавно выделенных объектов, а цвет отрезков указывает, являются ли эти объекты живыми в конечной куче snapshot. Синие полосы указывают на объекты, которые по-прежнему живут в конце временная шкала, серые — объекты, выделенные во время временная шкала, но с тех пор были собраны в мусор.

Вы можете использовать ползунки в временная шкала выше, чтобы увеличить масштаб конкретного snapshot и просмотреть объекты, которые были недавно выделены на этом этапе:

При щелчке определенного объекта в куче отображается дерево хранения в нижней части кучи snapshot. Изучение пути хранения к объекту должно дать достаточно информации, чтобы понять, почему объект не был собран, и внести необходимые изменения в код, чтобы удалить ненужную ссылку.

Просмотр выделения памяти по функциям

Выделение памяти можно просмотреть с помощью функции JavaScript. См. статью Ускорение выполнения JavaScript (тип профилирования "Выборка выделения").

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Меггин Кирни.

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