Ускорение среды выполнения JavaScript (тип профилирования "выборка выделения")

Чтобы определить ресурсоемкие функции, используйте средство "Память ".

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

Визуализируйте свои профили в виде диаграммы пламени.

Использование типа профилирования "Выборка выделения" для просмотра выделения памяти функцией JavaScript

Если вы заметили jank (прерывания рендеринга) в своем JavaScript, соберите профиль выборки выделения памяти, используя тип профилирования выборки выделения . Профиль выборки показывает, каким функциям выделено больше всего памяти.

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

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

2. Щелкните веб-страницу правой кнопкой мыши и выберите "Проверить".

   Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.

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

   

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

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

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

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

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

7. Взаимодействие с веб-страницей. Например, нажмите кнопку «Быстрый трафик », а затем кнопку «Стоп » на демонстрационной веб-странице.

   В зависимости от того, что вы пытаетесь проанализировать, вы можете обновить страницу, взаимодействовать со страницей или просто позволить ей работать.

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

   Или нажмите кнопку "Стоп" в нижней части окна "Память". Новый профиль добавлен в раздел Профили выборки на боковой панели Профили :

   

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

Вы также можете использовать API служебных программ консоли для записи и группировки профилей из командной строки.

Изменение представления профиля выборки

Чтобы изменить порядок сортировки в профиле выборки выделения памяти, используйте раскрывающийся список Режим просмотра профиля, в котором изначально указано Heavy (Bottom Up):

Пункты меню:

• Chart - Хронологическая схема записи.
• Тяжелый (снизу вверх) — список вызываемых функций приложения в порядке выделения памяти и показывает путь вызова для каждой функции. Представление по умолчанию.
• Дерево (сверху вниз) — показывает структуру звонков, начиная с верхней части стека вызовов.

Диаграмма

В режиме просмотра диаграммы отображается хронологическая диаграмма записи:

Тяжелый (снизу вверх)

В режиме просмотра "Тяжелый (снизу вверх") функции отображаются по влиянию на производительность и можно изучить пути вызова функций. Это представление по умолчанию:

Дерево (сверху вниз)

Режим представления "Дерево (сверху вниз)" показывает общую картину структуры вызова, начиная с верхней части стека вызовов:

Исключить функции

Если выбран элемент "Плотный" ("Снизу вверх") или "Дерево" ("Сверху вниз") (не "Диаграмма"), при выделении строки доступно несколько кнопок (не затеняется):

• Функция выделения фокуса (
• Исключить выбранную функцию ()
• Восстановить все функции ()

Чтобы исключить функцию из профиля выборки выделения памяти, выберите профиль выборки и нажмите кнопку Исключить выбранную функцию (). Запрашивающая функция (родитель) исключенной функции (дочерний) заряжается выделенной памятью, назначенной исключенной функции (дочерним).

Нажмите кнопку Восстановить все функции (), чтобы восстановить все исключенные функции обратно в запись.

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

Представление "Диаграмма" обеспечивает визуальное представление профиля выборки с течением времени.

После записи профиля выборки выделения памяти просматривайте запись как диаграмму пламени. Выберите пункт "Диаграмма" в раскрывающемся списке "Режим просмотра профиля" (в котором изначально указывается "Тяжелый (снизу вверх)"):

Карта пламени разделена на две части:

index	Part	Описание
1	Обзор	Вид всей записи с высоты птичьего полета. Высота баров соответствует глубине стека вызовов. Таким образом, чем выше планка, тем глубже стек звонков.
2	Стеки звонков	Ниже представлен подробный обзор функций, вызванных во время записи. Горизонтальная ось — это время, а вертикальная ось — стек вызовов. Стопки упорядочены сверху вниз. Итак, функция сверху вызывала ту, что ниже, и так далее.

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

Высокий стек вызовов не обязательно имеет значение; Это может просто означать, что было вызвано много функций. Но широкая полоса означает, что выполнение функции заняло много времени, поэтому это кандидаты на оптимизацию.

Увеличение определенных фрагментов записи

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

Просмотреть сведения о функциях

Выберите функцию, чтобы просмотреть ее в средстве "Источники ".

Чтобы отобразить имя и время показа функции, наведите указатель мыши:

Сведения	Описание
Name	Имя функции.
Собственный размер	Размер текущего вызова функции, включая только операторы функции.
Общий размер	Размер текущего вызова этой функции и всех функций, вызванных ею.
URL-адрес	Расположение определения функции в виде base.js:261 where base.js — имя файла, в котором определена функция, и 261 номер строки определения.

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

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

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

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

Отслеживание объектов, отбрасываемых сборкой мусора

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

1. В средстве "Память " нажмите кнопку Опция выборки выделения .

2. Щелкните Включить объекты, отброшенные основным сборщиком мусора и Включить объекты, отброшенные дополнительными настройками сборки мусора.

   

3. Нажмите кнопку Пуск.

4. На веб-странице выполните действия, которые вы хотите исследовать.

5. После завершения всех действий нажмите кнопку «Стоп ».

Средства разработчика теперь отслеживают все объекты, которые были собраны в мусоре (GC'd) во время записи. Используйте эти параметры, чтобы понять, сколько мусора генерирует ваш веб-сайт или приложение. Данные, сообщаемые выборкой распределения , помогут вам определить функции, которые генерируют больше всего мусора.

Если вы исследуете объекты, которые были обработаны только во время определенных основных или дополнительных операций сборки мусора, настройте параметры соответствующим образом, чтобы отслеживать интересующую вас операцию. Чтобы узнать больше о различиях между основным и второстепенным GC, см. Trash talk: сборщик мусора в Ориноко | Блог разработчиков движка JavaScript версии 8.

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные Google , и используемые в соответствии с условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Оригинальная страница находится здесь , ее авторами являются Кейси Баскес и Меггин Кирни.

Эта работа предоставляется по лицензии Creative Commons Attribution 4.0 International License.