Перейти к основному содержимому

Рендеринг веб страницы

Раздел для системного понимания производительности и UX на уровне браузера.

Быстрый переход к обучению​

  1. Рендеринг веб-страницы — учебный модуль
  2. Все учебные модули

Что нужно знать​

  1. Пайплайн рендеринга: parse -> style -> layout -> paint -> composite.
  2. Блокирующие ресурсы и влияние script/css на первый рендер.
  3. Гидратация и причины hydration mismatch.
  4. Разница CSR/SSR/SSG/ISR и критерии выбора.
  5. Core Web Vitals: LCP, INP, CLS и подходы к улучшению.

Что уметь объяснить на собеседовании​

  1. Где возникает layout thrashing и как его избегать.
  2. Почему страница визуально готова, но интерактивность запаздывает.
  3. Как выбирать рендеринг-стратегию под тип страницы и трафик.
  4. Как связать bundle size с LCP/INP.
  5. Какие оптимизации реально измерять, а какие преждевременны.

Грейд-фокус​

  1. Junior: критический путь рендера, блокирующие ресурсы, основы Lighthouse.
  2. Middle: системная диагностика метрик, hydration-баги, приоритизация optimizations.
  3. Senior: производительность как продуктовая стратегия: бюджеты, guardrails, release-control.

Глубокие кейсы собеседования​

  1. LCP высокий на мобильном трафике: проблема часто в тяжелом hero-изображении и поздней загрузке критического CSS. Сильный ответ: оптимизировать размер/формат, preconnect/preload, разделить критический и некритичный CSS.

  2. INP деградировал после релиза: частая причина - тяжелые синхронные обработчики и массовые перерисовки. Сильный ответ: профилирование long tasks, дробление работы, отложенные вычисления.

  3. Hydration mismatch в SSR: серверный и клиентский вывод различаются (дата, random, доступ к window). Сильный ответ: стабилизировать initial render и изолировать client-only логику.

Практический минимум​

  1. Замерить страницу в Lighthouse и выделить 3 главных bottleneck.
  2. Убрать один блокирующий ресурс и сравнить результат до/после.
  3. Проверить hydration-ошибку на SSR-странице и устранить причину.
  4. Сделать краткий perf-отчет: проблема -> гипотеза -> изменение -> результат.

Типовые ловушки​

  1. Оптимизация на глаз без метрик.
  2. Игнорирование мобильного профиля сети/CPU.
  3. Путаница между performance и SEO как будто это одно и то же.
  4. Фокус на bundle-size без учета runtime-cost.

Self-review перед собеседованием​

  1. Я могу назвать главный bottleneck страницы и как его проверил.
  2. Я могу объяснить разницу LCP, INP, CLS без теоретической воды.
  3. Я умею связать оптимизацию с влиянием на продуктовую метрику.
  4. Я могу описать, как ловил hydration mismatch на практике.

Связанные материалы​

  1. JavaScript
  2. React
  3. Middle JavaScript и React

Архивный монолит​

Полный старый материал: Рендеринг веб-страницы (архив)