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

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

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, а также при изменении размеров окна браузера, добавлении/удалении элем