Как отрисовывается страница: разбор, DOM, CSSOM, компоновка и рисование
Узнайте, что браузер делает с байтами HTML и CSS: создаёт DOM и CSSOM, рассчитывает компоновку и рисует пиксели.
«Как отрисовывается страница: разбор, DOM, CSSOM, компоновка и рисование» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
От байтов к пикселям
Когда браузер получает от сервера байты HTML, многоэтапный процесс преобразует их в пиксели, которые Вы видите на экране. Понимание этого процесса помогает оптимизировать производительность и разобраться в причинах визуальных дефектов.
Шаг 1 — разбор HTML: построение DOM
Анализатор HTML в браузере читает поток байтов и строит объектную модель документа (DOM) — дерево узлов, представляющих каждый элемент HTML, текстовый узел и комментарий в документе.
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'Шаг 2 — разбор CSS: построение CSSOM
Одновременно байты CSS разбираются в объектную модель CSS (CSSOM) — дерево правил стилей. CSS блокирует отображение: браузер не выводит пиксели на экран, пока не вычислит стили для видимого содержимого.
Шаг 3 — дерево отображения
Браузер объединяет DOM и CSSOM в дерево отображения. В него входят только видимые узлы — элементы с display:none исключаются. Каждый узел дерева отображения хранит вычисленный стиль, с которым он будет отрисован.
Шаг 4 — компоновка (перекомпоновка)
Компоновка вычисляет точное положение и размер каждого узла в дереве отображения, используя блочную модель и ширину области просмотра. Этот процесс также называют перекомпоновкой. Компоновка требует значительных ресурсов, поэтому не следует многократно запускать её в JavaScript.
Шаг 5 — отрисовка
Отрисовка преобразует результат компоновки в настоящие пиксели на экране. Браузер послойно рисует фон, границы, текст и изображения. Некоторые элементы создают собственные слои композитинга для отрисовки с ускорением GPU.
Шаг 6 — композитинг
Компоновщик браузера объединяет отрисованные слои в итоговый кадр и отправляет его на экран. Использование transform и opacity для анимаций позволяет компоновщику выполнять их на GPU, полностью пропуская компоновку и отрисовку.
Что блокирует отображение?
CSS внутри <head> блокирует отображение. JavaScript по умолчанию блокирует и разбор документа, и отображение. Используйте defer в тегах сценариев, чтобы разбирать JS после HTML, не блокируя отображение.
<script src="app.js" defer></script>Критический путь отображения
Критический путь отображения — это последовательность действий от получения байтов HTML до отображения первого пикселя. Его оптимизация заключается в уменьшении количества и размера ресурсов, блокирующих отображение, и в откладывании некритичных JS и CSS.
Перекомпоновка и перерисовка
Изменение свойств компоновки (ширины, отступа, положения) запускает перекомпоновку и перерисовку. Изменение только визуальных свойств (цвета, фона) запускает только перерисовку. Изменение преобразования или непрозрачности запускает только композитинг. Предпочитайте наименее затратную операцию.
DevTools: просмотр временной диаграммы отрисовки
В Chrome DevTools откройте панель Performance, запишите загрузку страницы и изучите временную диаграмму. Вы увидите зелёные события отрисовки и сможете определить, какие элементы вызывают ресурсоёмкую компоновку.
Быстрая проверка
Какой шаг вычисляет точный размер и положение каждого элемента на странице?
Итоги: процесс отображения
HTML → DOM → CSSOM → дерево отображения → компоновка → отрисовка → композитинг. Каждый шаг передаёт результат следующему. Оптимизация критического пути отображения означает сокращение этого процесса, чтобы первое видимое содержимое появилось как можно быстрее.
Часто задаваемые вопросы
Урок «Как отрисовывается страница: разбор, DOM, CSSOM, компоновка и рисование» бесплатный?
Да — полный текст урока «Как отрисовывается страница: разбор, DOM, CSSOM, компоновка и рисование» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Как отрисовывается страница: разбор, DOM, CSSOM, компоновка и рисование»?
Узнайте, что браузер делает с байтами HTML и CSS: создаёт DOM и CSSOM, рассчитывает компоновку и рисует пиксели. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Как отрисовывается страница: разбор, DOM, CSSOM, компоновка и рисование»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- DNS и HTTP в браузерах: жизненный цикл запроса
- HTML, CSS и JavaScript: задачи каждого слоя
- Как отрисовывается страница: разбор, DOM, CSSOM, компоновка и рисование
- Инструменты разработчика: открытие и использование DevTools