Эта страница переведена с помощью Cloud Translation API.

Анализируйте производительность во время выполнения

Kayce Basques

Производительность во время выполнения — это то, как ваша страница работает во время работы, а не во время загрузки. Из этого руководства вы узнаете, как использовать панель Chrome DevTools Performance для анализа производительности во время выполнения. С точки зрения модели RAIL навыки, которые вы изучите в этом руководстве, полезны для анализа фаз ответа, анимации и ожидания вашей страницы.

Начать

В этом уроке мы будем использовать панель «Производительность» , чтобы найти узкое место в производительности на активной странице. Для начала:

Откройте Google Chrome в режиме инкогнито . Режим инкогнито гарантирует, что Chrome работает в чистом состоянии. Например, если у вас установлено много расширений, эти расширения могут создавать помехи в измерениях производительности.
Загрузите следующую страницу в окно инкогнито. Это демо-версия, которую вы собираетесь профилировать. На странице показано множество маленьких синих квадратов, движущихся вверх и вниз.
https://googlechrome.github.io/devtools-samples/jank/
Нажмите Command + Option + I (Mac) или Control + Shift + I (Windows, Linux), чтобы открыть DevTools.
Примечание . На остальных скриншотах DevTools откреплен в отдельное окно , чтобы вы могли лучше видеть его содержимое.

Имитировать мобильный процессор

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

В DevTools перейдите на вкладку «Производительность» .
Убедитесь, что флажок экрана» установлен.
Нажмите параметров захвата» . DevTools раскрывает настройки, связанные со сбором показателей производительности.
Для ЦП выберите замедление в 4 раза . DevTools ограничивает работу вашего процессора, так что он работает в 4 раза медленнее, чем обычно.
Примечание . При тестировании других страниц, если вы хотите убедиться, что они хорошо работают на мобильных устройствах низкого уровня, установите регулирование ЦП на 20-кратное замедление . Эта демонстрация не очень хорошо работает с 20-кратным замедлением, поэтому она просто использует 4-кратное замедление в учебных целях.

Настроить демо-версию

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

Продолжайте нажимать «Добавить 10» , пока синие квадраты не начнут двигаться заметно медленнее, чем раньше. На машине высокого класса это может занять около 20 кликов.
Нажмите «Оптимизировать» . Синие квадраты должны двигаться быстрее и плавнее.
Примечание. Если вы не видите заметной разницы между оптимизированной и неоптимизированной версиями, попробуйте несколько раз нажать «Вычесть 10» и повторить попытку. Если вы добавите слишком много синих квадратов, вы просто максимально загрузите процессор и не увидите существенной разницы в результатах для двух версий.
Нажмите «Отменить оптимизацию» . Синие квадраты снова движутся медленнее и с большей рывком.

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

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

В DevTools нажмите «Записать . DevTools фиксирует показатели производительности во время запуска страницы.
Подождите несколько секунд.
Нажмите «Стоп» . DevTools останавливает запись, обрабатывает данные, а затем отображает результаты на панели «Производительность» .

Ого, это огромное количество данных. Не волнуйтесь, вскоре это станет понятнее.

Анализируйте результаты

Имея запись производительности, вы можете проанализировать, насколько плоха производительность страницы, и найти причину(ы).

Анализ кадров в секунду

Основной метрикой измерения производительности любой анимации является количество кадров в секунду (FPS). Пользователи довольны, когда анимация работает со скоростью 60 кадров в секунду.

Посмотрите на график FPS . Всякий раз, когда вы видите красную полосу над FPS , это означает, что частота кадров упала настолько низко, что это, вероятно, вредит пользовательскому опыту.
Под диаграммой FPS вы видите диаграмму ЦП . Цвета на диаграмме ЦП соответствуют цветам на вкладке «Сводка» в нижней части панели «Производительность» . Тот факт, что диаграмма ЦП заполнена цветами, означает, что во время записи ЦП был максимально загружен. Всякий раз, когда вы видите, что процессор работает на пределе в течение длительного времени, это сигнал о том, что нужно найти способы выполнять меньше работы.
Наведите указатель мыши на диаграммы FPS , CPU или NET . DevTools показывает снимок экрана страницы в этот момент. Двигайте мышью влево и вправо, чтобы воспроизвести запись. Это называется очисткой и полезно для ручного анализа хода анимации.
В разделе «Кадры» наведите указатель мыши на один из зеленых квадратов. DevTools показывает вам FPS для этого конкретного кадра. Каждый кадр, вероятно, значительно ниже целевого показателя в 60 кадров в секунду.

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

Бонус: откройте счетчик FPS.

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

Нажмите Command + Shift + P (Mac) или Control + Shift + P (Windows, Linux), чтобы открыть меню команд.
Начните вводить Rendering в меню команд и выберите «Показать рендеринг» .
На панели «Рендеринг» включите «Показать статистику рендеринга» . В правом верхнем углу окна просмотра появится новое наложение.
Отключите счетчик FPS и нажмите Escape, чтобы закрыть панель рендеринга . Вы не будете использовать его в этом уроке.

Найдите узкое место

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

Обратите внимание на вкладку «Сводка» . Если события не выбраны, на этой вкладке отображается разбивка активности. Страница потратила большую часть времени на рендеринг. Поскольку производительность — это искусство выполнения меньшего количества работы, ваша цель — сократить количество времени, затрачиваемого на рендеринг.
Разверните раздел «Основной» . DevTools показывает вам график активности основного потока с течением времени. Ось X представляет запись с течением времени. Каждая полоса представляет событие. Более широкая полоса означает, что событие заняло больше времени. Ось Y представляет стек вызовов. Когда вы видите события, наложенные друг на друга, это означает, что события верхнего уровня вызвали события нижнего уровня.
В записи много данных. Увеличьте масштаб одного события Animation Frame Fired , щелкнув, удерживая и перетащив указатель мыши на раздел «Обзор» , который представляет собой раздел, включающий диаграммы FPS , CPU и NET . В разделе «Основной» и на вкладке «Сводка» отображается информация только для выбранной части записи.
Совет: Вы также можете использовать WASD для навигации по записи. Выделите основной раздел, щелкнув его фон или выбрав событие, затем нажмите W , чтобы увеличить масштаб, S , чтобы уменьшить масштаб, A , чтобы прокрутить влево, или D , чтобы прокрутить вправо.
Обратите внимание на красный треугольник в правом верхнем углу событий Task и Layout. Каждый раз, когда вы видите красный треугольник, это предупреждение о том, что может возникнуть проблема, связанная с этим событием. Красный треугольник на задаче означает, что это была длинная задача .
Щелкните событие «Анимационный кадр запущен» . На вкладке «Сводка» теперь отображается информация об этом событии. Если щелкнуть ссылку рядом с надписью «Инициировано », DevTools выделит событие, которое инициировало событие «Анимационный кадр» . Также обратите внимание на ссылку app.update@ . Нажав на нее, вы перейдете к соответствующей строке исходного кода.
Примечание . После выбора события используйте клавиши со стрелками, чтобы выбрать события рядом с ним.
Под событием app.update отображается несколько фиолетовых событий. Если бы они были шире, казалось бы, на каждом из них был бы красный треугольник. Нажмите на одно из фиолетовых событий макета . DevTools предоставляет дополнительную информацию о событии на вкладке «Сводка» . Действительно, есть предупреждение о принудительной перекомпоновке (другое слово для макета).
На вкладке «Сводка» щелкните ссылку рядом с app.update @ в разделе «Первая недействительность макета» . DevTools перенесет вас к строке кода, которая вызвала макет.
Примечание . Проблема этого кода заключается в том, что в каждом кадре анимации он меняет стиль каждого квадрата, а затем запрашивает положение каждого квадрата на странице. Поскольку стили изменились, браузер не знает, изменилась ли позиция каждого квадрата, поэтому ему приходится заново размещать квадрат, чтобы вычислить его положение. Дополнительную информацию см. в разделе Избегайте принудительной синхронной компоновки .

Уф! Этого было очень много, но теперь у вас есть прочная основа в базовом рабочем процессе для анализа производительности во время выполнения. Хорошая работа.

Бонус: проанализируйте оптимизированную версию

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

Примечание. Даже эта оптимизированная версия не так уж хороша, поскольку она по-прежнему управляет свойством top каждого квадрата. Лучший подход — придерживаться свойств, которые влияют только на композицию. Дополнительные сведения см. в разделе «Использование изменений трансформации и непрозрачности для анимации» .

Следующие шаги

Основой для понимания производительности является модель RAIL. Эта модель учит вас показателям производительности, которые наиболее важны для ваших пользователей. Дополнительную информацию см. в разделе «Измерение производительности с помощью модели RAIL» .

Чтобы освоиться с панелью «Производительность», необходима практика. Попробуйте профилировать свои собственные страницы и проанализировать результаты. Если у вас есть вопросы по поводу результатов, откройте вопрос «Переполнение стека», помеченный тегом google-chrome-devtools . Если возможно, добавьте скриншоты или ссылки на воспроизводимые страницы.

Чтобы стать экспертом в области производительности во время выполнения, вам нужно узнать, как браузер преобразует HTML, CSS и JS в пиксели на экране. Лучшее место для начала — Обзор производительности рендеринга . «Анатомия кадра» раскрывает еще больше деталей.

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