Глава 1 · Урок 4 из 6
Как браузер рисует страницу
Путь от HTML и CSS до пикселей: DOM и CSSOM, вычисление стилей, раскладка, отрисовка и композиция — и почему одни изменения CSS дешевле других.
Цель урока
Представлять, что делает браузер между загрузкой файлов и появлением страницы на экране, чтобы понимать, откуда берутся стили и почему некоторые изменения тормозят.
Два дерева
Браузер получает HTML и разбирает его в DOM (Document Object Model) — дерево элементов: html содержит head и body, в body — заголовки, абзацы и так далее. Параллельно он разбирает стили — из файлов, из элементов style, из атрибутов и из собственной таблицы стилей браузера — в CSSOM, дерево правил.
Пока CSS из head не загружен, браузер обычно не показывает страницу: иначе вы бы увидели её без оформления, а через мгновение — перерисованной. Поэтому стили называют ресурсом, блокирующим отрисовку, и стараются делать их компактными.
Вычисление стилей
Дальше браузер проходит по DOM и для каждого элемента решает, какие правила к нему подходят. Если одному свойству подходят несколько объявлений, спор решает каскад. Если объявления нет вовсе, значение либо наследуется от родителя (как color или font-family), либо берётся начальное (как margin: 0).
Итог — вычисленное значение каждого свойства для каждого элемента. Их можно посмотреть в инструментах разработчика на вкладке Computed — об этом следующий урок.
Элементы с display: none в дальнейших шагах не участвуют: у них нет блоков, и на странице они не занимают места.
Раскладка
На этапе раскладки (layout, в Firefox — reflow) браузер вычисляет, где находится каждый блок и какого он размера. Ширина абзаца зависит от ширины родителя, высота — от количества строк текста, положение — от соседей. Раскладка идёт по правилам нормального потока, флексбоксов, сеток и позиционирования — им посвящена половина учебника.
Отрисовка и композиция
На этапе отрисовки (paint) блоки превращаются в пиксели: фоны, рамки, текст, тени, картинки — в правильном порядке наложения. Некоторые части страницы браузер рисует на отдельных слоях — например, элементы с анимацией transform или opacity. На этапе композиции слои складываются в итоговую картинку, и это делает видеокарта.
Почему одни изменения дороже других
Когда стиль меняется — по наведению, скриптом или в анимации, — браузер повторяет часть пути:
- поменялась ширина, отступ, размер шрифта — нужно заново делать раскладку, отрисовку и композицию;
- поменялся цвет или фон — раскладка та же, достаточно перерисовать;
- поменялись
transformилиopacityу элемента на своём слое — хватает одной композиции.
Поэтому плавные анимации делают на transform и opacity, а не на width или top. Подробности — в главе про производительность.
Что запомнить
- Из HTML браузер строит DOM, из CSS — CSSOM.
- Для каждого элемента вычисляется итоговое значение каждого свойства.
- Раскладка определяет размеры и положение, отрисовка — пиксели, композиция — слои.
- Изменения, которые не трогают раскладку, обходятся браузеру дешевле.