Ответ
Браузер отрисовывает страницу поэтапно:
- Парсинг HTML — строится DOM-дерево.
- Парсинг CSS — формируется CSSOM (CSS Object Model).
- Объединение DOM и CSSOM — создаётся Render Tree (только видимые элементы).
- Layout (Reflow) — вычисляются размеры и позиции элементов.
- Paint — отрисовываются пиксели (растеризация).
- Composite — слои объединяются в финальное изображение.
Оптимизация:
- Избегайте частых изменений стилей, вызывающих reflow (например,
offsetWidth). - Используйте
transformиopacityдля анимаций (они не трогают Layout/Paint).
Пример:
// Плохо — вызывает reflow
element.style.width = '100px';
// Лучше — использует Composite
element.style.transform = 'scale(1.5)';Ответ 18+ 🔞
Да ты послушай, как эта штука, браузер, страницу-то собирает! Прям как наш сантехник дядя Вася водопровод — поэтапно, с соплями и матом, но в итоге должно течь.
Сначала он, сука, HTML парсит. Берёт эти теги, скобочки, и строит из них дерево, DOM-дерево. Представь ёлку, но вместо шариков — твои дивы и параграфы.
Потом, блядь, CSS парсит. Тут уже CSSOM плодится. Это типа инструкция, как каждый элемент на той ёлке должен выглядеть: один шарик красный, другой — с мишурой, третий вообще хуй знает куда прицепить.
Дальше — объединение, ёпта! Берет он DOM и CSSOM, скрещивает их, и получается Render Tree — дерево только для тех, кто на сцене должен быть. Скрытые элементы, display: none — всё, нахуй, в помойку, их не видно.
А вот тут начинается самое интересное — Layout, он же Reflow. Это когда браузер, блядь, начинает высчитывать: а где чё стоит, какого размера, кто под кем, кто над кем. Один чих — и всё пересчитывать надо. Тяжелая работа, я тебе скажу.
Потом Paint — художник-мазила приходит. Берёт кисточку и начинает каждый пиксель красить согласно тому, что в Layout насчитали. Фоны, границы, тени — всё тут.
Ну и финал — Composite. Слои, которые нарисовали, складывают в кучу, как бутерброд, и выдают тебе готовую картинку на экран. Красота!
А теперь, сука, самое главное — оптимизация. Значит так: главный враг — этот самый reflow. Каждый раз, когда ты у элемента, например, offsetWidth спрашиваешь или ширину меняешь, браузеру приходится всё хуярить заново — и Layout, и Paint. Представь, ты дяде Васе каждую секунду говоришь: «Дядя Вася, а ты трубу-то переложи на сантиметр левее». Он тебя нахуй пошлёт на третьем разе, а браузер — нет, он будет страдать, но делать, и страница будет тормозить, как пьяный в говне.
Поэтому запомни, мудень: для анимаций юзай transform и opacity. Они, хитрожопые, минуют этапы Layout и Paint и лезут прямиком в Composite. Это как дрочить через дырку в заборе — быстро и без лишних телодвижений.
Смотри, какой пиздец:
// Делай так — и ты говноед, потому что заставляешь всё пересчитывать
element.style.width = '100px';
// А делай так — и ты красавчик, потому что анимация летает
element.style.transform = 'scale(1.5)';Вот и вся наука, блядь. Не трогай лишний раз то, что браузеру больно пересчитывать, и будет тебе счастье. А то начнётся — «ой, у меня лагает», да потому что ты, гений, двадцать раз в секунду ширину элемента меняешь, вот он и обоссывается с такой нагрузкой!