Ускорение выполнения JavaScript

Нахождение ресурсоемких функций с помощью панели памяти .

Образцы профилей

Краткий обзор

  • Записывайте именно те функции, которые были вызваны, и объем памяти, необходимый для выделения ресурсов, на панели памяти .
  • Визуализируйте свои профили как flameную диаграмму.

Запись профиля выборки

Если вы заметили, что Jank в коде JavaScript, соберите профиль выборки. Профили выборки показывают, где на странице потратило время выполнения.

  1. Откройте панель память в DevTools.
  2. Установите переключатель выборка распределения .
  3. Нажмите кнопку Пуск.
  4. В зависимости от того, что вы пытаетесь проанализировать, вы можете либо повторно загрузить страницу, взаимодействовать со страницей, либо просто разрешить выполнение страницы.
  5. Когда все будет готово, нажмите кнопку остановить .

Примечание

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

Просмотр профиля выборки

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

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

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

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

Диаграмма. Диаграмма, на которой показана Хронология записи.

Flame диаграмма

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

Тяжелая диаграмма

Дерево \ (сверху вниз). Показывает общую картину структуры вызова, начиная с верхней части стека вызова.

Древовидная диаграмма

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

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

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

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

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

После записи профиля выборочнойнастройки просмотрите запись в виде Flame диаграммы, изменив порядок сортировки на Chart.

Flame представления диаграммы

Flame диаграмма делится на две части.

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

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

Диаграмма с аннотированными Flame

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

Масштабирование отдельных частей записи

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

Диаграмма с увеличенным масштабом

Просмотр сведений о функции

Выберите функцию, чтобы просмотреть ее определение на панели « источники ».

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

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

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

Взаимодействие с командой средств разработчика Microsoft Edge

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

  • Отправьте отзыв с помощью значка " Отправить отзыв " или выберите Alt + Shift + I \ (Windows ) или Option + Shift + I \ (macOS ) в DevTools.
  • Твит на @EdgeDevTools.
  • Отправьте предложение в Интернет.
  • В этой статье описаны ошибки в разделе Отзывы и предложения .

:::image type="complex" source="../media/bing-devtools-send-feedback.msft.png" alt-text="Значок "Отправить отзыв" в Microsoft Edge DevTools" lightbox="../media/bing-devtools-send-feedback.msft.png"::: Значок " Отправить отзыв " в Microsoft Edge DevTools
:::image-end:::

Примечание

Части этой страницы представляют собой изменения, основанные на работе, созданной и предоставленной компанией Google и использованными в соответствии с условиями, описанными в лицензии Creative Commons 4,0 международная лицензия.
Исходная страница будет найдена здесь и Kayce Basques \ (технический писатель, Chrome DevTools \ & Lighthouse ) и Meggin Kearney \ (технический редактор ).

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