Производительность рендеринга
Общие (не React-специфичные) вопросы производительности: главный поток, отрисовка, метрики. React-специфичную оптимизацию см. в React: Performance.
Как выявить причины тормозов в интерфейсе?
Подход: сначала понять где теряется время (главный поток, сеть, рендер, композитинг), затем что его занимает.
| Этап | Что смотреть | Типичные причины |
|---|---|---|
| Субъективно | Лаг при вводе, скролле, открытии модалки | Long tasks на main thread, лишние ре-рендеры, тяжёлый layout |
| Chrome Performance | Запись сессии → Main thread, Long Tasks (>50 ms), скриптинг vs Rendering vs Painting | Тяжёлый JS, частые reflow, большие списки без виртуализации |
| Lighthouse / Web Vitals | LCP, INP, CLS | Медленный LCP — ресурсы/сервер; плохой INP — обработчики и main thread |
| Сеть | Network: waterfall, TTFB, размер чанков | Крупный бандл, нет code splitting, медленный API |
Практический чеклист:
- Воспроизвести сценарий с включённым Performance — найти длинные жёлтые блоки (скрипт) и фиолетовые (layout/paint).
- Проверить Layout thrashing: чтение геометрии (
getBoundingClientRect,offsetWidth) в цикле после записи в DOM. - Для списков — виртуализация; для тяжёлой работы — воркеры, разбиение задач.
Итог для собеса: тормоза чаще всего дают main thread (JS + layout/paint) и крупные/неоптимальные обновления DOM — диагностика = профилировщик + понимание, что именно блокирует кадр или ввод.
Основные метрики Web Vitals
| Метрика | Что измеряет | Хорошее значение |
|---|---|---|
| LCP (Largest Contentful Paint) | Время отрисовки крупнейшего элемента | ≤ 2.5 с |
| INP (Interaction to Next Paint) | Отзывчивость на действия пользователя | ≤ 200 мс |
| CLS (Cumulative Layout Shift) | Визуальная стабильность (сдвиги layout) | ≤ 0.1 |
- Плохой LCP — медленный сервер/ресурсы, большие изображения, рендер-блокирующий CSS/JS.
- Плохой INP — тяжёлые обработчики, длинные задачи на main thread.
- Плохой CLS — изображения/реклама без заданных размеров, поздняя вставка контента.
Чем отличаются атрибуты async и defer у <script>?
Оба позволяют загружать скрипт, не блокируя парсинг HTML, но по-разному влияют на порядок и момент выполнения.
async | defer | |
|---|---|---|
| Загрузка | параллельно с парсингом | параллельно с парсингом |
| Момент выполнения | сразу как скрипт загрузился (парсинг приостанавливается) | после полного парсинга HTML, перед DOMContentLoaded |
| Порядок выполнения | не гарантирован (кто раньше загрузился) | в порядке подключения в разметке |
async— для независимых скриптов (аналитика, счётчики), где порядок не важен.defer— когда важен порядок выполнения и доступность готового DOM.
См. также
- browser-internals — reflow, repaint, compositing
- React: Performance — оптимизация React-приложений
- webpack — разделение бандла