Ускорение среды выполнения JavaScript (тип профилирования "Выборка выделения")
Чтобы определить дорогостоящие функции, используйте средство "Память ":
Запишите, какие именно функции были вызваны и сколько памяти требуется для каждой из них, с помощью выборки выделения в средстве "Память ".
Визуализируйте профили в виде диаграммы пламени.
Использование типа профилирования "Выборка выделения" для просмотра выделения памяти с помощью функции JavaScript
Если вы заметили jank (прерывания отрисовки) в JavaScript, соберите профиль выборки выделения памяти с помощью типа профилирования выборки выделения . Профиль выборки показывает, каким функциям выделено больше всего памяти.
Чтобы использовать тип профилирования выборки выделения для просмотра выделения памяти с помощью функции JavaScript, выполните следующие действия:
Откройте веб-страницу, например демонстрационную веб-страницу Отсоединенные элементы, в новом окне или вкладке.
Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.
Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.
В devTools на панели действий выберите
Память (память).
Если средство "Память " не отображается, нажмите кнопку Дополнительные инструменты (
") и выберите Память.Нажмите кнопку Выборка выделения .
Если кнопка Выборка выделения не отображается, так как профиль уже отображается, в левом верхнем углу щелкните Профили (
).В разделе Выбор экземпляра виртуальной машины JavaScript , если на странице есть рабочая роль, можно выбрать ее в качестве целевого объекта профилирования.
В нижней части средства "Память " нажмите кнопку Пуск .
Взаимодействие с веб-страницей. Например, нажмите кнопку Быстрый трафик , а затем кнопку Остановить на демонстрационной веб-странице.
В зависимости от того, что вы пытаетесь проанализировать, можно обновить страницу, взаимодействовать со страницей или просто разрешить запуск страницы.
В левом верхнем углу средства "Память" нажмите кнопку Остановить профилирование кучи (
Или в нижней части средства "Память " нажмите кнопку Остановить . Новый профиль будет добавлен в разделе Профили выборки на боковой панели Профили :
В профиле выборки показана разбивка распределения памяти по функциям. По умолчанию используется представление Heavy (снизу вверх). Вы можете переключиться в представление Диаграмма или Дерево (сверху вниз) в соответствии с разделом ниже.
Вы также можете использовать API консольных служебных программ для записи и группирования профилей из командной строки.
Изменение представления профиля выборки
Чтобы изменить порядок сортировки в профиле выборки выделения памяти, используйте раскрывающийся список Режим просмотра профиля, в котором изначально указано Значение Heavy (Bottom Up):
Элементы меню:
- Диаграмма — хронологическая диаграмма записи.
- Heavy (Bottom Up) — Списки вызываемые функции приложения в порядке выделения памяти и показывает путь вызова для каждой функции. Представление по умолчанию.
- Дерево (сверху вниз) — показывает структуру вызова, начиная с верхней части стека вызовов.
Диаграмма
В режиме представления диаграммы отображается хронологическая диаграмма записи:
Тяжелый (снизу вверх)
Режим представления Heavy (снизу вверх) перечисляет функции по влиянию на производительность и позволяет изучить вызывающие пути к функциям. Это представление по умолчанию:
Дерево (сверху вниз)
В режиме представления "Дерево" (сверху вниз) отображается общая картина структуры вызова, начиная с верхней части стека вызовов:
Исключить функции
Если выбран пункт Heavy (Bottom Up) или Tree (Сверху вниз) (не диаграмма), при выборе строки есть несколько кнопок, которые доступны (не затемнены).
-
Выделенная функция фокусировки (
-
Исключить выбранную функцию (
) -
Восстановление всех функций (
)
Чтобы исключить функцию из профиля выборки выделения памяти, выберите профиль выборки и нажмите кнопку Исключить выбранную функцию (). Запрашивающая функция (родитель) исключенной функции (дочерней) заряжается выделенной памятью, назначенной исключенной функции (дочерней).
Нажмите кнопку Восстановить все функции (), чтобы восстановить все исключенные функции обратно в запись.
Просмотр профиля выборки выделения памяти в виде диаграммы
Представление Диаграмма предоставляет визуальное представление профиля выборки с течением времени.
После записи профиля выборки выделения памяти просмотрите запись как диаграмму пламени. Выберите Диаграмма в раскрывающемся списке Режим просмотра профиля (в котором изначально указано Тяжелое (снизу вверх)):
Диаграмма пламени разделена на две части:
| index | Part | Описание |
|---|---|---|
| 1 | Обзор | Вид с птичьего глаза на всю запись. Высота отрезков соответствует глубине стека вызовов. Таким образом, чем выше панель, тем глубже стек вызовов. |
| 2 | Стеки вызовов | Это подробное представление функций, которые были вызваны во время записи. Горизонтальная ось — время, а вертикальная ось — это стек вызовов. Стеки организованы сверху вниз. Итак, функция сверху называется под ней и т. д. |
Функции окрашены случайным образом. Нет корреляции с цветами, используемыми на других панелях. Тем не менее функции всегда имеют одинаковый цвет в разных вызовах, что позволяет просматривать шаблоны в каждой среде выполнения.
Высокий стек вызовов не обязательно имеет большое значение; это может означать, что было вызвано множество функций. Но широкая полоса означает, что выполнение функции занимает много времени, поэтому это кандидаты для оптимизации.
Увеличение масштаба для определенных частей записи
Чтобы увеличить размер определенных частей стека вызовов, щелкните и перетащите влево и вправо по обзору. После увеличения стек вызовов автоматически отображает выбранную часть записи.
Просмотр сведений о функции
Щелкните функцию, чтобы просмотреть ее в средстве Источники .
Наведите указатель мыши на функцию, чтобы отобразить данные об имени и времени:
| Сведения | Описание |
|---|---|
| Name | Имя функции. |
| Самостоятельный размер | Размер текущего вызова функции, включая только операторы в функции. |
| Общий размер | Размер текущего вызова этой функции и всех вызываемых ею функций. |
| URL-адрес | Расположение определения функции в формате base.js:261 where base.js — это имя файла, в котором определена функция, и 261 номер строки определения. |
Исследование выделения памяти с уменьшением мусора (флажки "Включить объекты")
По умолчанию тип профилирования выборки выделения сообщает только о выделениях, которые по-прежнему активны в конце сеанса записи. Объекты, которые создаются, удаляются, а затем собираются мусором (GC'd), не отображаются в средстве "Память" при профилировании с помощью выборки выделения или выделения в временная шкала типах профилирования.
Вы можете доверять браузеру для очистки мусора из кода. Однако важно учитывать, что GC сама по себе является дорогостоящей операцией, и несколько GCs могут замедлить взаимодействие пользователя с вашим веб-сайтом или приложением. При записи в инструменте "Производительность " с включенным флажком "Память " можно увидеть, как операция сборки мусора выполняется на крутых скалах (внезапное снижение) в диаграмме кучи:
Уменьшая объем мусора, создаваемого кодом, вы можете снизить затраты на каждую отдельную сборку мусора и количество операций сборки мусора.
Отслеживание объектов, отброшенных сборкой мусора
Чтобы отслеживать объекты, отбрасываемые сборкой мусора, выполните следующие действия:
В средстве "Память " нажмите кнопку Выборка выделения .
Выберите параметры Включить объекты, отброшенные основными сборками мусора , и Включить объекты, отброшенные дополнительными объектами сборки мусора .
Нажмите кнопку Пуск.
На веб-странице выполните действия, которые нужно исследовать.
Нажмите кнопку Остановить , когда все действия будут завершены.
DevTools теперь отслеживает все объекты, которые были GC во время записи. Используйте эти параметры, чтобы понять, сколько мусора генерируется веб-сайтом или приложением. Данные, передаваемые выборкой выделения , помогут определить функции, которые создают больше всего мусора.
Если вы исследуете объекты, которые были только GC во время определенных крупных или незначительных операций сборки мусора, настройте параметры соответствующим образом, чтобы отслеживать нужную операцию. Дополнительные сведения о различиях между основными и дополнительными сборками мусора см. в статье Мусорное обсуждение: сборщик мусора Orinoco | Блог разработчика обработчика JavaScript версии 8.
Примечание.
Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и авторами Кейс Баски и Меггин Кирни.
Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.