Опишите процесс рендеринга страницы в браузере?

Question

Прежде всего, меня не интересует весь процесс запрос-ответ, который решается этим вопросом

Каков полный процесс от ввода URL-адреса в адресную строку браузера, чтобы получить отображаемую страницу в браузере?

Я хочу знать, что происходит внутри браузера, как только он получает ответ html от сервера. Цель этого вопроса - понять внутренние детали сценариев на стороне клиента. Также было бы полезно, если бы вы могли абстрактно объяснить, из чего состоит веб-браузер. Вы можете называть их движком CSS, движком JavaScript и т. Д. Цель состоит в том, чтобы точно визуализировать веб-разработку, которой я занимаюсь.

К сожалению, я не нашел ни одного веб-ресурса, посвященного этой проблеме. Пожалуйста, прости меня, если есть ресурсы, которые объясняют эти концепции. Вы можете указать ресурсы (книги и т. Д.), Если этот вопрос слишком исчерпывающий, чтобы на него ответить.

Answer 1

Пожалуйста, выполните следующие шаги, и вы должны уяснить жизненный цикл запроса и порядок предоставления ответа.

1. Вы вводите URL-адрес в адресную строку в предпочитаемом вами браузере.

2. Браузер анализирует URL-адрес, чтобы найти протокол, хост, порт и путь.

3. Формирует HTTP-запрос (это, скорее всего, протокол)

4. Чтобы добраться до хоста, сначала нужно перевести понятный человеку хост в IP-номер, и это делается путем поиска DNS на хосте

5. Затем необходимо открыть сокет с компьютера пользователя по этому IP-номеру на указанном порту (чаще всего это порт 80)

6. Когда соединение открыто, на хост отправляется HTTP-запрос. Хост пересылает запрос программному обеспечению сервера (чаще всего Apache), настроенному на прослушивание через указанный порт

7. Сервер проверяет запрос (чаще всего только путь) и запускает серверный плагин, необходимый для обработки запроса (соответствующий языку сервера, который вы используете, PHP, Java, .NET, Python?)

8. Плагин получает доступ к полному запросу и начинает готовить HTTP-ответ.

9. Чтобы построить ответ, к базе данных (скорее всего) обращаются. Поиск в базе данных производится на основе параметров в пути (или данных) запроса

10. Данные из базы данных вместе с другой информацией, которую плагин решает добавить, объединяются в длинную строку текста (возможно, HTML).

11. Плагин объединяет эти данные с некоторыми метаданными (в виде заголовков HTTP) и отправляет ответ HTTP обратно в браузер.

12. Браузер получает ответ и анализирует HTML (который с вероятностью 95% не работает) в ответе

13. Дерево DOM построено из сломанного HTML

14. Новые запросы отправляются на сервер для каждого нового ресурса, найденного в источнике HTML (обычно изображения, таблицы стилей и файлы JavaScript).

15. Вернитесь к шагу 3 и повторите для каждого ресурса.

16. Таблицы стилей анализируются, и информация рендеринга в каждом из них прикрепляется к соответствующему узлу в дереве DOM

17. JavaScript анализируется и выполняется, а узлы DOM перемещаются, и информация о стиле обновляется соответственно

18. Браузер отображает страницу на экране в соответствии с деревом DOM и информацией о стиле для каждого узла

19. Вы видите страницу на экране

20. Вас раздражает, что весь процесс был слишком медленным.

Answer 2

В прекрасном выступлении Дэвида Барона из Mozilla это подробно обсуждается. Это видео под названием Faster HTML и CSS: внутренняя структура механизма размещения для веб-разработчиков , в котором рассказывается о пяти шагах рендеринга дерева DOM на экране:

1. Построить DOM
2. Расчет стилей
3. Построить дерево рендеринга
4. Вычислить макет
5. краска

Answer 3

Я постараюсь подробно объяснить процесс рендеринга страницы.Пожалуйста, обратите внимание, что я не сосредотачиваюсь на процессе запрос-ответ, как задала ФП в вопросе.

Как только сервер предоставит ресурсы (HTML, CSS, JS, изображения и т. Д.) Дляв браузере он проходит следующий процесс:

Парсинг - HTML, CSS, JS
Рендеринг - Построение дерева DOM → Дерево рендеринга → Макет дерева рендеринга →Рисование дерева рендеринга

1. Механизм рендеринга начинает получать содержимое запрошенного документа с сетевого уровня.Обычно это делается кусками по 8 КБ.
   
2. Дерево DOM построено из неработающего ответа.
   
3. Новые запросы отправляются на сервер для каждого нового ресурса, найденного в источнике HTML (обычно изображения, таблицы стилей и файлы JavaScript).
   
4. На этом этапе браузер помечает документ как интерактивный и запускает синтаксический анализ сценариев в режиме «отложенного»: тех, которые должны быть выполнены после анализа документа.Состояние документа установлено на «завершено», и запускается событие «загрузка».
   
5. Каждый файл CSS анализируется в объекте StyleSheet, где каждый объект содержит правила CSS с селекторами и объектами, соответствующими грамматике CSS.Построенное дерево называется CSSCOM.
   
6. На вершине DOM и CSSOM создается дерево рендеринга, представляющее собой набор объектов для рендеринга.Каждый из объектов рендеринга содержит соответствующий ему объект DOM (или текстовый блок) плюс рассчитанные стили.Другими словами, дерево визуализации описывает визуальное представление DOM.
   
7. После построения дерева рендеринга он проходит процесс «макета».Это означает предоставление каждому узлу точных координат, где он должен появиться на экране.
   
8. Следующий этап - рисование - дерево рендеринга будет пройдено, и каждый узел будет окрашен с использованием бэкэнд-слоя пользовательского интерфейса.
   
9. Перекрашивание: при изменении стилей элемента, которые не влияют на положение элемента на странице (например, цвет фона, цвет рамки, видимость), браузер просто перерисовывает элемент снова с новымпримененные стили (это означает, что происходит "перекраска" или "рестайлинг").
   
10. Reflow: Когда изменения влияют на содержимое или структуру документа, или положение элемента, происходит перекомпоновка (или ретрансляция).
    

Какова внутренняя структура веб-браузера?
Чтобы понять процесс рендеринга страницы, описанный вышеТакже нам необходимо понять структуру веб-браузера.

Пользовательский интерфейс: Пользовательский интерфейс включает в себя адресную строку, кнопку «назад / вперед», меню закладок и т. д. Каждая частьотображение браузера кроме окна, где вы видите запрашиваемую страницу.
Движок браузера: Движок браузера выполняет действия между интерфейсом пользователя и движком рендеринга.
Механизм визуализации: Механизм визуализации отвечает за отображение запрошенного содержимого.Например, если запрошенным содержимым является HTML, механизм рендеринга анализирует HTML и CSS и отображает проанализированный контент на экране.
Сеть: Сеть обрабатывает сетевые вызовы, такие как HTTP-запросы, используя разные реализации для разных платформ за независимым от платформы интерфейсом.
Бэкэнд пользовательского интерфейса: Бэкэнд пользовательского интерфейса используется для рисования основных виджетов, таких как поля со списком и окна.Этот бэкэнд предоставляет общий интерфейс, который не зависит от платформы.Под ним используются методы пользовательского интерфейса операционной системы.
Механизм JavaScript: Механизм JavaScript используется для анализа и выполнения кода JavaScript.
Хранение данных: Хранение данных - это постоянный уровень.Браузеру может потребоваться локально сохранять все виды данных, например файлы cookie.Браузеры также поддерживают механизмы хранения, такие как localStorage, IndexedDB, WebSQL и FileSystem.

Примечание:
Во время процесса рендеринга графические вычислительные слои могут также использовать процессор общего назначения или графический процессор графического процессора.При использовании графического процессора для вычислений графического рендеринга графические программные слои разделяют задачу на несколько частей, поэтому он может использовать преимущества массивного параллелизма графического процессора для вычислений с плавающей запятой, необходимых для процесса рендеринга.1082 *
1. https://github.com/alex/what-happens-when
2. https://codeburst.io/how-browsers-work-6350a4234634