Процесс отрисовки веб-страницы браузером
Рассмотрим процесс отображения веб-страницы браузером
Для нас важно проследить каким образом формируется в браузере запрашиваемая html страница, после того как было установлено соединение с веб-сервером.
Сам по себе процесс рендера страницы сложен, поэтому вкратце рассмотрим этапы.
Начнем с запросов.
Запросы
Браузер от имени пользователя отправляет запрос на веб-сервер. Чаще всего запрашивается html файл index.html.
Когда запрос достиг сервера, сервер начинает отправлять ответ с заголовками и содержимым html файла.
В первичном файле содержатся ссылки на другие ресурсы - это стили, скрипты, изображения, аудио, видео и др.
После того как данные пришли их нужно обработать.
Обработка данных
Как только часть данных пришла, браузер сразу же начинает обработку информации - это называется парсингом.
Парсинг Html - это процесс, который позволяет компьютерам понимать и обрабатывать Html-код.
Он используется в различных приложениях, от отображения веб-страниц до извлечения данных и автоматизации задач.
Для того чтобы отрисовать данные браузер распознает переданные данные и преобразует их в DOM и CSSOM.
Об этом ниже.
DOM
DOM - это объектная модель документа, так как браузер работает не с текстом, а абстрактным представлением документа то есть DOM деревом.
То есть для документа строится дерево его элементов.
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
Для того чтобы манипулировать элементами, используются разные Javascript API.
Браузер начинает отрисовывать страницу с данными которые уже доступны.
Если документ сформирован правильно, парсер обработает данные быстро.
Во время парсинга, браузер запрашивает другие ресурсы, например изображения или css. В это же время обработка html продолжается.
Но если подключается тег script без параметров async или defer, такой скрипт блокирует обработку html, до завершения их загрузки.
Важно понимать, что браузер разбирает html сверху вниз, слева направо, поэтому скрипты, которые работают с разметкой должны быть подключены только после формирования всего html.
Как можно было понять построение DOM дерева документа, это узкое место в производительности, поэтому в браузере есть специальный механизм предзагрузки.
Он находит скрипты с async или defer и загружает их параллельно с html.
В то же время когда ожидается получения css блокируется работа javascript, так как через javascript происходит выборка css селекторов.
CSSOM
По аналогии с DOM, как только браузер загрузил файл стилей, он строит CSSOM дерево (карту стилей), с которой он может работать.
Браузер проходит по правилам css и создает дерево основываясь на css селекторах.
Сам процесс построения CSSOM происходит очень быстро, это даже меньше чем DNS запрос.
Далее когда CSSOM обработан, должен быть исполнен javascript. Помимо этого браузер так же строит дерево доступности.
Рендер
Когда CSSOM и DOM готовы, пришло время процедуры рендера, а точнее построения render tree.
Рендер включает в себя несколько этапов
- Стилизация
- Компоновка
- Композиция
- Отрисовка
Стилизация
CSSOM и DOM образуют дерево рендера, которое впоследствии используется для расчета положения видимых элементов.
То есть идет проход по всему дереву с выявлением видимых узлов.
Так как каждый узел который нужно отобразить имеет свои правила в CSSOM, он содержит вычисленные стили.
Компоновка и отрисовка элементов
На этапе компоновки вычисляется размеры и положение элементов, и определяется какие узлы должны быть отрисованы, даже если они невидимы. Для того чтобы определить размеры элементов, происходит обход дерева.
За основу берется размер видимой области. Процесс вычисления начинается с элемента body и далее по дереву вниз.
При этом вычисление происходит в “потоке”.
Последний этап процесса отрисовка каждого узла, цвета, границы, тени. Все это браузер должен выполнять быстро.
Для отрисовки отдельных элементов браузер разбивает их на слои и выполнять их каждый по отдельности.
Трудозатратным процессом для браузера является глобальная перерисовка, например изменение размера окна браузера.
Порядок отрисовки элемента это задний фон, фоновое изображение, рамка, дочерние элементы, внешняя рамка.
Для того чтобы отобразить элементы в правильном порядке, которые были отрисованы на разных слоях, необходима композиция элементов.
Композиция
Когда элементы страницы нарисованы, браузер переходит к последнему этапу композиции.
Здесь происходит составление слоёв:
- Браузер группирует элементы в слои, чтобы эффективно обработать их. Эти слои могут быть отрисованы независимо, что позволяет ускорить рендеринг.
- Важные стили, такие как
transformилиopacity, могут использоваться для переноса элементов наGPUдля дальнейшей обработки, чтобы разгрузить процессор. - На этом этапе браузер может оптимизировать рендеринг, отправив слои на видеокарту для отрисовки, но в разных браузерах - это по-разному реализовано.
Итог
Процесс отрисовки не простой. Для улучшения произодительности, чтобы помочь браузерам загружать страницы, нужно минимизировать работу скриптов в блокирующем режиме и оптимизировать стили.
Все, что мы сегодня рассмотели лишь вершина айсберга, если будет желание то продолжим более подробно изучать каждую тему.
Хотите оптимизировать свой бизнес, нужен сервис, сайт или интеграция.
Бесплатно расчитаю время разработки, предложу решение вашей задачи.