📝 Практические задания

⚡ Задания в двух словах

  • Построить цепочку «HTML → DOM → CSS → CSSOM».
  • Определить, что вызывает reflow, а что repaint.
  • Проверить простые изменения в браузере и DevTools.

🏋️ Раздел тренировки

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

Цель тренировки: научиться прогнозировать, затронет ли правка layout, paint или только дерево стилей.

Задание 1. Постройте цепочку

Условие: возьмите HTML и CSS-файл и подпишите, что из них становится DOM, а что - CSSOM.

Что должно получиться: вы сможете словами объяснить путь от кода к render tree.

Ожидаемый результат (эскиз схемы):

HTML→DOM CSS→CSSOM render tree layout paint
Так должна выглядеть ваша подписанная цепочка.

Задание 2. Определите тип изменения

Условие: для каждого изменения скажите, нужен ли reflow, repaint или оба шага: изменение width, color, display.

Что должно получиться: таблица или короткий конспект с пояснением.

Задание 3. Проверка в DevTools

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

Что должно получиться: 3-4 коротких наблюдения о DOM, CSSOM и перерисовке.