В данной статье мы постараемся разобрать такую специфическую тему, как браузер превращает наш код, который мы пишем в картинку на экране пользователя. Другими словами это можно назвать как браузер отрисовывает сайт.
Отрисовка – это процесс визуализации. Этапы отрисовки сайта состоят из пяти стадий каждую из которых мы кратко разберем в данной статье.
ПАРСИНГ HTML И CSS
Код, который мы с вами пишем HTML-разметка и CSS, когда попадает в браузер, то превращается в специальную структуру данных.
Наши HTML-теги все конвертируются в DOM (Document Object Model). Это ещё не отрисовка, это просто построенная модель, которая в будущем будет отрисована, а пока она всего лишь в памяти браузера.
Все наши стили, которые мы написали самолично так же превращаются в специальное дерево — CSSOM (CSS Object Model) и там тоже структурировано хранятся.
В будущем эти два дерева DOM и CSSOM будут объединены в одно и далее уже пойдут следующие этапы отрисовки сайта.
Кроме наших стилей в CSSOM присутствуют еще и стили браузера по умолчанию.
РАСЧЕТ СТИЛЕЙ
После того как HTML-теги и CSS стили были распарсены, т.е. обработаны и переработаны в иной вид у нас существует два виртуальных дерева DOM и CSSOM. Следующий этап это объединение этих двух виртуальных деревьев в одно. На выходе мы получим специальное дерево Render 3.
Именно из этого дерева Render 3 мы получим наше настоящее DOM-дерево, наши теги, которые будут отрисованы.
Важный процесс слияния завязан на CSS-селекторах. Поскольку CSS-селекторы существуют в HTML-теге, то он ищет такой же в нашем CSSOM и, если один и тот же селектор используется в DOM и в CSSOM они объединяются в Render 3.
Еще нужно знать, что элементы, у которых есть свойство display: none они в Render 3 не попадают, т.к. они все равно никак не будут отрисованы, но если написано в стилях, например, visibility: hidden, то такой элемент все равно попадет в Render 3 и будет браузером отрисован, но будет скрыт и мы его не увидим, потому что элементы со свойством display: none не занимают никакого места на экране пользователя, а visibility: hidden место занимают и имеют свою геометрию, но визуальны не видны.
РАСЧЕТ ГЕОМЕТРИИ
В этом разделе поговорим о стадии формировании геометрии. Перед тем как фактически отрисовать наш HTML на экране у пользователя необходимо высчитать фактические, актуальные размеры каждого элемента – это так называемый расчет геометрии.
Мы знаем, что как правило размеры блоков, параграфов, заголовков они не задаются абсолютно в пикселях, они задаются относительно в зависимости от ширины viewport экрана пользователя.
Соответственно перед тем как отрисовать нужно эти размеры посчитать данного viewport. Именно на этом этапе мы получаем полностью законченную геометрию и уже теперь все будет готово к отрисовки сайта.
ЭТАП ОТРИСОВКИ
После всех предыдущих этапов браузер начинает уже заполнять пространство пикселями. Он знает какие размеры у каждого элемента, геометрия будет отрисована, будут залиты все фоны, так же будут загружены и отображены все картинки нужного размера, подгрузятся шрифты используемые на сайте и отрисуются остальные более мелкие элементы (shadow, outline, border и т.д.).
Данный процесс это процесс финальной отрисовки сайта, на котором всё пиксель в пиксель будет выглядеть так, как должно выглядеть. Итоговая картинка, которую мы видим в браузере (сайт) приходит нам из памяти видеокарты, там произошел процесс обработки, геометрии, картинок, текстур и уже в браузер попадает отрисованное с помощью видеокарты готовое отображение.
КОМПОНОВКА
В данном разделе поговорим об еще одном процессе, который происходит опционально в нашем браузере после отрисовки – это компоновка.
Бывает так, что у сайта внутри браузера существует не одни слой, т.е., если представить себе это в трехмерном пространстве сайт вы можете увидеть, что разные элементы интерфейса находятся на разных слоях. Как это возможно?
Визуально для нас как для пользователей многослойность она никак не выдает себя, мы в любом случае видим двухмерный интерфейс сайта.
Однако, внутри «под капотом» у браузера некоторые элементы могут быть выделены на отдельный слой. При этом мы как разработчики можем этим управлять. Например, с помощью директивы will-change в CSS. Для чего это нужно?
Браузер часто перерисовывает сайт, если мы заставляем его это делать. И если мы знаем, что какой-то элемент будет анимирован и при этом анимация может затронуть все соседние его элементы по слою, то мы можем позволить себе произвести оптимизацию и вынести такой элемент на отдельный слой. Для пользователей ничего не изменится, но производительность можно немного увеличить таким образом.
Важно так же понимать, что не стоит делать очень много слоев для разных элементов. В браузерах существует даже лимит слоев, т.е. не получится сделать их слишком много. Поэтому с этим нужно быть осторожным.
В данной статье мы постарались обзорно описать стадии, которые браузер проходит прежде чем отрисовать сайт и показать готовый вариант пользователю. Но стоит всегда помнить, что каждый раз, когда мы что-то меняем на сайте мы каждый раз запускаем цикл перерисовки, то на сколько этот цикл будет тяжелым и на сколько он будет влиять на производительность зависит от нас.
Цикл перерисовки работает в обратном порядке, например, добавили что-то в HTML и цикл перерисовки запустится с самого начала. Если мы трансформируем какой-то элемент и он при этом находится в отдельном слое, то это не запустит полный цикл перерисовки.
Какие практики можно использовать, чтобы при перерисовки сайта не запускать полный цикл и не нагружать браузер мы рассмотрим в следующих статьях.
До новых встреч!
Sphinx Academy