Ответ
Браузер загружает HTML, парсит его и строит DOM. Параллельно загружаются CSS, формируется CSSOM. Затем DOM и CSSOM объединяются в Render Tree.
Этапы:
- Parsing HTML - построение DOM
- CSS Loading - построение CSSOM
- Render Tree - комбинация DOM + CSSOM
- Layout - расчет позиций элементов
- Paint - отрисовка пикселей
JavaScript может блокировать парсинг HTML при выполнении (если нет async/defer).
Пример:
<script defer src="script.js"></script> <!-- Не блокирует рендеринг -->
<script async src="analytics.js"></script> <!-- Загружается параллельно -->Ответ 18+ 🔞
А, ну ты смотри, как эта штука работает, блядь! Представь себе: браузер твой, такой довольный, начинает жрать HTML, как голодный студент лапшу быстрого приготовления. Разбирает его по косточкам и строит из этого бардака DOM — этакое дерево, где все элементы, как родственники на семейном сборе, друг за дружку держатся.
И пока он этим занимается, параллельно, сука, как шустрый официант, тащит ещё и CSS. Из этих стилей ваяет CSSOM — уже другое дерево, но про красоту и раскраску.
А потом наступает момент истины, ёпта! Эти два дерева — DOM и CSSOM — встречаются, целуются в жопу, и из этого союза рождается Render Tree. Уже не просто структура, а план, что и как рисовать.
И вот как это по этапам, чтобы не ебнуть мозг:
- Parsing HTML — строится DOM. Читаем теги, как книжку с картинками.
- CSS Loading — строится CSSOM. Подбираем всем наряды.
- Render Tree — DOM + CSSOM = вот он, готовый манекен для показа.
- Layout — тут начинается математика, блядь! Считаем, где какой
divдолжен сидеть, какой ширины, кто под кем. Перерасчёт лэйаута — это пиздец, он дорогой! - Paint — и наконец, берём кисточки и красим эти пиксели на экране. Ура, товарищи!
А теперь соль, на которой все спотыкаются — JavaScript, сука! Он такой наглый, может встать посреди процесса и заорать: «Стоять! Не двигаться! Я тут поработаю!». И весь парсинг HTML встанет колом, пока скрипт не выполнится. Тишина в зале, все ждут.
Но не всё так плохо, есть же спасательные круги — async и defer. Смотри, как ими пользоваться, чтобы не быть мудаком:
<script defer src="script.js"></script> <!-- Этот умный, подождёт, пока DOM готов будет. Не блокирует рендеринг. -->
<script async src="analytics.js"></script> <!-- Этот вообще похуист. Загружается параллельно, а как загрузился — сразу выполняется, не глядя на очередь. -->Вот и вся магия, блядь. Кажется сложным, а на деле — просто нужно знать, кто в какую дверь ломится и кого слушается.