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

Процесс обработки веб-страницы браузером можно разбить на несколько этапов:

1. Запрос и получение ресурса:

   • Пользователь вводит URL в адресную строку или кликает по ссылке.
   • Браузер отправляет HTTP-запрос на сервер.
   • Сервер обрабатывает запрос и отправляет ответ, содержащий, как правило, HTML-документ.

2. Синтаксический анализ (Parsing):

   • Браузер получает HTML-документ в виде байтов.
   • Эти байты декодируются в символы согласно указанной кодировке.
   • Парсер HTML посимвольно анализирует документ и строит дерево DOM (Document Object Model). DOM представляет собой логическую структуру документа.
   • При обнаружении тегов <link> (для CSS) или <script> (для JavaScript), браузер начинает скачивание этих ресурсов параллельно с парсингом HTML.

3. Построение CSSOM:

   • Парсер CSS анализирует CSS-правила из <style> тегов, <link> тегов и инлайн-стилей.
   • На основе этих правил строится дерево CSSOM (CSS Object Model), которое содержит все стили для каждого элемента на странице.

4. Построение дерева рендеринга (Render Tree):

   • Render Tree объединяет DOM и CSSOM. Оно содержит только те элементы, которые будут отображены на странице, и соответствующие им стили.
   • Элементы, для которых установлено CSS-правило display: none;, не включаются в Render Tree.

5. Макет (Layout / Reflow):

   • Браузер вычисляет точные геометрические размеры и положение каждого элемента на странице на основе Render Tree. Этот процесс называется Layout или Reflow.
   • Layout происходит при первом построении Render Tree, а также при изменении размеров окна браузера, добавлении/удалении элементов, изменении их стилей (например, размеров, отступов).

6. Рисование (Painting / Repaint):

   • Браузер отрисовывает каждый элемент на экране, используя информацию из Render Tree и результаты шага Layout.
   • Painting также может происходить при изменении видимых свойств элемента, таких как цвет, фон, прозрачность, без изменения его геометрии (это называется Repaint).

7. Композиция (Compositing):

   • Рисуемые элементы могут быть объединены на разных слоях для оптимизации отрисовки и анимации.
   • Эти слои затем объединяются для отображения окончательной страницы на экране.

8. Выполнение скриптов:

   • Когда парсер HTML достигает тега <script>, выполнение парсинга HTML приостанавливается (по умолчанию), и браузер скачивает, парсит и выполняет JavaScript-код.
   • JavaScript может изменять DOM и CSSOM, что может вызвать повторные шаги Layout и Painting.
   • Атрибуты async и defer для тега <script> влияют на порядок и время выполнения скриптов, позволяя продолжить парсинг HTML.

Вот примерная визуализация потока:

HTTP Request
↓
HTML Bytes
↓
HTML Parser
→ CSS Parser (Parallel)
    ↓           ↓
    DOM Tree  CSSOM Tree
          ↓
     Render Tree
          ↓
        Layout
          ↓
       Painting
          ↓
     Compositing
          ↓
   Screen Display

Выполнение JavaScript может вклиниваться на разных этапах, вызывая повторные шаги:

HTML Parser + Script tag
↓
Pause HTML Parsing
↓
Download Script
↓
Parse Script
↓
Execute Script
↓
(Potentially Modify DOM/CSSOM → Trigger Layout/Paint)
↓
Resume HTML Parsing

Понимание этого процесса важно для оптимизации производительности веб-страниц.