Сначала браузер строит карту страницы
Получив HTML, браузер разбирает его на элементы и связи между ними: заголовок находится внутри раздела, изображение — рядом с текстом. Из этой структуры получается дерево документа — внутренняя карта того, что должно присутствовать на странице. CSS браузер разбирает отдельно: правила стилей сообщают, например, каким элементам назначить шрифт, цвет и отступы.
Затем браузер сопоставляет правила с элементами. Одно правило может влиять сразу на множество заголовков, а более конкретное — менять оформление одного из них. Поэтому итоговый вид нельзя получить, просто читая HTML сверху вниз: нужно учесть и устройство страницы, и все подходящие к элементам стили.
От размеров — к окрашенным областям
После выбора стилей браузер вычисляет размеры и положение элементов. На этом этапе выясняется, где пройдут строки текста и сколько места займут картинки. Изменение ширины окна может изменить переносы, а вслед за ними — высоту абзацев и положение всего, что стоит ниже.
Когда расположение определено, браузер рисует содержимое: текст, фон, границы и изображения. Результат удобно представить как набор окрашенных областей, которые затем сводятся в итоговую картинку на экране. Пиксели появляются не напрямую из отдельных тегов: это результат нескольких связанных расчётов.
Почему страница может пересчитываться
Страница не всегда рисуется только один раз. Если меняется текст, стиль или размер окна, некоторые вычисления приходится повторять. Например, появление сообщения над абзацем может сдвинуть всё содержимое ниже; смена цвета у кнопки может потребовать изменить её изображение, но не обязательно заново рассчитывать размеры всей страницы.
Именно поэтому инструменты разработчика показывают HTML и CSS отдельно от того, что видит пользователь. Они помогают найти инструкцию или элемент, из-за которого получилась конкретная часть картинки, — но сам экранный результат представляет собой не исходный код, а его вычисленное и нарисованное отображение.
