Браузер и фронтенд-рантайм
Render pipeline: шесть стадий от байтов до пикселей
Вы нажали Enter на URL. Байты пошли. Где-то между первым пакетом и моментом, когда кнопка становится кликабельной на экране, браузер прогнал шестистадийный пайплайн — и большинство страниц тратят неправильное количество времени на неправильной стадии. Бюджет кадра — 16.67 мс при 60 fps.
Шесть стадий
Браузер превращает HTML + CSS + JS в пиксели ровно в шесть шагов, всегда в одном порядке:
| Стадия | Что делает |
|---|---|
| Парсинг HTML | Читает поток байтов и строит DOM-дерево |
| Построение CSSOM | Читает стилевые файлы и строит CSS Object Model |
| Стили | Матчит CSS-правила к DOM-узлам, разрешает каскад |
| Компоновка | Измеряет каждую коробку — позиции и размеры |
| Отрисовка | Заполняет пиксели в bitmap-слои |
| Композитинг | Собирает слои на GPU и отправляет кадр на экран |
Работу делают два потока. Главный поток владеет парсингом HTML, построением CSSOM, пересчётом стилей, компоновкой и подготовкой отрисовки. Поток композитора собирает GPU-дружественные слои и отправляет их на GPU.
| Стадия | Поток | Метка в DevTools |
|---|---|---|
| Парсинг HTML | Главный | Parse HTML |
| Построение CSSOM | Главный | Parse Stylesheet |
| Стили | Главный | Recalculate Style |
| Компоновка | Главный | Layout |
| Отрисовка | Главный | Paint |
| Композитинг | Композитор | Composite Layers |
Метафора кухни
Браузер — кухня ресторана. Парсинг HTML — это чтение чека заказа. CSSOM — чтение книги рецептов. Стили — сопоставление ингредиентов с блюдами. Компоновка — измерение тарелки и расстановка еды на ней. Отрисовка — собственно готовка, жар и цвет. Композитинг — официант, который забирает шесть тарелок сразу и несёт их к столу.
Если хоть одна станция тормозит, весь стол ждёт.
Бюджет кадра в 16.67 мс
Вы держите 60 кадров в секунду только если вся кухня успевает за 16.67 мс. Пропустили кадр — пользователь видит заикание: список при скролле дёргается, кнопка ощущается липкой, график отстаёт от мыши.
Лечение почти никогда не «ускорить JS» — а «не давать кухне переделывать компоновку, когда можно было просто переставить тарелки».
Почему это работает
Мониторы 120 Hz (iPhone Pro, флагманские Pixel) режут бюджет вдвое до 8.33 мс на кадр. Дисплеи с переменной частотой обновления (LTPO у Android) работают от 1 Hz до 120 Hz, бюджет меняется динамически. Если целиться в 60 fps — 90 Hz дисплеи будут в безопасности, но для 120 Hz нужны ещё более жёсткие бюджеты.
Кадр для чтения вслух. Антон открывает карточку профиля. Дима комментирует кухню: «0.5 мс парсинг div аватарки, 0.4 мс сборка стилей, 0.2 мс мэтчинг селекторов, 3 мс измерение коробок — стоп, картинка не успела загрузиться, перемеряем, ещё 2 мс — 1.5 мс отрисовка, 0.5 мс композитинг. Кадр — 8.1 мс. Нормально. А что если пользователь скроллит и мы запускаем компоновку пятьдесят раз в секунду? Это 100 мс в секунду только на компоновку, шесть пропущенных кадров, скролл ощущается тяжёлым».
Браузер прогоняет эти шесть стадий в фиксированном порядке. Расставьте их в правильную последовательность.
- 1 Парсинг HTML → DOM-дерево
- 2 Построение CSSOM из стилевых файлов
- 3 Стили: мэтчинг селекторов, разрешение каскада
- 4 Компоновка: измерение позиций и размеров коробок
- 5 Отрисовка: заполнение пикселей в bitmap-слои
- 6 Композитинг: сборка слоёв на GPU
Какой поток делает большую часть работы в пайплайне рендера?
Страница держит 60 fps. Какой бюджет на кадр?
Метафора браузера-как-кухни: парсинг HTML — чтение чека заказа; построение CSSOM — чтение книги рецептов; стили — сопоставление ингредиентов с блюдами; компоновка — измерение тарелки; отрисовка — готовка. Кто такой официант, который забирает шесть тарелок сразу и несёт их к столу?
Страница должна держать 60 кадров в секунду. Сколько миллисекунд у браузера на один кадр?
- Весь кадр
- 16.67 мс
- Оверхед браузера (rAF, ввод, GC)
- ~6 мс
- Бюджет JS + компоновки + отрисовки
- ~10 мс
- Composite-only путь
- ~0.5 мс / кадр
- 01Назовите шесть стадий render pipeline по порядку.
- 02Какой поток владеет стадиями 1–5? Какой — стадией 6?
- 03Почему бюджет кадра при 60 fps — именно 16.67 мс?
Браузер рендерит страницу через шесть фиксированных стадий: парсинг HTML, построение CSSOM, стили, компоновка, отрисовка и композитинг. Главный поток владеет первыми пятью; поток композитора — шестой. При 60 fps полный бюджет кадра — 16.67 мс; после оверхеда браузера приложению остаётся примерно 10 мс. Метафора кухни объясняет, почему композитинг дёшев — официант переносит готовые тарелки без повторной готовки. Уроки 2–4 этого юнита разбирают, что каждая стадия стоит по-настоящему и как снизить эти расходы.
встречается в143
- Почему GraphQL получает N+1junior
- Механика DataLoader: батчинг на границе тикаmiddle
- Контракты batch-функции: порядок, формы, ошибкиmiddle
- Federation и lookahead: батчинг за пределами DataLoadermiddle
- Защита сложности запросов: depth, cost, persisted queriesmiddle
- Senior GraphQL API: scheduling-контракт, изоляция арендаторов, наблюдаемостьsenior
- Зачем идемпотентность: безопасные retryjunior
- Серверный state machine: четыре состояния idempotency keymiddle
- Outbox и inbox: effectively-once через dual-write границуmiddle
- Конкурентность и архитектура кеша для идемпотентности на масштабеsenior
- Наблюдаемость, production-инциденты и дизайн для глобального масштабаsenior
- Что такое cache stampede и почему он делает всё хужеjunior
- Лок и single-flight: ограничение параллельных rebuildmiddle
- XFetch: вероятностное раннее истечение без координацииmiddle
- Stale-while-revalidate и CDN request coalescingmiddle
- Детектирование stampede и дизайн TTL для продакшенаmiddle
- Метастабильный сбой, fencing-токены и production-постмортемыsenior
- Что такое отношение: таблицы, строки, ключи и ограниченияjunior
- Ограничения, ключи и типы данных Postgresmiddle
- Нормальные формы, денормализация и почему схемы «прилипают»middle
- JSONB, массивы и когда side table побеждаетmiddle
- Heap-хранилище, TOAST и выравнивание колонокsenior
- Целостность схемы: deferral, версионирование и сбои в продакшнеsenior
- Реляционная модель vs документные, wide-column, граф и key-valuesenior
- Index-only scan, Visibility Map и INCLUDEsenior
- Типичные сбои в продакшне и аудит индексовsenior
- pg_statistic, ANALYZE и производственная наблюдаемостьmiddle
- Производственные режимы отказа и стабильность плановsenior
- MVCC: как Postgres раздаёт согласованные снимкиjunior
- Заголовок tuple и механика снимковmiddle
- HOT-обновления и уровни изоляцииmiddle
- VACUUM, bloat и autovacuummiddle
- CLOG, XID wraparound и MultiXactsenior
- SSI и production-тюнинг autovacuumsenior
- Реальные провалы MVCC, deployment-паттерны и распределённые снимкиsenior
- Connection pool: зачем амортизировать стоимость backend Postgresjunior
- Режимы PgBouncer: session, transaction и statementmiddle
- Размер пула: формула (ядра × 2) + шпинделей и двухуровневый стекmiddle
- Исчерпание пула и idle-in-transaction: сценарий отказа в 3 ночиmiddle
- Миграция на transaction mode: план развёртывания и prepared statements в PgBouncer 1.21middle
- Процессная модель Postgres и почему увеличение max_connections снижает производительностьsenior
- Ландшафт пулеров 2026, serverless connection storms и полная таксономия отказовsenior
- Что такое миграция схемы и почему она заменяет ad-hoc DDLjunior
- ADD COLUMN: мгновенно в PG 11+ против перезаписи в старом Postgresjunior
- Режим отказа очереди блокировок: почему мгновенный DDL может заморозить базуmiddle
- Безопасные DDL-паттерны: NOT VALID, CONCURRENTLY и исправления небезопасных операцийmiddle
- Expand-contract: нулевой простой для ломающих изменений схемыmiddle
- Advisory-блокировки, инструменты миграций и координация деплояsenior
- Таксономия сбоев миграций и дисциплина продакшнаsenior
- Зачем нужно шардирование: потолок одного Postgresjunior
- Выбор ключа шарда: стратегии hash, range, list и directorymiddle
- Партиционирование против шардирования: одно слово, два разных понятияmiddle
- Ко-локация и Citus: инвариант, делающий шардирование пригодным к использованиюmiddle
- Режим отказа hot shard: обнаружение, изоляция и долгосрочная политикаmiddle
- Schema-based шардирование и альтернативы мультиарендностиsenior
- Онлайн-решардинг, 2PC и операционная стоимость шардированияsenior
- Семь актов: от CREATE TABLE до Citusjunior
- Акты 1–3 в глубину: схема, индексы и статистика планировщикаmiddle
- Акты 4–6 в глубину: MVCC bloat, connection pooling и безопасные миграцииmiddle
- Акт 7 в глубину: шардинг, co-location и семиуровневый каскад трейдоффовmiddle
- Наблюдаемость, антипаттерны и производственный триажsenior
- Роли Raft, term и почему majority-кворум предотвращает split brainjunior
- Как Raft реплицирует log entry и решает, что его безопасно коммититьmiddle
- Выборы лидера в Raft: таймауты, правила голосования и четыре свойства безопасностиmiddle
- Raft в реальном мире: partition, медленный диск и клиентская маршрутизацияmiddle
- Расширения Raft: pre-vote, learner, snapshot и линеаризуемые чтенияsenior
- Raft в production: membership change, Multi-Raft и observabilitysenior
- Где происходит data fetching — и почему это решает LCPjunior
- Fetch waterfall''''ы — диагностика и лечение через Promise.allmiddle
- React Server Components и Suspense streamingmiddle
- Клиентский кэш: TanStack Query, SWR и stale-while-revalidatemiddle
- LCP, prefetch и race conditions в интерактивном fetchingmiddle
- Senior internals: RSC payload, слои кэша и production паденияsenior
- Трёхстороннее рукопожатие TCPjunior
- Номера последовательности и состояние соединенияmiddle
- DNS: что делает и зачем существуетjunior
- Обход резолвера: перенаправления, типы записей и gluemiddle
- TTL, кеширование и распространение DNSmiddle
- Рукопожатие за 1 RTT: key share и ECDHEmiddle
- Возобновление сессии и 0-RTTmiddle
- WebSocket: HTTP-апгрейд до постоянного соединенияjunior
- Формат WebSocket-фрейма: opcodes, маскирование, фрагментацияmiddle
- Backpressure в WebSocket: когда клиенты не успеваютmiddle
- Реконнект: jittered backoff, thundering herd, восстановление сообщенийsenior
- WebSocket в масштабе: HTTP/2 мультиплексирование, permessage-deflate, C10Msenior
- WebSocket в production: прокси, безопасность и распределённая архитектураsenior
- Что делают обратные проксиjunior
- Health checks, connection draining и slow startmiddle
- Session affinity, consistent hashing и правильное решениеmiddle
- Retry-бури, circuit breakers и load sheddingsenior
- Устойчивая архитектура LB: anycast, zone-aware маршрутизация и observabilitysenior
- Почему QUIC, а не TCP+TLSjunior
- Connection ID и миграция сетиmiddle
- Возобновление 0-RTT и шифрование пакетовsenior
- DDoS: что это и почему работаетjunior
- Атаки усиления и истощение состоянияmiddle
- Ограничение скорости: алгоритмы и архитектураmiddle
- WAF, межсетевые экраны, mTLS и HSTSmiddle
- Отравление DNS-кэша и BGP-перехватsenior
- Эшелонированная защита и экономика атакsenior
- DNS, TCP, TLS по очереди: куда уходят миллисекундыmiddle
- Перехват прокси и шлюзы безопасности: rate limiter, WAF, mTLSmiddle
- Альтернативные пути: QUIC 0-RTT, WebSocket upgrade, миграция соединенияmiddle
- Наблюдаемость: распределённые трейсы, USE/RED и семплированиеsenior
- Устойчивость: каскадные повторы, circuit breakers и error budgetsenior
- Что такое три сигнала: метрики, логи, трейсыjunior
- Зачем нужны структурные логи: дневник против таблицыjunior
- Схема продакшн-лога: поля, которые несёт каждая строкаmiddle
- PII-редакция и log injectionsenior
- OTel Logs Data Model и audit-логи как подсистемаsenior
- SLI, SLO и error budget: надёжность в числахjunior
- Error budget policy, latency SLO и составные journeysmiddle
- Продакшн-отказы SLO, самонаблюдаемость, безопасность и общая картинаsenior
- Петля инцидента: от пейджера до постмортема до предотвращенияmiddle
- Cache lines и false sharing: когда параллелизм замедляет кодmiddle
- SIMD и data layout: AoS vs SoA и разница в 4–8xmiddle
- Cache-oblivious алгоритмы, PGO и production failuressenior
- GC в production: наблюдаемость, безопасность, edge cases и управление флотомsenior
- Batching: амортизируй фиксированную цену каждой операцииjunior
- Окно батчинга: размер и время ожиданияmiddle
- Batching в Kafka и Postgresmiddle
- io_uring и наблюдаемость пакетированияmiddle
- От Nagle до io_uring: эволюция пакетированияmiddle
- Backpressure, изоляция сбоев и безопасность батчей в продакшенеsenior
- CI enforcement и RUM: делаем бюджеты рабочимиmiddle
- V8 JIT-пайплайн, HTTP-приоритеты и безопасность bundlesenior
- Цикл performance: дисциплина, а не проектjunior
- Классификация и исправление: сопоставление family bottleneck с методамиmiddle
- Observability-стек и CI gates: ловить регрессии до выпускаmiddle
- От инцидента к enforcement: SLO burn до верифицированного исправления за 35 минутmiddle
- Культура, экономика и масштаб performancesenior
- At-most-once, at-least-once, exactly-once: три контракта доставкиjunior
- Три ножки сбоя — где реально происходят дубликаты и потериmiddle
- Consumer-side dedup: самый дешёвый путь к exactly-once processingmiddle
- Kafka exactly-once semantics: idempotent producer и транзакцииmiddle
- SQS visibility timeout, DLQ и outbox patternmiddle
- Exactly-once в production: impossibility-доказательство, гибридные паттерны и реальные инцидентыsenior
- Что такое OAuth и почему пароли — не ответjunior
- Authorization code flow с PKCEmiddle
- Валидация ID-токена и управление JWKS-кешемmiddle
- Ротация refresh-токенов и scope-based least privilegemiddle
- Sender-constrained токены: DPoP и mTLSsenior
- OAuth в production: audience атаки, observability и реальные провалыsenior