Как браузер превращает код в красивую страницу
Каждый раз, когда ты открываешь сайт, за доли секунды происходит маленькое чудо: невзрачный текст с тегами превращается в кнопки, картинки и анимации. Разберём, кто и как это делает.
Ты вводишь адрес сайта, нажимаешь Enter — и через секунду перед тобой ровные строчки, яркие кнопки и плавные анимации. Но то, что приходит с сервера, выглядит совсем не так красиво: это просто длинная простыня текста с угловатыми скобками. Давай заглянем под капот и посмотрим, как браузер за доли секунды превращает этот сухой код в страницу, на которую приятно смотреть.
Сначала браузер получает не страницу, а инструкцию
Когда ты заходишь на сайт, сервер присылает тебе вовсе не готовую картинку. Он присылает HTML — обычный текстовый документ, в котором словами описано, что должно быть на странице: вот заголовок, вот абзац, вот картинка, вот кнопка. Это похоже не на фотографию торта, а на рецепт торта. В рецепте нет самого торта — есть только список того, что и в каком порядке нужно сделать.
Вместе с HTML почти всегда приходят ещё двое помощников. CSS отвечает за внешность: какого цвета текст, где отступы, какой формы кнопки. А JavaScript — это уже про поведение: что произойдёт, когда ты нажмёшь, наведёшь мышку или прокрутишь вниз. Браузер должен собрать всё это вместе и аккуратно разложить на экране.
Браузер читает код и строит дерево
Первым делом браузер начинает читать HTML сверху вниз — этот процесс называют парсингом. Он разбирает текст на кусочки-теги и из каждого делает узел: заголовок становится одним узлом, абзац внутри него — вложенным, картинка внутри абзаца — ещё глубже вложенной. Так получается структура, которую называют DOM (объектная модель документа).
Проще всего представить DOM как генеалогическое древо семьи. Есть самый главный предок — корень страницы. У него есть дети: шапка, основное содержимое, подвал. У детей — свои дети: внутри шапки логотип и меню, внутри меню — отдельные пункты. Каждый элемент знает, кто его родитель и кто его потомки. Именно по этому дереву браузер потом будет ходить, чтобы понять, что и где рисовать.
Точно так же браузер разбирает и CSS — из него получается похожее дерево правил, которое называют CSSOM. В нём записано, как именно должен выглядеть каждый элемент: цвет, размер шрифта, рамки, отступы.
Два дерева сливаются в одно
Дальше происходит самое интересное. Браузер берёт дерево содержимого (DOM) и дерево стилей (CSSOM) и сливает их в одно — оно называется деревом рендеринга. В нём остаются только те элементы, которые реально видны на экране. Если что-то спрятано правилом, которое прячет элемент целиком, в это дерево оно не попадёт — зачем тратить силы на то, чего никто не увидит.
Браузер ленив в хорошем смысле: он старается не делать лишней работы и не рисовать то, что всё равно не покажется пользователю.
Можно сказать, что DOM — это список приглашённых на праздник, CSSOM — то, как каждый гость одет, а дерево рендеринга — это уже реальные люди, которые пришли и которых нужно рассадить за столами. Тех, кто не пришёл, рассаживать не надо.
Раскладка и отрисовка: считаем и рисуем
Теперь браузер знает, что показать и как это должно выглядеть, но пока не знает где именно. Наступает этап раскладки (по-английски layout). Браузер вычисляет точные координаты и размеры каждого элемента: эта кнопка будет шириной столько-то пикселей, начнётся вот здесь, а абзац под ней займёт три строки. Он работает как дизайнер с линейкой, который размечает чистый лист перед тем, как что-то на нём нарисовать.
И только в самом конце наступает отрисовка (paint): браузер закрашивает пиксели нужными цветами, рисует текст, тени, картинки и границы. Часто разные части страницы рисуются отдельными слоями, а потом их аккуратно складывают вместе — как прозрачные плёнки, наложенные одна на другую. Этот шаг называют композицией. Вот теперь на экране наконец появляется та самая красивая страница.
А почему всё это так быстро?
Самое удивительное — что вся эта цепочка проходит за доли секунды, и обычно много раз подряд. Стоит тебе нажать кнопку или прокрутить ленту, как JavaScript меняет что-то в DOM, и браузеру приходится заново пересчитывать раскладку и перерисовывать часть экрана. Хорошие разработчики специально пишут код так, чтобы этих пересчётов было поменьше — иначе сайт начнёт тормозить и дёргаться.
Если коротко, путь от кода до картинки всегда один и тот же:
- Парсинг — браузер читает HTML и CSS и строит из них деревья.
- Дерево рендеринга — деревья сливаются, остаётся только видимое.
- Раскладка — вычисляется, где и какого размера каждый элемент.
- Отрисовка и композиция — пиксели закрашиваются и складываются в готовую страницу.
Так что в следующий раз, открывая любимый сайт, вспомни: ты смотришь не на присланную картинку, а на результат маленького невидимого спектакля, который браузер разыгрывает заново каждую секунду — и всё ради того, чтобы тебе было удобно и красиво.