Как браузер отрисовывает страницу
DOM, CSSOM, layout, paint, composite и Core Web Vitals.
Обновлено
Что браузер делает с HTML
Браузер превращает текст (HTML + CSS + JS) в пиксели. Эти шаги называются critical rendering path:
- Разбор HTML → строится DOM (дерево элементов).
- Разбор CSS → строится CSSOM (дерево стилей).
- Render tree = DOM + CSSOM, только видимые элементы (без
display: none, без<head>). - Layout (reflow) — вычисляются положение и размер каждого элемента.
- Paint — отрисовываются цвета, текст, тени, изображения.
- Composite — слои объединяются и выводятся на экран.
Что блокирует отображение
| Ресурс | Блокирует? | Почему |
|---|---|---|
<link rel="stylesheet"> |
отрисовку | без CSS страница «прыгала» бы при применении стилей |
<script src> (обычный) |
разбор HTML | скрипт может изменить DOM, поэтому браузер останавливается |
<script defer> |
нет | загружается параллельно, выполняется после разбора, по порядку |
<script async> |
почти нет | выполняется сразу после загрузки, в любом порядке |
<script type="module"> |
нет | ведёт себя как defer |
| изображения, шрифты | нет | но могут вызвать сдвиг макета |
Правило: CSS в <head>, JS с defer / type="module". Next.js делает это автоматически.
Layout, paint, composite — сколько это стоит
Когда вы меняете стиль элемента, браузер повторяет шаги начиная с определённого места:
| Меняете | Повторяется | Стоимость |
|---|---|---|
width, height, margin, padding, top, left, font-size |
layout → paint → composite | дорого |
color, background, box-shadow |
paint → composite | средне |
transform, opacity |
только composite | дёшево — на GPU |
Поэтому анимации делают через transform и opacity, а не через left или width.
Core Web Vitals
Метрики, по которым Google (и пользователи) оценивают скорость:
| Метрика | Что измеряет | Хорошо |
|---|---|---|
| LCP — Largest Contentful Paint | сколько ждать главный элемент | < 2.5 с |
| INP — Interaction to Next Paint | как быстро реагирует на клик/клавишу | < 200 мс |
| CLS — Cumulative Layout Shift | насколько «прыгает» контент | < 0.1 |
Как улучшить: меньше JS на клиенте (Server Components), next/image с размерами (против CLS), next/font (шрифты без скачков), ленивая загрузка тяжёлого кода. Подробнее — в уроке Производительность веба.
Коротко
- HTML → DOM, CSS → CSSOM, затем layout → paint → composite.
- CSS блокирует отрисовку, обычные скрипты — разбор; используйте
defer/module. - Анимируйте только
transformиopacity. - LCP, INP, CLS — скорость глазами пользователя.