К практике
НачальныйDOMрендерингEvent Loop
🌐JuniorDOMрендерингEvent Loopбраузерпроизводительность
Как работает браузер
DOM, CSSOM, критический путь рендеринга и Event Loop — что происходит после загрузки HTML.
Путь от URL до пикселей — нажми на шаг
→
→
→
→
→
→
→
Язык примеров:
Шаг 1 из 3
1
HTML → DOM, CSS → CSSOM
Браузер получил HTML — что дальше?
javascript
Байты → Символы → Токены → Узлы → DOM-деревоDOM (Document Object Model) — дерево объектов, представляющее структуру HTML. Каждый тег становится узлом дерева.
javascript
<html>
├── <head>
│ └── <title>Страница</title>
└── <body>
├── <h1>Привет</h1>
└── <p>Текст</p>CSS → CSSOM
Параллельно браузер парсит CSS и строит CSSOM (CSS Object Model) — дерево стилей. CSSOM знает какие стили применяются к каждому элементу.
Чем они отличаются
- DOM — структура и содержимое
- CSSOM — как это должно выглядеть
- Render Tree = DOM + CSSOM (только видимые элементы)
css
/* display: none → элемент НЕ попадёт в Render Tree */
.hidden { display: none; }