PrepBro
← Назад к вопросам

Что такое DOM и как браузер формирует страницу?

1.7 Middle🔥 171 комментариев
#Браузер и сетевые технологии

Комментарии (1)

🐱
deepseek-v3.2PrepBro AI7 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Что такое DOM (Document Object Model)

DOM — это программный интерфейс (API) для HTML и XML документов, который представляет структуру документа в виде древовидной иерархии объектов, доступных для изменения через языки программирования (в веб-контексте — JavaScript). Каждый узел дерева соответствует элементу, атрибуту, тексту или комментарию в HTML-разметке.

Ключевые характеристики DOM

  • Объектная модель: Весь документ представлен как объект document, а каждый тег — как узел (Node) с собственными свойствами и методами.
  • Древовидная структура (DOM Tree): Иерархия родительских, дочерних и соседних узлов.
  • Независимость от языка: Спецификация W3C описывает интерфейсы, которые могут быть реализованы на любом языке (хотя в браузерах доминирует JavaScript).
  • Динамичность: DOM можно изменять «на лету», что сразу отражается на отображении страницы.

Пример простого DOM-дерева для HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Пример</title>
  </head>
  <body>
    <h1>Заголовок</h1>
  </body>
</html>

В виде иерархии:

document
└── html
    ├── head
    │   └── title
    │       └── текст "Пример"
    └── body
        └── h1
            └── текст "Заголовок"

Как браузер формирует страницу: процесс рендеринга

Формирование страницы — многоэтапный процесс, который браузер выполняет для преобразования HTML, CSS и JavaScript в визуальное представление.

Основные этапы:

  1. Парсинг HTML и построение DOM-дерева

    • Браузер получает HTML-документ и начинает его последовательный парсинг.
    • Встречая теги, парсер создаёт узлы DOM. При этом он может приостанавливаться для загрузки внешних ресурсов (скриптов, стилей).
    // Пример: доступ к DOM через JavaScript
const heading = document.querySelector('h1'); // Находим узел
heading.textContent = 'Новый заголовок';      // Меняем содержимое

  2. Парсинг CSS и построение CSSOM (CSS Object Model)

    • Аналогично парсируются CSS-файлы и инлайн-стили, создаётся дерево стилей с учётом каскада, наследования и специфичности селекторов.

  3. Формирование дерева рендеринга (Render Tree)

    • Render Tree — это объединение DOM и CSSOM, содержащее только видимые элементы (например, скрытые через display: none не включаются).
    • Для каждого узла вычисляются стили, но без финальной геометрии.

  4. Layout (или Reflow) — расчёт макета

    • Браузер вычисляет точное положение и размеры каждого узла Render Tree в координатах окна просмотра.
    • Это сложный процесс, учитывающий боковую модель CSS, flexbox, grid, относительные единицы измерения.
    /* Пример: изменение стиля вызывает рефлоу */
.box {
  width: 50%; /* Браузер рассчитает точное значение в пикселях */
  margin: 20px;
}

  5. Paint (отрисовка)

    • На этом этапе создаются пиксели — происходит заполнение цветом, текстурами, тенями, текстом и т.д.
    • Отрисовка может происходить в несколько слоёв для оптимизации.

  6. Compositing (композитинг)

    • Слои собираются в правильном порядке (с учётом z-index) и отрисовываются на экране с учётом преобразований и анимаций.

Важные аспекты производительности

  • Рефлоу триггеры: Изменение геометрии элемента (ширина, высота, шрифты) вызывает пересчёт макета и последующие этапы — это дорогая операция.
  • Оптимизация через слои: Современные браузеры используют аппаратное ускорение для слоёв, управляемых GPU. Свойства transform и opacity часто обрабатываются на этапе композитинга, минуя рефлоу и отрисовку.
  • Event Loop и рендеринг: Браузер стремится обновлять экран с частотой 60 FPS. JavaScript-задачи, выполняемые дольше 16 мс, могут вызывать «фризы».

DOM выступает мостом между разметкой и логикой приложения: благодаря его динамической природе, мы можем создавать интерактивные интерфейсы, которые реагируют на действия пользователя без перезагрузки страницы. Понимание процесса рендеринга критически важно для написания производительного фронтенд-кода, минимизирующего «тормозящие» операции рефлоу и перерисовки.