Performance Tab

Профилирование производительности: запись, flame chart, поиск узких мест

Зачем нужно

  • Найти причины тормозов страницы
  • Оптимизировать рендеринг и скрипты
  • Измерить FPS и время кадра
  • Понять как браузер рендерит страницу

Где используется

  • Оптимизация анимаций
  • Поиск тяжёлых вычислений
  • Анализ layout thrashing
  • Подготовка к Lighthouse-аудиту

Предпосылки

Как браузер рендерит страницу

JavaScript → Style → Layout → Paint → Composite
    │          │        │        │         │
    │          │        │        │         └── Слои на GPU
    │          │        │        └── Отрисовка пикселей
    │          │        └── Расчёт позиций и размеров
    │          └── Вычисление финальных стилей
    └── Выполнение скриптов (обработчики, таймеры)

Каждый этап занимает время. Цель — уложиться в 16.6мс на кадр (60 FPS).

Запись профиля

Шаги

  1. Открыть Performance tab
  2. Нажать кнопку Record (кружок) или Ctrl+E
  3. Выполнить действия на странице (скролл, клики, анимация)
  4. Нажать Stop
  5. Анализировать результат

Запись загрузки страницы

Кнопка перезагрузки (стрелка + кружок) → автоматическая запись при загрузке.

Настройки перед записью

  • CPU throttling: 4x slowdown — имитация слабого процессора
  • Network throttling: Fast 3G
  • Disable JavaScript samples: для общего обзора без деталей JS

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

Верхний таймлайн

FPS:     ████████░░████████████  (зелёный = хорошо, красный = плохо)
CPU:     ██▓▓░░██████▓▓░░░░░░░  (цвета = категории)
NET:     ████░░░░░░░░░░░░░░░░░  (сетевая активность)

Цвета CPU:

Цвет Категория
Жёлтый JavaScript
Фиолетовый Layout (расчёт позиций)
Зелёный Paint (отрисовка)
Серый Idle (простой)

Flame Chart (диаграмма пламени)

─────────────────────────────────────
Task (200ms)
├── Run Microtasks
├── Event: click
│   └── handleClick (150ms)        ← ДОЛГО!
│       ├── fetchData (80ms)
│       └── processItems (70ms)
│           └── sort (50ms)        ← Узкое место
└── Recalculate Style
  • Ширина блока = время выполнения
  • Глубина = стек вызовов
  • Красный треугольник = задача > 50мс (Long Task)

Long Tasks (долгие задачи)

Задачи дольше 50мс блокируют main thread:

  • Пользователь не может кликать, скроллить
  • Анимации дёргаются
  • Ввод с задержкой

FPS и Frame Rendering

Цель: 60 FPS

60 FPS = 1000мс / 60 = 16.6мс на кадр

✅ Хорошо: кадры < 16мс (зелёные)
⚠️ Проблема: кадры 16-33мс (жёлтые, 30 FPS)
❌ Плохо: кадры > 33мс (красные, < 30 FPS)

FPS Meter (реальное время)

Ctrl+Shift+P → "Show FPS meter" — счётчик FPS в углу страницы.

Основные проблемы

Layout Thrashing

Чтение → запись → чтение → запись DOM — заставляет браузер пересчитывать layout на каждом шаге:

// ПЛОХО — layout thrashing
for (let i = 0; i < items.length; i++) {
  items[i].style.width = container.offsetWidth + "px"; // чтение + запись
}

// ХОРОШО — прочитать один раз
const width = container.offsetWidth;
for (let i = 0; i < items.length; i++) {
  items[i].style.width = width + "px";
}

Тяжёлый JavaScript

Видно как большой жёлтый блок в flame chart. Решения:

  • Разбить на мелкие задачи
  • Использовать requestAnimationFrame
  • Вынести в Web Worker

Избыточный Paint

Зелёные блоки. Включите "Paint flashing" (Ctrl+Shift+P → "Show paint flashing") — зелёные прямоугольники на странице показывают что перерисовывается.

Панель Summary

Внизу после записи — распределение времени:

Summary:
Loading:    150ms  (8%)
Scripting:  800ms  (42%)  ← JavaScript
Rendering:  300ms  (16%)  ← Layout + Style
Painting:   100ms  (5%)
System:     200ms  (11%)
Idle:       350ms  (18%)  ← Простой
Total:      1900ms

Память (обзор)

В Performance можно включить checkbox "Memory":

  • JS Heap — использование памяти JavaScript
  • Постоянный рост без спадов = утечка памяти

Частые ошибки

  • Не включать CPU throttling — на мощном компьютере проблемы не видны
  • Записывать слишком долго — 5-10 секунд достаточно
  • Игнорировать Long Tasks — красные метки = конкретные проблемы
  • Не использовать FPS meter — субъективно "нормально", а по факту 20 FPS
  • Оптимизировать без профилирования — сначала измерь, потом оптимизируй

Практика

  1. Запишите профиль загрузки любой страницы
  2. Найдите Long Tasks в flame chart
  3. Включите CPU 4x slowdown и повторите — сравните
  4. Включите FPS meter и поскролльте страницу
  5. Включите Paint Flashing и понаблюдайте что перерисовывается
  6. Посмотрите Summary — на что уходит больше всего времени

Связанные темы

Ресурсы