Общие сведения о средстве производительности

  • Статья

Производительность среды выполнения — это то, как выполняется страница при ее запуске, а не при загрузке. В следующем руководстве показано, как использовать средство devTools Performance для анализа производительности среды выполнения.

Навыки, которые вы узнаете в этом руководстве, полезны для анализа загрузки, интерактивности и визуальной стабильности веб-содержимого, которые также являются ключевыми индикаторами для Core Web Vitals. Каждый из core Web Vitals представляет собой отдельный аспект взаимодействия с пользователем, измерим в этой области и отражает реальный опыт критического результата, ориентированного на пользователей. Эти основные веб-компоненты можно просмотреть в средстве производительности .

См. также:

Get started

В следующем руководстве вы откроете devTools на демонстрационной странице "Вялые анимации" и с помощью средства "Производительность " вы найдете узкое место производительности на странице.

  1. Откройте демонстрационную страницу "Вялые анимации " на вкладке или окне InPrivate. Для этого щелкните ссылку правой кнопкой мыши и выберите команду Открыть ссылку в окне InPrivate. Вы профилируем эту страницу, на которой отображается переменное количество значков, перемещающихся вверх и вниз. Дополнительные сведения об InPrivate см. в разделе Обзор InPrivate в Microsoft Edge.

    Исходный код: MicrosoftEdge / Demos > devtools-performance-get-started.

  2. Нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS), чтобы открыть средства разработки:

    Демонстрация слева и DevTools справа

На остальных снимках экрана средства разработки отстыкованы в отдельном окне.

Имитация мобильного ЦП

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

  1. В средствах разработки откройте средство Производительность .

  2. Щелкните Параметры записи (Параметры записи). DevTools показывает параметры, связанные с тем, как они записывают метрики производительности.

  3. Для параметра ЦП выберите 4x замедление. DevTools регулирует ЦП, чтобы он был в 4 раза медленнее, чем обычно.

    Регулирование ЦП

    Если вы хотите убедиться, что страницы хорошо работают на мобильных устройствах низкого уровня, установите для параметра ЦПзначение 6x замедления.

Настройка демонстрации

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

  1. Нажимайте кнопку Добавить элементы , пока синие значки не двигаются заметно медленнее, чем раньше. На высокопроизводительном компьютере его можно щелкнуть около 20 раз.

  2. Щелкните Оптимизировано. Синие значки должны двигаться быстрее и плавно.

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

  4. Нажмите кнопку Медленно. Синие значки движутся медленнее и с большей вялостью снова.

Запись производительности среды выполнения

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

  1. В средствах разработки щелкните Запись (запись). Средства разработки записывают метрики производительности при запуске страницы.

    Профилирование страницы

  2. Подождите несколько секунд.

  3. Нажмите кнопку Остановить. DevTools останавливает запись, обрабатывает данные, а затем отображает результаты в средстве производительности .

    Результаты профиля

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

Анализ результатов

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

  1. Диаграмма ЦП отображается в верхней части экрана. Цвета на диаграмме ЦП соответствуют цветам на панели Сводка в нижней части средства производительности . На диаграмме ЦП показано, что эти регионы составляют большую область, что означает, что ЦП был максимально загружен во время записи. Каждый раз, когда ЦП не работает в течение длительных периодов времени, это свидетельствует о том, что страница работает неправильно.

    Диаграмма ЦП и панель

  2. Наведите указатель мыши на диаграммы ЦП или NET . DevTools отображает снимок экрана страницы в этот момент времени. Переместите мышь влево и вправо, чтобы воспроизвести запись. Действие называется очисткой, и оно полезно для ручного анализа хода записи производительности.

    Наведите указатель мыши на кадр

Бонус: открытие наложения статистики отрисовки кадров

Еще один удобный инструмент — наложение статистики отрисовки кадров , которое предоставляет оценки FPS в режиме реального времени при выполнении страницы. Наложение "Статистика отрисовки кадров" не требуется для этого руководства, но может предоставить полезные сведения.

  1. В средствах разработки нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Команд.

  2. Начните вводить в меню команд и щелкните Показать отрисовкуRendering.

  3. В средстве отрисовки включите статистику отрисовки кадров. В левом верхнем углу веб-страницы появится новое наложение.

    Наложение FPS

  4. Завершив проверку данных FPS, снимите флажок Статистика отрисовки кадров , чтобы скрыть наложение.

Поиск узкого места

Убедившись, что анимация работает неправильно, следующим шагом будет ответ на вопрос "Почему?"

  1. Если события не выбраны, на панели Сводка отображается разбивка действий. Страница потратила большую часть времени на отрисовку. Так как производительность — это искусство выполнения меньшей работы, ваша цель заключается в сокращении времени, затрачиваемого на отрисовку.

    Панель

  2. Разверните раздел Main (Основное ). DevTools показывает диаграмму пламени активности в потоке main с течением времени. Ось X представляет запись с течением времени. Каждая панель представляет событие. Более широкая полоса означает, что это событие заняло больше времени. Ось Y представляет стек вызовов. Когда события располагаются друг на друге, это означает, что верхние события вызвали нижние события.

    Раздел Main

  3. В записи много данных. Чтобы увеличить масштаб части записи, щелкните и перетащите область Обзор в верхнюю часть инструмента Производительность . Область Обзор содержит диаграммы ЦП и NET (указаны справа). В разделе Main и на панели Сводка отображаются только сведения о выбранной части записи.

    Увеличение масштаба раздела

    Другой способ изменить выбранную область — разместить фокус на главном разделе, щелкнуть фон или событие, а затем нажать:

    • W для увеличения масштаба, S для уменьшения масштаба.
    • A для перемещения выделенного фрагмента влево, D для перемещения выделения вправо.

  4. Щелкните событие Анимационный кадр сработал .

    Если красный треугольник отображается в правом верхнем углу события, это предупреждение о том, что может возникнуть проблема, связанная с событием. Событие Анимационный кадр сработал при каждом выполнении обратного вызова requestAnimationFrame().

    На панели Сводка отображаются сведения об этом событии:

    Дополнительные сведения о событии сработал кадр анимации

  5. Щелкните ссылку Показать . DevTools выделяет событие, которое инициировало событие Анимация Кадр сработал .

  6. Щелкните ссылку app.js:125 . Соответствующая строка исходного кода отображается в средстве Источники .

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

    Теперь можно просмотреть события, возникающие при отображении одного кадра анимации. Вызывается функция update , которая, в свою очередь, вызывает функцию updateSlow , которая активирует множество событий Recalculate Style и Layout :

    Событие

  8. Щелкните одно из событий сиреневого макета . DevTools предоставляет дополнительные сведения о событии на панели Сводка . Существует предупреждение о "принудительных перетоках" (повторное изменение макета).

  9. На панели Сводка щелкните ссылку app.js:104 в разделе Макет принудительно. DevTools позволяет переходить к строке кода, которая заставила макет в средстве "Источники ":

    Строка кода, вызвавшего принудительный макет

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

Анализ оптимизированной версии

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

Неоптимизированная версия

Сравните этот фрагмент Кода JavaScript из неоптимизированной версии приложения:

// Read the current position.
const currentPos = element.offsetTop;
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - SPEED : currentPos + SPEED;

// If the new position is out of bounds, reset it.
if (nextPos < 0) {
  nextPos = 0;
} else if (nextPos > canvas.offsetHeight) {
  nextPos = canvas.offsetHeight;
}

// Set the new position on the element.
element.style.top = `${nextPos}px`;

// Switch the direction if needed.
if (element.offsetTop === 0) {
  element.dataset.dir = 'down';
} else if (element.offsetTop === canvas.offsetHeight) {
  element.dataset.dir = 'up';
}

Приведенный выше фрагмент кода выполняется на каждом кадре цикла отрисовки браузера для каждого синего значка на странице. Переменная element ссылается на один синий значок.

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

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

Наконец, мы снова читаем element.offsetTop , чтобы изменить направление значка.

Оптимизированная версия

Оптимизированный код использует другую последовательность действий для выполнения меньшей работы. Ниже приведен тот же фрагмент Кода JavaScript из оптимизированной версии приложения:

// Read the current position.
const currentPos = parseFloat(element.style.transform.match(/[0-9.]+/)[0]);
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - (SPEED * 100 / canvasHeight) : currentPos + (SPEED * 100 / canvasHeight);

// If the new position is out of bounds, reset it, and switch the direction.
if (nextPos < 0) {
  nextPos = 0;
  element.dataset.dir = 'down';
} else if (nextPos > 100) {
  nextPos = 100;
  element.dataset.dir = 'up';
}

// Set the new position on the element.
element.style.transform = `translateY(${nextPos}vh)`;

В оптимизированной версии мы сначала задаем значение переменной nextPos путем чтения element.style.transform , а не с помощью element.offsetTop. Использование встроенного стиля элемента выполняется быстрее, так как при чтении element.offsetTop подсистема браузера узнает, где находятся все элементы на странице, что требует повторного вычисления стилей и макета.

Затем мы изменяем направление значка, но на этот раз не читаем element.offsetTop снова, как в неоптимизированной версии.

Наконец, мы задаем новое положение значка, но на этот раз мы используем element.style.transform вместо element.style.top. Использование element.style.transform выполняется быстрее, так как свойство CSS transform может применяться подсистемой отрисовки браузера без необходимости перерасчета макета страницы. При использовании transform свойства браузер рассматривает каждый значок как отдельный слой, а затем отображает эти слои в правильных положениях путем повторного создания окончательного изображения.

Дополнительные сведения см. в статье Использование изменений преобразования и непрозрачности для анимации.

Дальнейшие действия

Чтобы лучше использовать средство производительности , потренируйтесь в профилировании страниц и анализе результатов.

Если у вас есть вопросы о результатах, на панели действий выберите Справка (значок справки на панели действий) >Обратная связь. Или нажмите клавиши ALT+SHIFT+I (Windows, Linux) или OPTION+SHIFT+I (macOS).

Или отправьте запрос в репозиторий MicrosoftEdge/DevTools.

В своем отзыве включите снимки экрана или ссылки на воспроизводимые страницы, если это возможно.

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

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

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