Как работает последовательность жизненного цикла страницы браузера?

Ответ 1

То, о чем вы говорите, - это путь критической визуализации.

Точка 1., 3. и 4. может быть возобновлена ​​как таковая:

• Построение объектной модели документа (DOM)
• Построение объектной модели CSS (CSSOM)
• Построение дерева рендеринга
• Layout
• Paint.

Вот разбивка того, что происходит за сценой.

1. Построение объекта DOM.

Первым шагом является создание DOM. Действительно, то, что вы получаете от сети, - это байты, а браузер использует так называемое дерево DOM. Поэтому ему необходимо преобразовать эти байты в дерево DOM.

• Вы получаете страницу как байты. Ваш браузер преобразует его в текст.
• Текст преобразуется в узлы.
• узлы преобразуются в "объекты"
• Построение дерева, называемого DOM TREE.

Вы можете проверить инструмент разработчика, чтобы узнать, сколько времени потребуется.

Здесь мы видим, что оно заняло 4.938мс.

Когда этот процесс будет завершен, браузер будет иметь полный контент страницы, но чтобы иметь возможность отображать браузер, необходимо дождаться объектной модели CSS, также известной как событие CSSOM, которая сообщит браузеру, как элементы должен выглядеть так, как показано на рисунке.

2. Обработка CSS

Для css он такой же, как и выше, браузеру необходимо преобразовать этот файл в CSSOM:

Css также является древовидной структурой. Действительно, если вы поместите размер шрифта в родительский элемент, тогда дети наследуют его.

Это называется повторным вычислением стиля в инструменте разработчика

CSS является одним из наиболее важных элементов критического пути рендеринга, поскольку браузер блокирует показ страницы до тех пор, пока не получит и не обработает все файлы css на вашей странице, CSS блокирует рендеринг

3. Дерево рендеринга

CSSOM и DOM объединяются для отображения.

4. Layout

Все должно быть рассчитано в пикселях. Поэтому, когда вы говорите, что элемент имеет ширину 50%, браузер за сценой преобразуется в пикселях:

При каждом обновлении дерева рендеринга или изменении размера окна просмотра браузер должен снова запустить макет.

5.Paint

Этот шаг преобразует все это в пиксели на экране. Это шаг рисования.

Javascript

Для жизненного цикла JavaScript вы можете найти здесь здесь.

Суть его в том, что событие, которое вы, скорее всего, заботитесь, это DOMContentLoaded. Это когда DOM готов.

Когда браузер первоначально загружает HTML и сталкивается с <script>...</script> в тексте, он не может продолжить создание DOM. Это должен выполнить script прямо сейчас. Так что DOM Content Loaded может произойти только после выполнения всех таких скриптов.

Внешние скрипты (с помощью src) также помещают DOM-здание в паузу, пока script загружается и выполняется. Так что DOM Content Loaded ждет внешние скрипты.

Единственным исключением являются внешние скрипты с async и отсрочка атрибутов. Они говорят браузеру продолжать обработку без ожидая сценариев. Таким образом, пользователь может видеть страницу перед сценариями завершающая загрузка, хорошая для производительности.

Кроме того, где JavaScript во всем этом?

Ну, это выполняется между репайнами. Однако он блокирует. Браузер будет ожидать выполнения JavaScript, прежде чем перерисовать страницу. Это означает, что если вы хотите, чтобы ваша страница имела хороший ответ (много кадров в секунду), тогда JS должен быть относительно недорогим.

Печенье

При получении HTTP-запроса сервер может отправить заголовок Set-Cookie с ответом. Файл cookie обычно хранится в браузере, а затем значение cookie отправляется вместе с каждым запросом, сделанным на том же сервере, что и содержимое HTTP-заголовка Cookie. Кроме того, можно указать задержку истечения срока действия, а также ограничения для определенного домена и пути, ограничивающие продолжительность и на какой сайт отправляется куки файл.

Для сетевого контента это выходит за рамки жизненного цикла браузера, о котором идет речь. Это тоже то, о чем я не очень разбираюсь, но вы можете прочитать здесь TCP здесь. Что вам может быть интересно, это handshake.

Источники:

• Критический путь рендеринга

• критический путь рендеринга

• Файлы cookie

• жизненный цикл js

• tcp

• http

Ответ 2

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

• Вы вводите 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, и вы видите страницу на экране.

Источник

Ответ 3

Я хотел бы предложить следующее для тех, кто хотел бы посмотреть, что происходит, это дешевый ответ, но было бы полезно объяснить, как браузер извлекает его каскад файлов для создания содержимого URL-адреса (в этом case a html).

• Перейдите на страницу, которую вы хотите использовать для демонстрации в Chrome (или используйте эту страницу для довольно сложного примера).
• Откройте консоль (Ctrl + Shift + i)
• Выберите "Сеть" из параметров
• Хит F5

Играйте с настройками. Вы также должны посмотреть график, созданный на вкладке "Производительность"

5. Выберите "Производительность" из параметров
6. Хит F5

Здесь может быть полезно снизить производительность, поэтому вы можете смотреть ее в режиме реального времени (медленно), если это то, что вы хотите продемонстрировать.

Важная вещь (с использованием HTML-страницы в качестве примера), порядок рендеринга/применения css/javascript, зависит от того, где он появляется в DOM. Возможно выполнить script в любой момент после загрузки, при условии наличия необходимых ресурсов. Css может быть частью HTML-документа (inline), или он может появляться с очень загруженного сервера и занять 10-20 секунд, прежде чем он может быть применен. Надеюсь, что это поможет -R

Ответ 4

• Ответ на все ваши вопросы "Что происходит, когда мы ищем Google" .
• Браузер отображает HTML на страницу, следуя синтаксис html. Помните, что браузеры очень прощают, и есть такая вещь, как недопустимый HTML.
• Css применяется к странице, следуя css grammar.
• Все браузеры должны реализовать js согласно ECMA Script стандартам.

Некоторые другие полезные ресурсы:

• Firefox 3D tilt plugin поможет визуализировать веб-страницы и как они представляют контент в разных слоях.

• вкладка производительности Chrome - хорошая визуализация того, что происходит во время загрузки страницы, и как построено дерево доминирования. Это помогает идентифицировать узкие места в процессе рендеринга.

• Вы можете увидеть множество функциональных возможностей вашего браузера, таких как кешированный контент HTML, кешированные изображения, кэш DNS, открытые порты и т.д., открыв chrome://net-internals/.

Ответ 5

Я боюсь, что вы имеете в виду, когда URL-адрес браузера запрашивается пользователем, потому что вы указываете активность other, что может быть очень много.

После получения исходного документа, который может содержать пользовательский контент, разметку и даже изображения:

• связанные и встроенные ресурсы (CSS, изображения) запрашиваются с помощью дополнительных HTTP-запросов.
• JS может инициировать дополнительные (a) синхронные запросы для извлечения или хранения активов, данных и т.д. (XML, JSON,...)
• Дополнительно sockets можно открыть для переноса всех видов (двоичных) данных взад и вперед.
• Локальное хранилище (файлы cookie, indexedDB, кеш браузера..) можно использовать для повторного использования данных для последующих запросов
• Через many API s страница может использовать клиентское оборудование (камера, GPS, микрофон, колонки, джойстик, файловая система и т.д..)
• Можно вызвать все виды подключаемых модулей клиента: PDF-ридер, Flash/Silverlight, соединения Citrix, почтовый клиент
• Страница может связываться с другими экземплярами одной и той же страницы

Существует много многих блок-схем, таких как аутентификация, SSL, CORS и т.д. Хотя ответ Ced очень подробный (+1!), это только верхушка айсберга. Возможно, вы должны KISS его ради аудитории презентации, ваш выбор.