Анализ производительности среды выполнения (руководство)

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

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

См. также:

• Web Vitals на web.dev.
• Терминология в средстве производительности. Анализ производительности веб-сайта.
• Оптимизация скорости веб-сайта с помощью Lighthouse

Шаг 1. Откройте демонстрацию в режиме InPrivate и откройте средства разработки

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

1. Щелкните правой кнопкой мыши ссылку Вялые анимации и выберите Команду Открыть ссылку в окне InPrivate.

   Вы профилирование этой демонстрационной веб-страницы, на которой отображается переменное количество значков, перемещающихся вверх и вниз. Если вы хотите просмотреть исходный код демонстрации, см. статью MicrosoftEdge / Demos > devtools-performance-get-started.

   Режим InPrivate гарантирует, что браузер работает в чистом состоянии. Например, если установлено много расширений, эти расширения могут создавать помехи в измерениях производительности. Дополнительные сведения см. в статье Обзор InPrivate в Microsoft Edge.

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

   Откроется devTools:

   

3. В правом верхнем углу окна DevTools нажмите кнопку Настройка и управление Средствами разработки (), а затем рядом с полем Расположение закрепления нажмите кнопку Открепить в отдельное окно ().

Шаг 2. Регулирование ЦП для имитации мобильного ЦП

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

Регулирование ЦП настольном компьютере для имитации мобильного ЦП следующим образом:

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

2. Нажмите кнопку Параметры записи ().

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

3. В раскрывающемся меню Регулирование ЦП в левом верхнем углу выберите рекомендуемое значение замедления, например 4x: рекомендуется замедление.

   

   Или в разделе Параметры среды в правом нижнем углу в раскрывающемся меню Регулирование ЦП выберите рекомендуемое значение замедления, например рекомендуется 4x замедление. Два экземпляра раскрывающегося меню связаны.

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

   DevTools регулирует ЦП, чтобы он был медленнее, чем обычно.

   Значок предупреждения о регулировании () отображается на вкладке средства производительности , чтобы напомнить вам, что регулирование включено.

4. Нажмите кнопку Параметры записи ().

   Раскрывающиеся меню параметров и флажки, связанные с записью метрик производительности, скрыты.

Шаг 3. Заполнение веб-страницы идеальным количеством значков

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

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

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

1. Перейдите на веб-страницу демонстрации "Вялые анимации".

   Кнопка Медленно изначально выбрана по умолчанию, чтобы использовать неоптимизированный код.

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

3. Нажмите кнопку Оптимизировано .

   Значки движутся быстрее и плавно.

4. Если вы не видите заметной разницы между использованием неоптимизированного (медленно) и оптимизированного кода, попробуйте нажать кнопку Удалить элементы .

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

Шаг 4. Запись производительности неоптимизированного кода

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

Сделайте запись в средстве производительности , чтобы узнать, как обнаружить узкое место производительности в неоптимизированной (медленной) версии кода:

1. На демонстрационной веб-странице нажмите кнопку Медленно .

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

2. В окне DevTools в средстве Производительность нажмите кнопку Запись ().

   Средства разработки записывают метрики производительности при запуске веб-страницы:

   

   ЦП по-прежнему регулируется. (На этих снимках экрана должен отображаться значок предупреждения о регулировании () на вкладке средства производительности на панели действий.)

3. Подождите несколько секунд, а затем щелкните значок Стоп () или кнопку Остановить .

   DevTools останавливает запись, обрабатывает данные, а затем отображает результаты в средстве производительности :

   

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

Шаг 5. Анализ производительности неоптимизированного кода

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

1. В верхней части средства Производительность просмотрите диаграмму ЦП :

   

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

2. Наведите указатель мыши на диаграммы ЦП или NET :

   

   DevTools отображает снимок экрана веб-страницы в этот момент времени.

3. Переместите мышь влево и вправо, чтобы воспроизвести запись.

   Это действие называется очисткой, и оно полезно для ручного анализа хода записи производительности.

Шаг 6. Отображение наложения статистики отрисовки кадра

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

1. В правом верхнем углу devTools нажмите кнопку Настройка и управление Средствами разработки () и выберите пункт Переключить панель быстрого просмотра.

   Или нажмите клавишу ESC один или два раза.

   Панель Быстрого просмотра отображается в нижней части devTools.

2. На панели быстрого просмотра нажмите кнопку Дополнительные инструменты (") и выберите Отрисовка.

   Средство отрисовки откроется на панели Быстрого просмотра .

3. В средстве отрисовки установите флажок Статистика отрисовки кадра :

   

4. Перейдите на демонстрационную веб-страницу.

   Отображается наложение "Статистика отрисовки кадров":

   

   Наложение состоит из следующих разделов:

   • Частота кадров
   • Растр GPU
   • Память GPU

   Отключите наложение:

5. Переключитесь в окно DevTools.

6. В средстве отрисовки снимите флажок Статистика отрисовки кадра .

7. В правом верхнем углу devTools нажмите кнопку Настройка и управление Средствами разработки () и выберите пункт Переключить панель быстрого просмотра.

   Или нажмите клавишу ESC.

   Панель Быстрого просмотра скрыта.

См. также:

• Инструмент отрисовки, чтобы увидеть, как выглядит веб-страница с различными вариантами отображения или при дефектах зрения

Шаг 7. Поиск узкого места производительности

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

1. В нижней части средства Производительность выберите вкладку Сводка :

   

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

2. В средстве Производительность щелкните строку Главная , чтобы развернуть ее.

   DevTools отображает диаграмму пламени активности в основном потоке с течением времени:

   

   • Ось X представляет запись с течением времени. Каждая панель представляет событие. Более широкая полоса означает, что это событие заняло больше времени.

   • Ось Y представляет стек вызовов. Когда события располагаются друг на друге, это означает, что верхние события вызвали нижние события.

   В записи много данных.

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 позволяет переходить к строке кода, которая заставила макет в средстве "Источники ":

   

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

См. также:

• Избегайте принудительных синхронных макетов в избегайте больших, сложных макетов и сброшений макетов на web.dev.

Шаг 8. Запись производительности оптимизированного кода

Выше вы записали неоптимизированную производительность кода.

Запишите оптимизированную производительность кода следующим образом:

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

2. В окне DevTools в средстве Производительность нажмите кнопку Запись ().

   DevTools записывает метрики производительности при запуске веб-страницы.

3. Подождите несколько секунд, а затем щелкните значок Стоп () или кнопку Остановить .

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

Шаг 9. Анализ производительности оптимизированного кода

• С помощью рабочих процессов и инструментов, которые вы только что узнали, проанализируйте результаты производительности, как в разделе Шаг 5. Анализ производительности неоптимизированного кода выше.

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

Шаг 10. Анализ неоптимизированного кода

Сравните этот фрагмент Кода 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 , чтобы изменить направление значка.

Шаг 11. Анализ оптимизированного кода

Оптимизированный код использует другую последовательность действий для выполнения меньшей работы. Ниже приведен тот же фрагмент Кода 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 свойства браузер рассматривает каждый значок как отдельный слой, а затем отображает эти слои в правильных положениях путем повторного создания окончательного изображения.

См. также:

• Избегайте свойств, которые активируют макет или рисование в разделе Создание высокопроизводительных анимаций CSS на web.dev.
• Переход непрозрачности в непрозрачность в MDN.

Шаг 12. Сброс параметров средств разработки

1. Переключитесь в отстыковку окна DevTools.

2. В средстве Производительность нажмите кнопку Параметры записи ().

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

3. В раскрывающемся меню Регулирование ЦП в левом верхнем углу выберите Нет регулирования.

   Средства разработки перестают регулировать ЦП. Значок предупреждения удаляется на вкладке средства "Производительность ".

4. В правом верхнем углу окна Средства разработки нажмите кнопку Настройка и управление Средствами разработки (), а затем рядом с полем Расположение закрепления нажмите кнопку Закрепить справа ().

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

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

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

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

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

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

Примечание.

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

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