Как браузер работает с CSS?

Как браузер обрабатывает CSS

Когда браузер загружает веб-страницу, он последовательно обрабатывает HTML и CSS. Сначала парсится HTML, создавая DOM (Document Object Model). Параллельно загружаются и парсятся CSS-файлы, формируя CSSOM (CSS Object Model). Эти два дерева объединяются в дерево рендеринга, которое содержит только видимые элементы.

Этапы рендеринга

• Парсинг CSS: браузер разбирает CSS-правила, разрешает конфликты (каскад и специфичность) и строит CSSOM.
• Layout (Reflow): вычисляются размеры и позиции каждого элемента на странице.
• Paint: браузер отрисовывает пиксели, заполняя цвета, тени, границы и т.д.
• Composite: слои объединяются в финальное изображение.

Пример

/* CSS */
.box {
  width: 100px;
  height: 100px;
  background: red;
}

Браузер создаст CSSOM-узел для .box, затем в layout вычислит его размеры, а в paint закрасит красным.

Вывод

Понимание этого процесса помогает оптимизировать производительность: избегать частых reflow и repaint, использовать свойства, не вызывающие перекомпоновку (например, transform вместо изменения top/left).