✅ Решения заданий

⚡ Кратко

HTML→DOM, CSS→CSSOM, вместе→render tree, дальше layout и paint. width → reflow, color → repaint, display:none → выпадение из render tree.

⚠️ Рекомендация: сначала попробуйте ответить сами. Здесь главное - понять логику, а не заучить формулировку.

Решение задания 1

HTML создаёт DOM, а CSS - CSSOM. Дальше браузер объединяет их в render tree и переходит к layout и paint.

HTML → DOM CSS → CSSOM
↓ объединяются ↓ render tree layout (reflow) paint (repaint) 
HTML → DOM
CSS  → CSSOM
DOM + CSSOM → render tree
render tree → layout / reflow
layout → paint / repaint

Решение задания 2

Каждое свойство затрагивает разный шаг конвейера. Превью показывает, как они себя ведут:

width → reflow (двигает соседей)
color → repaint (только вид)
display:none → выпадает из render tree
.box { width: 320px; }   /* reflow */
.box { color: #1d4ed8; } /* repaint */
.box { display: none; }  /* нет в render tree */

Решение задания 3

  1. Откройте страницу и инструменты разработчика.
  2. Измените стиль в Elements.
  3. Посмотрите, что при смене цвета страница обновляется без заметного пересчёта геометрии.
  4. При изменении ширины браузер пересчитывает layout, а затем рисует страницу заново.