Как браузер превращает HTML в пиксели
Вопрос
Расскажи, что делает браузер, чтобы превратить полученный HTML в картинку на экране.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Парсинг HTML в DOM по мере загрузки, CSS в CSSOM
Вычисление стилей, `display: none` в рендер не попадает
Layout считает геометрию, paint создаёт команды рисования, composite складывает слои
CSS блокирует рендер, синхронный скрипт блокирует парсер
`defer`/`async` и preload scanner ускоряют загрузку
Последующие изменения запускают конвейер с layout, paint или только composite
Что могут спросить следом
- Почему скрипт ждёт загрузки CSS, если перед ним стоит
link? - Что такое слой и когда браузер его создаёт?
- Как ускорить первую отрисовку?
Разбор
Браузер получает HTML потоком и сразу начинает парсить его в DOM. Встретив стили, он строит CSSOM. Обычный скрипт останавливает парсер: его надо скачать и выполнить, ведь он может менять DOM. Чтобы простаивание не было полным, preload scanner в это время заранее качает ресурсы, найденные дальше в разметке. Когда есть DOM и CSSOM, браузер вычисляет итоговые стили каждого элемента, затем layout: размеры и координаты блоков. Потом paint: фоны, текст, тени превращаются в списки команд рисования, по слоям. И composite: поток композитора складывает слои в кадр, часто с помощью GPU. Пока CSS из head не загружен, рендер не начнётся, поэтому важно держать критичный CSS маленьким, а скрипты подключать с defer. После загрузки каждое изменение снова запускает часть конвейера: геометрия запускает layout, цвета только paint, а transform и opacity обходятся композитингом.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.