← Все навыки

Браузер и производительность

курс по устройству браузера и производительности для фронтендеров уровня Middle, готовящий к техническим собеседованиям. Студент научится объяснять критический путь рендеринга и разницу reflow/repaint, измерять и улучшать Core Web Vitals, оптимизировать загрузку через code splitting и кэширование и находить узкие места в DevTools вместо догадок.

6 модулей, 14 тем Middle Индивидуально с ментором

Программа

Вводный модуль

  • О курсе и как с ним работать

Диагностика: от жалобы к причине

  • Лекция 1.1. Web Vitals и два мира измерений
  • Лекция 1.2. Критический путь рендеринга
  • Лекция 1.3. Кейс «долгий LCP» и долгие задачи
  • Лекция 1.4. Рендеринг в рантайме: reflow, repaint и композитинг

HTTP-кэш и доставка статики

  • Лекция 2.1. Cache-Control и 304
  • Лекция 2.2. Стратегия доставки: хеши и immutable
  • Лекция 2.3. CDN и серверный слой кэша

Service Worker: программируемый кэш

  • Лекция 3.1. Механика и жизненный цикл
  • Лекция 3.2. Пять стратегий и маппинг по контенту

Ресурсы: бандл, картинки, подсказки браузеру

  • Лекция 4.1. Бандл: tree shaking, code splitting, анализ
  • Лекция 4.2. Картинки и шрифты
  • Лекция 4.3. Подсказки браузеру

Вопросы с собеседований

  • Вопросы с собеседований по темам курса

Что разбираем

  • Как работает браузер — рендеринг-движок, парсинг HTML/CSS, построение DOM и CSSOM, render tree, layout, paint, composite, критический путь рендеринга (critical rendering path)
  • Reflow и repaint, что их вызывает и как удешевить (transform/opacity, will-change)
  • Event loop в браузере
  • Core Web Vitals — LCP, INP, CLS, поле vs лаборатория, влияние на SEO
  • Профилирование — Lighthouse, вкладка Performance в DevTools, waterfall, RUM vs синтетика
  • Оптимизация загрузки — code splitting и динамические импорты, route-based splitting, ленивая загрузка компонентов и изображений (loading=lazy), preload/prefetch и приоритеты ресурсов
  • Кэширование и CDN — HTTP-кэш и Cache-Control, immutable-ассеты и хэши в именах файлов, стратегии инвалидации, service worker cache
  • Web Storage — localStorage, sessionStorage, cookies, IndexedDB, ограничения и безопасность
  • Сеть — клиент-серверная модель, что происходит от ввода URL до отрисовки, HTTP-методы и статус-коды, HTTPS/TLS handshake, HTTP/2 и HTTP/3

Практика

  • Пройти по шагам, что происходит от ввода example.com до первого пикселя: DNS, TCP/TLS, HTTP-ответ, парсинг, DOM/CSSOM, render tree, layout, paint
  • Написать код, вызывающий layout thrashing (чтение offsetHeight в цикле с записью стилей), и переписать его, убрав лишние reflow
  • Замерить LCP, INP и CLS страницы, диагностировать причину плохого CLS и починить (резервирование места под картинки/шрифты)
  • Прогнать Lighthouse, разобрать отчёт и составить приоритизированный план оптимизаций
  • Прочитать waterfall во вкладке Performance/Network, найти блокирующие ресурсы и цепочки критических запросов
  • Внедрить route-based code splitting через динамический import() и React.lazy, измерить эффект на размер бандла
  • Настроить ленивую загрузку изображений через loading=lazy и расставить preload для критичного шрифта, prefetch для следующего экрана
  • Настроить HTTP-кэширование: immutable-ассеты с хэшем в имени + Cache-Control, продумать инвалидацию при релизе
  • Реализовать офлайн-кэш статики через Service Worker с выбранной кэш-стратегией (cache-first / stale-while-revalidate)
  • Выбрать хранилище под задачу: настройки в localStorage, объёмный офлайн-кэш в IndexedDB, объяснить, почему токены не хранят в localStorage
  • Профилировать долгую задачу в main thread, найти long task и разбить её, чтобы улучшить INP
  • Сравнить загрузку страницы по HTTP/1.1 и HTTP/2, объяснить, что дают мультиплексирование и CDN для повторных загрузок

Как проходит обучение

  • Занятия один на один с ментором под ваш темп и пробелы
  • Материалы курса открываются в личном кабинете, практику разбираете на встречах
  • Программа собирается под цель: подготовка к собеседованию или рабочая задача