Как браузер рендерит веб-страницу⁠⁠

Для фронтенд-разработчиков очень важно знать, как происходит отрисовка веб-страницы на всех этапах: от отправки запроса на сервер до отображения картинки, которую мы видим в браузере.

Чтобы быстро разобраться в основах можно почитать следующие 3 статьи:

• Дока - Как браузер рисует страницы

• Reflow, Repaint, Composite — что это и как это работает?

• Понимание критического пути рендеринга

Затем, чтобы погрузиться в детали — можно прочитать статью:

• How the browser renders a web page? — DOM, CSSOM, and Rendering

Статья достаточно большая, поэтому лучше её читать постепенно и не один раз. Я читал раза 3 с перерывами и выписал для себя основные моменты:

1. Браузер отправляет запрос на сервер и получает в ответ текстовый HTML файл с заголовком Content-Type: text/html; charset=UTF-8

2. Браузер парсит полученный файл и создаёт DOM (Document Object Model)

3. Браузер считывает CSS из всех ресурсов и строит CSSOM (CSS Object Model)

   1. CSSOM не содержит не визуальные элементы: script, meta, title, …

   2. Для построения CSSOM используются: стандартные стили браузера, авторские стили (которые и пишут разработчики), стандартные стили описанные в W3C CSS и правила каскадного наследования CSS

4. DOM Tree + CSSOM Tree = Render Tree

   1. Содержит лишь видимые на экране элементы

   2. Именно это дерево использует бразуер для отображения контента, который мы видим в браузере

5. Процесс отрисовки страницы

   1. Элементы на странице могут перекрывать друг друга (z-index). Поэтому браузер располагает элементы на различных слоях.

   2. Каждый слой может рендериться в отдельном потоке.

6. Композиция слоёв

   1. Происходит объединение упомянутых выше слоёв

   2. Слои разделены на тайлы, так как композиция слоёв будет происходить при изменении стилей или размеров окна браузера

7. Все перечисленные выше операции представляют собой Critical Rendering Path (CRP) — последовательность операций, которые необходимо произвести браузеру для отображения страницы пользователю

8. Парсинг и сторонние ресурсы

   1. Браузер парсит HTML по мере скачивания (не ждёт скачивания всего документа)

   2. Парсинг HTML происходит в основном потоке исполнения JavaScript

9. Parser Blocking Scripts

   1. Это скрипты, которые приостанавливают парсинг HTML

   2. Если парсер натыкается на тэг script — парсинг приостанавливается и происходит выполнение скрипта

   3. Если скрипт находится в отдельном файле, браузер приостанавливает парсинг, скачивает файл, выполняет его (в главном потоке) и лишь потом продолжает построение DOM дерева

   4. Браузер приостанавливает парсинг, так как мы можем изменять DOM с помощью JavaScript. Иначе мы бы столкнулись с race condition между JavaScript и парсером, ведь JavaScript может модифицировать DOM дерево

   5. Можно использовать async атрибут тэга script, чтобы не блокировать парсер при скачивании js-файла, файл будет выполенен, как только загрузится.

   6. Также можно использовать тэг defer, который работает также как async, но выполнение скрипта произойдёт только когда завершится парсинг

10. Render Blocking CSS

    1. Построение CSSOM происходит в главном потоке

    2. Построение CSSOM не происходит по мере скачивания (в отличии от построения DOM). CSSOM обновится, когда сторонний файл со стилями будет загружен целиком. Пока стили не загружены, Render Tree не будет обновлено. Поэтому CSS - render blocking ресурс.

       1. В то же время, построение DOM дерева продолжается.

       2. Если парсер натыкается на тэг script, то он будет скачан, но не будет выполнен до тех пор, пока не завершится загрузка файла со стилями. Это важно, так как мы можем манипулировать CSS свойствами через JavaScript. Такой CSS называется script-blocking.

    3. Так как построение Render Tree приостановлено, следовательно и Critical Render Path застопорился, и контент не обновляется.

    4. Чтобы не блокировать рендеринг, необходимо загружать стили как можно раньше, желательно в секции head

Какие статьи помогли вам понять, как браузер рендерит страницу?

https://t.me/cherkashindev/74