Производительность во время выполнения — это то, как ваша страница работает во время работы, а не во время загрузки. Из этого руководства вы узнаете, как использовать панель Chrome DevTools Performance для анализа производительности во время выполнения. С точки зрения модели RAIL навыки, которые вы изучите в этом руководстве, полезны для анализа фаз ответа, анимации и ожидания вашей страницы.
Начать
В этом руководстве вы откроете DevTools на активной странице и воспользуетесь панелью «Производительность», чтобы найти узкое место в производительности на странице.
- Откройте Google Chrome в режиме инкогнито . Режим инкогнито гарантирует, что Chrome работает в чистом состоянии. Например, если у вас установлено много расширений, эти расширения могут создавать помехи в измерениях производительности.
Загрузите следующую страницу в окно инкогнито. Это демо-версия, которую вы собираетесь профилировать. На странице показано множество маленьких синих квадратов, движущихся вверх и вниз.
https://googlechrome.github.io/devtools-samples/jank/Нажмите Command+Option+I (Mac) или Control+Shift+I (Windows, Linux), чтобы открыть DevTools.
Рисунок 1 . Демо слева и DevTools справа.
Имитировать мобильный процессор
Мобильные устройства имеют гораздо меньшую мощность процессора, чем настольные компьютеры и ноутбуки. Всякий раз, когда вы профилируете страницу, используйте регулирование ЦП, чтобы имитировать работу вашей страницы на мобильных устройствах.
- В DevTools перейдите на вкладку «Производительность» .
- Убедитесь, что флажок «Снимки экрана» установлен.
- Нажмите «Настройки захвата».
. DevTools раскрывает настройки, связанные со сбором показателей производительности. Для ЦП выберите замедление в 2 раза . DevTools ограничивает работу вашего процессора, так что он работает в 2 раза медленнее, чем обычно.
Фигура 2 . Регулирование процессора, обведено синим цветом
Настроить демо-версию
Трудно создать демо-версию производительности во время выполнения, которая будет работать одинаково для всех читателей этого сайта. В этом разделе вы можете настроить демоверсию так, чтобы ваш опыт относительно соответствовал скриншотам и описаниям, которые вы видите в этом руководстве, независимо от вашей конкретной настройки.
- Продолжайте нажимать «Добавить 10» , пока синие квадраты не начнут двигаться заметно медленнее, чем раньше. На машине высокого класса это может занять около 20 кликов.
Нажмите «Оптимизировать» . Синие квадраты должны двигаться быстрее и плавнее.
Нажмите «Отменить оптимизацию» . Синие квадраты снова движутся медленнее и с большей рывком.
Рекордная производительность во время выполнения
Когда вы запустили оптимизированную версию страницы, синие квадраты перемещаются быстрее. Почему это? Обе версии должны перемещать каждый квадрат на одинаковое пространство за одинаковое время. Сделайте запись на панели «Производительность», чтобы узнать, как обнаружить узкое место в производительности в неоптимизированной версии.
В DevTools нажмите «Запись» .
. DevTools фиксирует показатели производительности во время запуска страницы. 
Рисунок 3. Профилирование страницы.
Подождите несколько секунд.
Нажмите «Стоп» . DevTools останавливает запись, обрабатывает данные, а затем отображает результаты на панели «Производительность».
Рисунок 4. Результаты профиля.
Ого, это огромное количество данных. Не волнуйтесь, вскоре все станет более понятно.
Анализируйте результаты
Получив запись производительности страницы, вы можете измерить, насколько плоха ее производительность, и найти причину(ы).
Анализ кадров в секунду
Основной метрикой измерения производительности любой анимации является количество кадров в секунду (FPS). Пользователи довольны, когда анимация работает со скоростью 60 кадров в секунду.
Посмотрите на график FPS . Всякий раз, когда вы видите красную полосу над FPS , это означает, что частота кадров упала настолько низко, что, вероятно, это вредит пользовательскому опыту. В целом, чем выше зеленая полоса, тем выше FPS.
Рисунок 5. Диаграмма FPS, обведенная синим цветом.
Под диаграммой FPS вы видите диаграмму ЦП . Цвета на диаграмме ЦП соответствуют цветам на вкладке «Сводка» в нижней части панели «Производительность». Тот факт, что диаграмма ЦП заполнена цветами, означает, что во время записи ЦП был максимально загружен. Всякий раз, когда вы видите, что процессор работает на пределе в течение длительного времени, это сигнал о том, что нужно найти способы выполнять меньше работы.
Рис. 6. Диаграмма ЦП и вкладка «Сводка», обведенная синим цветом.
Наведите указатель мыши на диаграммы FPS , CPU или NET . DevTools показывает снимок экрана страницы в этот момент. Двигайте мышью влево и вправо, чтобы воспроизвести запись. Это называется очисткой и полезно для ручного анализа хода анимации.
Рисунок 7. Просмотр снимка экрана страницы около отметки 2000 мс записи.
В разделе «Кадры» наведите указатель мыши на один из зеленых квадратов. DevTools показывает вам FPS для этого конкретного кадра. Каждый кадр, вероятно, значительно ниже целевого показателя в 60 кадров в секунду.
Рисунок 8. Наведение курсора на кадр.
Конечно, с помощью этой демонстрации совершенно очевидно, что страница работает не очень хорошо. Но в реальных сценариях все может быть не так однозначно, поэтому наличие всех этих инструментов для проведения измерений может пригодиться.
Бонус: откройте счетчик FPS.
Еще один удобный инструмент — счетчик FPS, который в режиме реального времени предоставляет оценки FPS во время запуска страницы.
- Нажмите Command+Shift+P (Mac) или Control+Shift+P (Windows, Linux), чтобы открыть командное меню.
- Начните вводить
Renderingв меню команд и выберите «Показать рендеринг» . На вкладке «Рендеринг» включите FPS Meter . В правом верхнем углу окна просмотра появится новое наложение.
Рисунок 9. Индикатор FPS.
Отключите счетчик FPS и нажмите Escape, чтобы закрыть вкладку «Рендеринг» . Вы не будете использовать его в этом уроке.
Найдите узкое место
Теперь, когда вы измерили и убедились, что анимация работает плохо, следующий вопрос, на который нужно ответить: почему?
Обратите внимание на вкладку сводки. Если события не выбраны, на этой вкладке отображается разбивка активности. Страница потратила большую часть времени на рендеринг. Поскольку производительность — это искусство выполнять меньше работы, ваша цель — сократить количество времени, затрачиваемого на рендеринг.
Рис. 10. Вкладка «Сводка», обведенная синим цветом.
Разверните раздел «Основной» . DevTools показывает вам график активности основного потока с течением времени. Ось X представляет запись с течением времени. Каждая полоса представляет событие. Более широкая полоса означает, что событие заняло больше времени. Ось Y представляет стек вызовов. Когда вы видите события, наложенные друг на друга, это означает, что события верхнего уровня вызвали события нижнего уровня.
Рис. 11. Основной раздел, обведенный синим цветом.
В записи много данных. Увеличьте масштаб одного события Animation Frame Fired, щелкнув, удерживая и перетащив указатель мыши на раздел «Обзор» , который представляет собой раздел, включающий диаграммы FPS , CPU и NET . В разделе «Основной» и на вкладке «Сводка» отображается информация только для выбранной части записи.
Рис. 12. Увеличенное изображение одного события Animation Frame Fired.
Обратите внимание на красный треугольник в правом верхнем углу события Animation Frame Fired . Каждый раз, когда вы видите красный треугольник, это предупреждение о том, что может возникнуть проблема, связанная с этим событием.
Щелкните событие «Анимационный кадр запущен» . На вкладке «Сводка» теперь отображается информация об этом событии. Обратите внимание на ссылку раскрытия . При нажатии на эту кнопку DevTools выделит событие, которое инициировало событие Animation Frame Fired . Также обратите внимание на ссылку app.js:94 . Нажав на нее, вы перейдете к соответствующей строке исходного кода.
Рис. 13. Дополнительная информация о событии Animation Frame Fired.
Под событием app.update отображается несколько фиолетовых событий. Если бы они были шире, казалось бы, на каждом из них был бы красный треугольник. Нажмите на одно из фиолетовых событий макета . DevTools предоставляет дополнительную информацию о событии на вкладке «Сводка» . Действительно, есть предупреждение о принудительной перекомпоновке (другое слово для макета).
На вкладке «Сводка» щелкните ссылку app.js:70 в разделе «Принудительный макет» . DevTools перенесет вас к строке кода, которая вызвала макет.
Рис. 13. Строка кода, вызвавшая принудительное размещение.
Уф! Этого было очень много, но теперь у вас есть прочная основа в базовом рабочем процессе для анализа производительности во время выполнения. Хорошая работа.
Бонус: проанализируйте оптимизированную версию
Используя рабочие процессы и инструменты, которые вы только что изучили, нажмите «Оптимизировать» в демо-версии, чтобы включить оптимизированный код, сделайте еще одну запись производительности, а затем проанализируйте результаты. Вы можете видеть, что оптимизированная версия приложения выполняет гораздо меньше работы, что приводит к повышению производительности — от улучшенной частоты кадров до уменьшения количества событий на диаграмме пламени в главном разделе.
Следующие шаги
Основой для понимания производительности является модель RAIL. Эта модель учит вас показателям производительности, которые наиболее важны для ваших пользователей. Дополнительную информацию см. в разделе «Измерение производительности с помощью модели RAIL» .
Чтобы освоиться с панелью «Производительность», необходима практика. Попробуйте профилировать свои собственные страницы и проанализировать результаты. Если у вас есть вопросы по поводу результатов, откройте вопрос «Переполнение стека», помеченный тегом google-chrome-devtools . Если возможно, добавьте скриншоты или ссылки на воспроизводимые страницы.
Чтобы стать экспертом в области производительности во время выполнения, вам нужно узнать, как браузер преобразует HTML, CSS и JS в пиксели на экране. Лучшее место для начала — Обзор производительности рендеринга . «Анатомия кадра» раскрывает еще больше деталей.
Наконец, существует множество способов улучшить производительность во время выполнения. В этом руководстве основное внимание уделяется одному конкретному узкому месту анимации, чтобы дать вам подробное представление о панели «Производительность», но это только одно из многих узких мест, с которыми вы можете столкнуться. В оставшейся части серии «Производительность рендеринга» содержится множество полезных советов по улучшению различных аспектов производительности во время выполнения, например: