Урок 02. Как работает браузер: DOM, CSSOM и рендеринг
⚡ Кратко: суть урока
Браузер сначала строит DOM из HTML и CSSOM из стилей, потом объединяет их в render tree, рассчитывает размеры и позиции, а затем рисует страницу. Изменение геометрии обычно вызывает reflow, а изменение внешнего вида без изменения размеров - repaint.
- DOM - дерево HTML-элементов.
- CSSOM - дерево правил стилей.
- Render tree, layout/reflow и paint/repaint объясняют, почему разные изменения работают по-разному.
📖 О чём этот урок
Урок объясняет, как браузер превращает код в видимую страницу. Это одна из самых полезных базовых тем: если понимать пайплайн рендеринга, проще писать более предсказуемую вёрстку и понимать, почему одна правка меняет страницу медленно, а другая почти мгновенно.
💻 Что покажем в примерах
В примерах вы увидите, как изменение текста, цвета, размеров и видимости влияет на render tree, layout и paint. Это поможет перестать воспринимать браузер как «чёрный ящик».
📝 Практика урока
- Пройти цепочку «HTML → DOM → CSS → CSSOM → render tree».
- Определять, когда нужен reflow, а когда достаточно repaint.
- Проверить поведение на простых примерах в браузере.
🐛 На что обратить внимание
Самая частая ошибка - думать, что браузер «просто открывает файл». На самом деле он сначала строит внутренние деревья, затем рассчитывает макет и только потом рисует пиксели.
🔗 Ресурсы
Официальные ссылки собраны в resources.html. Там есть материалы по DOM, CSSOM и инструментам браузера.
🏠 Домашнее задание
Домашняя работа закрепляет тему мини-схемой и практикой в DevTools. Подробности - в homework.html.
📚 Что повторить перед уроком
- ← Урок 01: история HTML/CSS
- Базовую структуру HTML-документа и подключение CSS.
🎯 Что изучать дальше
- Следующий урок: Структура HTML-документа (готовится в фазе 33).
- ← К оглавлению курса