Как работает браузер

DOM, CSSOM, критический путь рендеринга и Event Loop — что происходит после загрузки HTML.

Язык примеров:

Шаг 1 из 3

HTML → DOM, CSS → CSSOM

javascript

Байты → Символы → Токены → Узлы → DOM-дерево

DOM (Document Object Model) — дерево объектов, представляющее структуру HTML. Каждый тег становится узлом дерева.

javascript

<html>
  ├── <head>
  │     └── <title>Страница</title>
  └── <body>
        ├── <h1>Привет</h1>
        └── <p>Текст</p>

Параллельно браузер парсит CSS и строит CSSOM (CSS Object Model) — дерево стилей. CSSOM знает какие стили применяются к каждому элементу.

css

/* display: none → элемент НЕ попадёт в Render Tree */
.hidden { display: none; }

StudyCode