browser
Браузер и фронтенд-рантайм
Что на самом деле происходит внутри браузера, когда страница загружается и работает: как планируется JavaScript, как рисуются пиксели и где прячутся тормоза.
Начать трек → 00
С нуля
Перед senior-материалом: что вообще такое браузерный рантайм и горстка слов, которые остальной трек считает уже знакомыми. 01
Event loop
Один поток, две очереди, один шаг рендеринга — и всё, что происходит когда любой из них стопорится. 01 Event loop: один поток, три очереди 12 мин 02 Задачи, микрозадачи и scheduler.yield() 16 мин 03 Точность таймеров, троттлинг и фоновая работа 14 мин 04 Голодание микрозадач, длинные задачи и LoAF 16 мин 05 Event loop Node.js: фазы, nextTick и задержка цикла 14 мин 06 React, Vue и наблюдаемость INP в продакшене 15 мин 07 Event loop: тест с выбором ответа 13 мин 08 Event loop: тест на припоминание 14 мин 09 Event loop: предскажи вывод 14 мин 10 Event loop: вытащи взаимодействие из INP-ада 240 мин
02
Пайплайн рендеринга
Шесть стадий, два потока, один бюджет 16.67 мс — как байты становятся пикселями и что разрушает бюджет. 01 Render pipeline: шесть стадий от байтов до пикселей 10 мин 02 Цена стадий и модель процесса рендерера 14 мин 03 Инвалидация, dirty-биты и contain 14 мин 04 Слои композитора: продвижение, перекрытие и память GPU 14 мин 05 Флейм-стрип DevTools и жизненный цикл кадра 16 мин 06 Layout thrash: форсированная синхронная компоновка 14 мин 07 BeginMainFrame, анимации на потоке compositor и память GPU 14 мин 08 Observability в проде: LoAF, INP и полная поверхность атаки 18 мин 09 Render pipeline: тест с выбором ответа 13 мин 10 Render pipeline: тест на свободное вспоминание 14 мин 11 Render pipeline: чтение кода и трейсов 14 мин 12 Render pipeline: спасение тормозящего списка 240 мин
03
Внутренности V8
Четыре JIT-уровня, hidden classes, inline caches, Orinoco GC и deopt-loop — механизмы, делающие один и тот же JS быстрее или медленнее в 100 раз. 01 Что такое V8 и почему производительность различается в 100 раз 10 мин 02 Четырёхуровневый JIT-конвейер V8 и профилированная тиеризация 14 мин 03 Hidden classes, деревья переходов и расположение в памяти 14 мин 04 Inline caches, состояния IC и деоптимизация 15 мин 05 Orinoco GC: параллельный scavenger, конкурентная разметка и барьеры записи 14 мин 06 Спекулятивный движок TurboFan и ловушка deopt-loop 18 мин 07 V8 в production: Isolates, сжатие указателей и реальные аварии 18 мин 08 Внутренности V8: тест с множественным выбором 13 мин 09 Внутренности V8: тест с краткими ответами 14 мин 10 Внутренности V8: чтение кода и трасс 14 мин 11 Внутренности V8: охота на deopt и megamorphic IC 240 мин
04
Воркеры
Вычисления вне главного потока, сетевой прокси и разделяемая память — три воркер-примитива и архитектурные ошибки, которые они не могут решить. 01 Что такое воркеры и зачем они нужны 10 мин 02 Механика web workers: dedicated, shared и OffscreenCanvas 14 мин 03 Structured clone и transferables 12 мин 04 Жизненный цикл service worker и стратегии кеширования 15 мин 05 SharedArrayBuffer, Atomics и cross-origin isolation 18 мин 06 Граничные случаи service worker: version skew, долговременность и ловушка навигации 16 мин 07 Пулы воркеров, Comlink и наблюдаемость в продакшене 16 мин 08 Воркеры: тест с выбором ответа 13 мин 09 Воркеры: тест на свободное припоминание 14 мин 10 Воркеры: чтение кода и сниппетов 14 мин 11 Воркеры: собери отзывчивый конвейер выноса работы 240 мин
05
React fiber-реконсилер
Fiber — JS-объект, чьё связно-списочное дерево позволяет React приостанавливать, возобновлять и приоритизировать рендеринг — а механизм bailout удерживает большие UI быстрыми. 01 Что делает реконсилер: render vs commit 10 мин 02 Объект fiber и дерево с двойной буферизацией 12 мин 03 Чистота фазы render и подшаги фазы commit 13 мин 04 Реконсиляция: эвристики диффа и ловушка ключей 14 мин 05 Приоритетные lanes, time-slicing и useTransition 14 мин 06 Bailout, мемоизация и tearing 16 мин 07 React Profiler, компилятор и продакшн-наблюдаемость 14 мин 08 React fiber: тест с выбором ответа 13 мин 09 React fiber: свободное припоминание 14 мин 10 React fiber: чтение кода 14 мин 11 React fiber: усмирить шторм перерендеров 240 мин
06
Стратегии рендеринга: SSR, SSG, ISR, streaming, RSC — и цена гидратации
SSG рендерит один раз на билде; SSR — на запрос; ISR обновляется по расписанию; streaming сбрасывает оболочку первой. Гидратация — отдельная ~2× цена сделать этот HTML интерактивным — RSC и острова сокращают, что нужно гидрировать. 01 Стратегии рендеринга: SSG, SSR, ISR, streaming и гидратация 12 мин 02 SSG, SSR, ISR, streaming и RSC — как работает каждая стратегия 18 мин 03 Цена гидратации: selective, progressive, острова, resumability 16 мин 04 Hydration mismatch: причины, обнаружение и правило детерминизма 18 мин 05 RSC, стратегия на маршрут и production-наблюдаемость 20 мин 06 Стратегии рендеринга: тест с множественным выбором 13 мин 07 Стратегии рендеринга: тест на свободное воспроизведение 14 мин 08 Стратегии рендеринга: чтение кода и конфигов 14 мин 09 Стратегии рендеринга: per-route аудит рендеринга 240 мин
07
Core Web Vitals: LCP, INP и CLS
Три полевые метрики, по которым Google оценивает страницы — быстро ли появилось (LCP), отвечает ли (INP), стоит ли на месте (CLS)? 01 Core Web Vitals: что измеряют LCP, INP и CLS 10 мин 02 LCP: четыре фазы, одна доминирующая стоимость 14 мин 03 INP: input delay, processing, presentation 14 мин 04 CLS: почему происходят сдвиги лейаута и как их остановить 12 мин 05 Lab vs field: почему они расходятся и как использовать каждый 12 мин 06 Трейдоффы метрик, RUM-атрибуция и цикл CI+поле 16 мин 07 Core Web Vitals: тест с выбором ответа 13 мин 08 Core Web Vitals: тест на припоминание 14 мин 09 Core Web Vitals: чтение кода и трейсов 14 мин 10 Core Web Vitals: почини проваленную страницу статьи 240 мин
08
Всё вместе
Загрузка страницы — эстафета через сеть, парсинг, отрисовку и гидратацию — завершающий раздел трассирует все восемь слоёв, называет пять мест, где производство стабильно ломается, и даёт трёхходовую дисциплину для диагностики и исправления каждого из них. 01 Общая картина: от URL до LCP до INP как эстафета 10 мин 02 Восемь слоёв трассировки: от service worker до второй навигации 18 мин 03 Пять канонических поломок: где производство стабильно ломается 22 мин 04 Метод трёх треков: чтение трасс и построение системы мониторинга 20 мин 05 Всё вместе: тест с выбором ответа 14 мин 06 Всё вместе: тест на свободное воспроизведение 14 мин 07 Всё вместе: чтение кода и trace 14 мин 08 Всё вместе: диагностируй и почини дёрганую страницу end-to-end 240 мин
Проекты по этому треку
Guided-проекты, которые закрепляют изученное здесь.
Совместные курсоры
Показать живой курсор и выделение каждого подключённого пользователя в общем документе, без конфликтов, через WebSocket.
Палитра команд
Палитра команд ⌘K с нечётким ранжированием, асинхронными источниками действий и полным клавиатурным управлением (стрелки, Enter, Escape, области видимости) — интерактивный слой, который нужен каждому профессиональному инструменту.
Офлайн-синхронизация PWA
Notes PWA с офлайн-приоритетом: локальная очередь записей (IndexedDB), которая синхронизируется при переподключении через last-writer-wins, service worker для кеширования ресурсов и background sync для пропущенных записей.
Личная страница-портфолио
Собери одностраничный сайт о себе на чистом HTML, CSS и капле JavaScript — без фреймворка, без сборки, просто файлы, которые открываются в браузере. В итоге у тебя будет что показать, и ты по-настоящему поймёшь каждую строчку, потому что написал её сам.
Виртуальная таблица данных
Отрисуй и плавно прокручивай 100 тыс. строк на 60fps с windowing-виртуализацией, залипающими заголовками и полной клавиатурной навигацией — без библиотек, только математика.
Архитектура фронтенда
Как устроить настоящее фронтенд-приложение: где хранить данные, как их загружать и как не дать растущему коду превратиться в кашу.