🏠 Домашнее задание

⚡ Суть задания

Нарисуйте простую схему browser pipeline и объясните, что происходит при изменении текста, цвета и размеров. Это закрепит модель DOM, CSSOM и render tree без лишней теории.

📋 Формулировка задания

Задание урока 02:

Сделайте мини-конспект на одну страницу: нарисуйте цепочку «HTML → DOM → CSSOM → render tree → layout → paint» и добавьте рядом примеры изменений, которые вызывают reflow или repaint.

🔧 Подготовка рабочего места

Для этой работы достаточно браузера и любой локальной страницы из предыдущего урока.

Подсказка: откройте DevTools клавишей F12 и держите вкладку Elements рядом с Elements/Computed.

🛠️ Шаги выполнения

1

Нарисуйте схему

На бумаге или в заметках изобразите путь от HTML и CSS до экрана. Подпишите DOM, CSSOM, render tree, layout и paint.

2

Добавьте примеры изменений

Рядом запишите, что вызовет reflow (например, width или display) и что обычно вызывает только repaint (например, color).

3

Проверьте в браузере

Откройте любую локальную страницу, измените ширину блока и цвет текста, а затем запишите, что вы увидели в Elements и на самой странице.

✅ Полное решение

Ниже приведён пример ответа, который можно использовать как ориентир для собственного конспекта.

Файл: subjects/html-css/course/lessons/02-browser-rendering/homework.html

HTML → DOM
CSS → CSSOM
DOM + CSSOM → render tree
layout / reflow → размеры и позиции
paint / repaint → отрисовка пикселей

🧪 Как проверить себя

  1. Сможете ли вы объяснить разницу между DOM и render tree.
  2. Сможете ли вы сказать, почему изменение color и width ведут себя по-разному.
  3. Сможете ли вы открыть DevTools и найти вкладки Elements и Computed.

💡 Советы

  • Не пытайтесь запомнить внутреннюю реализацию движков дословно - сначала зафиксируйте базовую учебную модель.
  • Смотрите не только на цвет, но и на геометрию блока.
  • Если хотите, попробуйте объяснить тему вслух без подсказки.