Супер подробное объяснение процесса загрузки страницы

❝

Классические вопросы на собеседовании:«Процесс между вводом URL-адреса и завершением загрузки страницы».Вы обнаружите, что этот вопрос, большой или маленький, всегда будет спрашивать: почему?

Потому что он может проверить не только широту знаний интервьюера, но и глубину знаний интервьюируемого.

❞

предисловие

Если эта статья была вам полезна, ❤️Подпишитесь+Нравится❤️Поощряйте автора, статья будет опубликована в паблике, подписывайтесь"Фронтенд Нанцзю"Получите последние статьи в первый раз~

в предыдущей статьеЭти вопросы интервью браузера, видите, сколько вы можете ответить?, я также упомянул этот классический вопрос интервью. Давайте посмотрим ниже~

Подскажите, что произошло от ввода URL до отрисовки страницы? (точка знаний)

❝

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

❞

1. Браузер принимает URL-адрес для открытия потока сетевых запросов (включая: механизм браузера, поток и процесс и т. д.).

2. Откройте сетевой поток, чтобы выполнить полный HTTP-запрос (включая разрешение DNS, запрос TCP/IP, сетевой протокол уровня 5 и т. д.).

3. Получите запрос от сервера на соответствующий фоновый прием запроса (включая: балансировку нагрузки, перехват безопасности, внутреннюю обработку в фоновом режиме и т. д.)

4. HTTP-взаимодействие между фоном и передним планом (включая: заголовок http, код ответа, структуру сообщения, файлы cookie и т. д.)

5. Проблемы с кешем (связанные с сильным кешем HTTP, кешем согласования и т. д.) (см. предыдущую статью [Эти вопросы для интервью с браузером, посмотрите, на сколько вы можете ответить?](nuggets.capable/post/702653…

6. Процесс синтаксического анализа после того, как браузер получает пакет данных http (включая лексический анализ html, синтаксический анализ в дереве DOM, синтаксический анализ CSS для создания дерева CSSOM и слияние для создания дерева рендеринга). синтез слоев, отрисовка графического процессора и т. д.)

Введите URL-адрес в адресную строку браузера

Когда мы вводим URL-адрес в адресную строку браузера, браузер открывает поток для анализа введенного URL-адреса.

Каждый процесс и роль в браузере: (многопроцессный)

Браузерный процесс: отвечает за управление созданием и уничтожением вкладок, отображением страниц, загрузкой ресурсов и т. д.
Процесс сторонних подключаемых модулей: отвечает за управление сторонними подключаемыми модулями.
Процесс GPU: отвечает за 3D-рендеринг и аппаратное ускорение (до одного).
Процесс рендеринга: отвечает за синтаксический анализ документа страницы (HTML, CSS, JS), выполнение и рендеринг. (может быть больше одного)

Разрешение доменного имени DNS

Зачем нам нужно разрешение доменных имен DNS?

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

URL-компоненты

протокол: заголовок протокола, такой как http, https, ftp и т. д.;
хост: доменное имя хоста или IP-адрес;
порт: номер порта;
путь: путь к каталогу;
запрос: параметры запроса;
хэш: хеш-значение после # используется для определения местоположения определенного места.

процесс разбора

сначала браузерDNSКэш, если есть, использовать кеш браузера напрямую
Если нет, запросите компьютер локальноDNSкеш (локальный хост)
Запросить рекурсию еще нетDNSСервер (то есть сетевой провайдер, обычно у этого сервера будет свой кеш)
Если кеша все равно нет, то нужно пройти корневой сервер имён иTLDСервер доменных имен в соответствующий органDNSСервер находит запись и кэширует ее на рекурсивном сервере, а затем рекурсивный сервер возвращает запись на локальный сервер.

"⚠️Примечание:"

❝

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

❞

отправить HTTP-запрос

После получения IP-адреса вы можете инициировать HTTP-запрос. Суть HTTP-запроса заключается в построении запроса TCP/IP. ** При установлении соединения требуется «3-стороннее рукопожатие».Проверка также требуется для отключения ссылки«4-кратная волна»** для проверки, чтобы обеспечить передачу可靠性.

3 рукопожатия

Первое рукопожатие: клиент отправляет пакет данных с битовым кодом SYN = 1 (установлен бит флага SYN) и случайным образом генерирует на сервер начальный порядковый номер Seq = J. Сервер информируется с помощью SYN = 1 (установлено), что клиент запросил установить соединение.
Второе рукопожатие: после того, как сервер получит запрос, он должен подтвердить онлайн-информацию и отправить номер подтверждения клиенту. Ack = (клиентский Seq +1, J+1), SYN = 1, ACK = 1 (SYN, ACK бит флага установлен), случайно сгенерированный пакет с порядковым номером Seq = K.
Третье рукопожатие: клиент проверяет правильность подтверждения после его получения, то есть последовательность +1 (J+1), отправленную в первый раз, и равен ли битовый код ACK 1. Если это правильно, клиент отправит Ack = (Seq+1 на стороне сервера, K+1), ACK = 1 и пакет подтверждения, чей порядковый номер Seq является номером подтверждения сервера J. После того, как сервер получит его и подтвердит ранее отправленное значение Seq(K+1) и ACK=1 (ACK установлен), соединение устанавливается успешно.

3次握手.gif

"Откровенно понимаю:"

(Клиент: привет, вы сервер? Сервер: привет, я сервер, вы клиент Клиент: да, я клиент. После успешного установления следующим шагом будет формальная передача данных.)

4 волны

Клиент отправляет пакет FIN Seq = M (набор FIN, порядковый номер — M), чтобы закрыть передачу данных от клиента к серверу.
Когда сервер получает этот FIN, он отправляет обратно ACK, подтверждая, что порядковый номер Ack является полученным порядковым номером M+1.
Сервер закрывает соединение с клиентом и отправляет клиенту FIN Seq = N.
Клиент отправляет обратно сообщение ACK для подтверждения, а порядковый номер подтверждения Ack представляет собой полученный порядковый номер N+1.

4次挥手.gif

"Откровенно понимаю:"

(Активная сторона: Я закрыл для вас активный канал, и я могу только пассивно его получать. Пассивная сторона: Я получил информацию о том, что канал закрыт. Пассивная сторона: Тогда я также скажу вам, что мой активный канал для вас также закрыт.Активная сторона: данные наконец получены, после чего две стороны не могут общаться)

Сетевой протокол уровня 5

1. Прикладной уровень (DNS, HTTP): DNS преобразуется в IP и отправляет HTTP-запрос;

2. Транспортный уровень (TCP, UDP): установить TCP-соединение (3-стороннее рукопожатие);

3. Сетевой уровень (IP, ARP): IP-адресация;

4. Канальный уровень (PPP): инкапсулируется в кадры;

5. Физический уровень (передача битовых потоков с использованием физических носителей): Физическая передача (через витые пары, электромагнитные волны и другие носители).

«Семиуровневая структура OSI: физический уровень, уровень канала передачи данных, сетевой уровень, транспортный уровень, сеансовый уровень, уровень представления, прикладной уровень»

Сервер получает запрос и отвечает

HTTP-запрос поступает на сервер, и сервер выполняет соответствующую обработку. Наконец, данные передаются в браузер, то есть возвращается сетевой ответ.

Как и часть запроса, сетевой ответ состоит из трех частей: строки ответа, заголовка ответа и тела ответа.

Что делать после завершения ответа? TCP-соединение разорвано?

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

код состояния

Код состояния состоит из 3 цифр, первая цифра определяет категорию ответа, и есть пять возможных значений:

1xx: Информация об индикации — указывает, что запрос получен и обработка продолжается.
2xx: Успех — указывает, что запрос был успешно получен, понят, принят.
3xx: Перенаправление — необходимо предпринять дальнейшие действия для выполнения запроса.
4xx: Ошибка клиента — запрос содержит синтаксическую ошибку или запрос не может быть выполнен.
5xx: ошибка на стороне сервера — серверу не удалось выполнить допустимый запрос. Часто встречающиеся коды состояния: 200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500 (пожалуйста, найдите их сами).

Сервер возвращает соответствующий файл

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

Браузер анализирует отображаемую страницу

После того, как браузер получит файлы HTML, CSS, JS, как он отображает страницу на экране?

Разобрать HTML для построения дерева DOM

После того, как браузер получит веб-страницу, возвращенную сервером, он сначала определитDTDТип анализируется соответствующим образом, и процесс анализа будет передан внутреннему потоку рендеринга графического интерфейса для обработки.

"DTD (определение типа документа) определение типа документа"

Общие определения типов документов

//HTML5文档定义
<!DOCTYPE html>
//用于XHTML 4.0 的严格型 
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
//用于XHTML 4.0 的过渡型 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
//用于XHTML 1.0 的严格型 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
//用于XHTML 1.0 的过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Задача интерпретатора HTML состоит в том, чтобы интерпретировать веб-страницу или ресурс HTML, полученный из сети или локального диска, из потока байтов вDOM树🌲 Структура

HTML解释器.png

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

Для многопоточного интерпретатора весь процесс интерпретации, компоновки и рендеринга после потока символов в основном передается отдельному потоку рендеринга для управления (не абсолютно). Поскольку дерево DOM можно создать и получить к нему доступ только в потоке рендеринга, процесс построения дерева DOM может происходить только в потоке рендеринга. Однако фазу от строки к слову можно передать в отдельный поток, что и использует браузер Chrome. После интерпретации в слова Webkit передает полученные слова обратно в поток рендеринга пакетами.

Во время этого процесса, если обнаруженный узел представляет собой код JS, он вызоветJS引擎Интерпретируйте и выполняйте код JS, в настоящее время из-заJS引擎а такжеGUI渲染线程взаимное исключение,GUI渲染线程Он будет приостановлен, и процесс рендеринга остановится.Если дерево DOM будет изменено во время выполнения кода JS, построение DOM необходимо начать заново.

Если узел должен зависеть от других ресурсов, изображений/CSS и т. д., для их загрузки будет вызван загрузчик ресурсов сетевого модуля, они асинхронны и не будут блокировать построение текущего дерева DOM.

Если вы столкнулись с URL-адресом ресурса JS (не помеченным как асинхронный), вам необходимо остановить текущее построение DOM до тех пор, пока ресурс JS не будет загружен иJS引擎После выполнения продолжают построить DOM

Разобрать CSS для построения дерева CSSOM

Интерпретатор CSS интерпретирует файл CSS во внутреннюю структуру представления и создает дерево правил CSS.Этот процесс аналогичен разбору DOM.CSSБайты преобразуются в символы с последующим лексическим анализом и разбором, и, наконец, составляютсяCSS对象模型(CSSOM)древовидная структура

Построить дерево рендеринга

ЖдатьDOM Treeа такжеCSSOM TreeПосле того, как все они построены, они объединяются в дерево рендеринга.（Render Tree）,渲染树Содержит только узлы, необходимые для рендеринга веб-страницы, а затем используется для расчета макета каждого видимого элемента и вывода в процесс рисования для рендеринга пикселей на экране.

Рендеринг (макет, рисунок, композитинг)

Расчет стилей CSS;
построить дерево рендеринга;
Макет, основные координаты позиционирования и размер, нужно ли обернуть, различныеposition overflow z-indexАтрибуты;
рисовать, рисовать образ.

Этот процесс более сложен и включает в себя два понятия: reflow (перекомпоновка) и repain (перерисовка). Каждый элемент в узле DOM существует в виде блочной модели, которая требует от браузера вычисления его положения и размера.Этот процесс называется relow, когда положение, размер и другие свойства блочной модели, такие как цвет, шрифт , После того, как он определен, браузер начинает отрисовывать содержимое, этот процесс называется перерисовкой. Страницы обязательно подвергаются перекомпоновке и перерисовке при первой загрузке. Процесс перекомпоновки и перерисовки очень требователен к производительности, особенно на мобильных устройствах, он может испортить работу пользователя и иногда вызывать зависание страницы. Таким образом, мы должны уменьшить reflow и repain как можно меньше.

Концепции Reflow и Repaint здесь разные:

(1) Оплавление: то есть оплавление. Обычно означает, что содержимое, структура, положение или размер элемента изменились, что требует пересчета стилей и деревьев рендеринга.

(2) Перекрасить: то есть перекрасить. Это означает, что изменение элемента влияет только на внешний вид элемента (например, цвет фона, цвет границы, цвет текста и т. д.), в настоящее время вам нужно только применить новый стиль для рисования элемента.

Стоимость перекомпоновки выше, чем перерисовки, а перекомпоновка узла часто приводит к перекомпоновке дочерних узлов и одноранговых узлов, поэтому схема оптимизации обычно это включает, и старайтесь избегать перекомпоновки.

«Перекомпоновка должна вести к перерисовке, но перерисовка не обязательно ведет к перекомпоновке»

"составной"

Последний шаг синтеза (composite), на этом шаге браузер отправит информацию о каждом слое на графический процессор, а графический процессор синтезирует каждый слой и отобразит его на экране.

Нормальные и составные слои

Таким образом, можно просто понять, что слои, отображаемые браузером, обычно включают две категории:普通图层так же как复合图层

Прежде всего, обычный документооборот можно понимать как составной слой (здесь называемый默认复合层, независимо от того, сколько элементов добавлено, фактически они находятся в одном составном слое)

Во-вторых, абсолютная компоновка (то же, что и фиксированная), хотя ее можно отделить от обычного потока документов, она все же принадлежит默认复合层.

Затем вы можете пройти硬件加速способ объявить新的复合图层, он будет выделять ресурсы отдельно (и конечно же тоже вне обычного документооборота, так что какие бы изменения в этом составном слое не коснулись默认复合层Перерисовать в )

Это можно понять просто:«В графическом процессоре каждый композитный слой рисуется отдельно, поэтому они не влияют друг на друга», именно поэтому некоторые сцены имеют отличное аппаратное ускорение

МогуChrome源码调试 -> More Tools -> Rendering -> Layer bordersВидите, желтый цвет — это информация о составном слое.