Ответ
После формирования DOM (Document Object Model) браузер начинает процесс рендеринга:
- Строится CSSOM (CSS Object Model) - анализируются все стили
- Формируется Render Tree - комбинация DOM и CSSOM, исключая невидимые элементы (display: none)
- Происходит Layout (Reflow) - вычисляются точные позиции и размеры всех элементов
- Paint - отрисовываются пиксели на экране
- Composite - слои объединяются в финальное изображение
Пример обработки:
document.addEventListener('DOMContentLoaded', () => {
// DOM готов, но стили/изображения могут ещё грузиться
});
window.addEventListener('load', () => {
// Все ресурсы загружены
});Оптимизация важна на каждом этапе, особенно для сложных SPA.
Ответ 18+ 🔞
А, ну вот, слушай, пока ты тут чай свой попиваешь, браузер-то в это время, сука, целую операцию проводит, как спецназ! Берёт этот твой HTML, который ты ему подсунул, и начинает его разбирать по косточкам, строит DOM — этакую виртуальную модель документа, чтобы понимать, где что лежит.
Дальше начинается самое интересное, ёпта! Он лезет в CSS, и тут его ждёт CSSOM — это типа такая же модель, но только для стилей. Все эти margin: 0 auto, color: #f00 и прочие пиздопроебибны. Он всё это анализирует, как заправский бухгалтер на налогах.
Потом, внимание, хуй с горы! Он скрещивает DOM и CSSOM, и рождается Render Tree — дерево рендеринга. Это уже почти готовый макет, но без всякого скрытого дерьма вроде display: none. Если элемент невидимый — его нахуй выкидывают из этого дерева, чтобы зря время не тратить.
А дальше начинается самая тяжёлая работа — Layout, или, по-нашему, перерасчёт. Браузер начинает судорожно считать, где какой div должен встать, какого он размера, где текст обтекает картинку... Представь, он как инженер с логарифмической линейкой, только в миллион раз быстрее. Этот этап ещё Reflow называют, и если ты его часто вызываешь (например, постоянно меняешь стили в JS), то производительность летит в пизду, братан.
Потом идёт Paint — собственно, рисование. Вот тут уже пиксели на экране начинают загораться. Но и это ещё не конец, ядрёна вошь!
Финальный аккорд — Composite. Браузер берёт все эти нарисованные слои (да-да, он умный, он рисует частями) и склеивает их в одну красивую картинку, которую ты уже видишь в окне. Вот так, чих-пых тебя в сраку, и страница готова!
И чтобы ты, как разработчик, не сидел в неведении, когда что происходит, есть два главных сигнала:
document.addEventListener('DOMContentLoaded', () => {
// DOM готов, можно тыкать в элементы!
// Но стили или картинки могут ещё болтаться где-то в сети, имей в виду.
});
window.addEventListener('load', () => {
// Всё, пиздец, полный комплект!
// И HTML, и CSS, и все картинки, скрипты, шрифты — всё загружено.
// Можно выдыхать.
});Так что если делаешь какую-нибудь навороченную SPA-шечку, помни — оптимизировать нужно на каждом из этих этапов, а то пользователи тебе такую дичь устроят в отзывах, мало не покажется.