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

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

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

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

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

Ответы

Ответ 1

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

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

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

  • Он формирует HTTP-запрос (это, скорее всего, протокол)

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

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

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

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

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

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

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

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

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

  • Дерево DOM построено из разбитого HTML

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

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

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

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

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

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

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

Ответ 2

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

  • Построить DOM
  • Вычислить стили
  • Построить дерево рендеринга
  • Вычислить макет
  • Paint