⚖️ Старое упрощение против современной модели рендеринга

⚡ Различия в двух словах

Старое представление: браузер «просто открыл HTML и сразу всё показал».

Современное понимание: браузер строит DOM и CSSOM, затем вычисляет render tree, layout и paint.

Вывод: разные изменения приводят к разным внутренним шагам.

📜 Старое представление

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

Важно: в этой теме deprecated-приёмов нет. Здесь устаревает не код, а упрощённая модель мышления.

❌ Почему так думать неудобно

  • Непонятно, почему одна правка вызывает заметную задержку, а другая нет.
  • Сложнее объяснить поведение display:none, visibility:hidden и изменения размеров.
  • Трудно использовать DevTools осознанно, если не знаешь, что именно измеряется.

✅ Современная модель

Сначала браузер строит внутренние деревья, потом вычисляет геометрию и только после этого рисует страницу. Такой взгляд помогает понимать, какие правки затрагивают layout, а какие - только paint.

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

HTML → DOM
CSS  → CSSOM
DOM + CSSOM → render tree
render tree → layout / reflow
layout → paint / repaint
Что стало лучше:
  • Можно заранее предполагать, какой шаг затронет правка.
  • Проще искать источники лагов и лишних перерисовок.
  • Появляется общий язык для обсуждения вёрстки.

Современная модель сразу объясняет то, что в старой выглядело загадкой. Например, почему display:none и visibility:hidden ведут себя по-разному:

A
B
C
D
E
/* B выпал из render tree → A и C вплотную */
.b { display: none; }
/* D остался в render tree → между C и E пустое место */
.d { visibility: hidden; }

🕰️ Когда старое упрощение встречается

В разговорах, статьях для новичков и старых заметках иногда пишут, что «браузер просто открыл файл». Это полезная стартовая метафора, но дальше лучше сразу переходить к модели DOM/CSSOM/render tree.