Принципы, связанные с браузером (вопросы для интервью) подробное резюме 1

1. Сколько процессов нужно запустить Chrome, чтобы открыть страницу? Какие процессы?

Браузер запускается из закрытого состояния, а затем для открытия новой страницы требуется как минимум 1 сетевой процесс, 1 процесс браузера, 1 процесс графического процессора и 1 процесс рендеринга, всего 4 процесса; сервер, сетевой процесс и процесс графического процессора общий и не будет перезапущен.Если две страницы принадлежат одному и тому же сайту, и страница b открыта со страницы a, то они также будут совместно использовать процесс рендеринга, иначе будет открыт новый процесс рендеринга.

Последний браузер Chrome включает в себя: 1 основной процесс браузера (браузер), 1 процесс графического процессора, 1 сетевой (сетевой) процесс, несколько процессов рендеринга и несколько процессов плагинов.

浏览器进程: в основном отвечает за отображение интерфейса, взаимодействие с пользователем, управление подпроцессами, а также обеспечивает хранение и другие функции.
渲染进程: основная задача состоит в том, чтобы преобразовать HTML, CSS и JavaScript, чтобы пользователь мог взаимодействовать с механизмом макета страницы V8, механизм JavaScript и Blink работают в процессе, по умолчанию Chrome создает процесс рендеринга для каждой метки вкладки. Из соображений безопасности процесс рендеринга выполняется в режиме песочницы.
GPU 进程: На самом деле, когда Chrome был впервые выпущен, GPU-процесса не было. Первоначальное намерение использования графического процессора состоит в том, чтобы добиться эффекта 3D CSS, но затем веб-страница и пользовательский интерфейс Chrome выбирают использование графического процессора для рисования, что делает графический процессор обычным требованием для браузеров. Наконец, Chrome также представил процессы графического процессора в своей многопроцессорной архитектуре.
网络进程: В основном отвечает за загрузку сетевых ресурсов страницы.Раньше выполнялся как модуль в процессе браузера, и только недавно стал самостоятельным и стал отдельным процессом.
插件进程: он в основном отвечает за работу плагина.Поскольку плагин легко падает, его необходимо изолировать процессом плагина, чтобы гарантировать, что сбой процесса плагина не повлияет на браузер и страница.

Цитирование ответа"Принцип работы и практика браузера"содержание

2. Как обеспечить полную доставку файла подкачки в браузер?

Данные в Интернете передаются посредством пакетов. Чтобы пакеты данных передавались в Интернете, они должны соответствовать Интернет-протоколу (IP). Различные онлайн-устройства в Интернете имеют уникальные адреса. Адрес — это просто число. Если вы знаете конкретный адрес, вы можете отправить информация здесь.

Если вы хотите отправить пакет с хоста A на хост B, информация об IP-адресе хоста B будет добавлена к пакету перед передачей, чтобы его можно было правильно адресовать во время передачи. Кроме того, к пакету данных добавляется IP-адрес самого хоста А, и с этой информацией хост Б может ответить хосту А. Эта дополнительная информация упаковывается в структуру данных, называемую заголовком IP. Заголовок IP — это информация в начале пакета данных IP, включая версию IP, исходный IP-адрес, целевой IP-адрес, время жизни и другую информацию.

IP — очень низкоуровневый протокол, он отвечает только за передачу пакетов данных на компьютер другой стороны, но компьютер другой стороны не знает, какой программе передать пакет данных, передать ли его браузеру или браузеру. слава короля? Следовательно, необходимо разработать протоколы на основе IP, которые могут работать с приложениями.Наиболее распространенным является用户数据包协议（User Datagram Protocol)，简称UDPи传输控制协议（Transmission Control Protocol）,简称TCP.

Основной процесс передачи:

Верхний уровень передает пакет транспортному уровню.
Транспортный уровень добавляет пакетUDP 头, сформируйте новый пакет данных UDP, а затем передайте новый пакет данных UDP сетевому уровню.
Затем сетевой уровень добавляет заголовок IP к пакету данных, чтобы сформировать новый пакет данных IP, и передает его нижнему уровню.
Пакет данных передается на сетевой уровень узла B, где узел B распаковывает информацию заголовка IP и передает часть распакованных данных на транспортный уровень.
На транспортном уровне заголовок UDP в пакете данных будет разобран, и часть данных будет передана приложению верхнего уровня в соответствии с номером порта, указанным в UDP.
Наконец, пакет данных отправляется в приложение верхнего уровня хоста B.

Цитирование ответа"Принцип работы и практика браузера"содержание

3. В чем разница между UDP и TCP?

Протокол TCP присваивает метки сегментам при передаче сегментов данных, протокол UDP этого не делает.
Протокол TCP надежен; протокол UDP не надежен
Протокол TCP ориентирован на установление соединения; протокол UDP не требует установления соединения.
Протокол TCP имеет высокую нагрузку и использует виртуальные каналы; UDP не использует соединение
Отправитель протокола TCP должен подтвердить, получил ли получатель сегмент данных (протокол трехстороннего рукопожатия).
Протокол TCP использует оконную технологию и управление потоком

характеристика	TCP	UDP
подключаться ли	ориентированный на соединение	без соединения
Надежность передачи	надежный	Ненадежный
Применение	передавать большие объемы данных	передавать небольшие объемы данных
скорость	медленный	быстрый

4. Каков подробный процесс передачи TCP?

Для установления TCP-соединения выполняется трехстороннее рукопожатие.

Первое рукопожатие: установление соединения. Клиент отправляет сегмент запроса на соединение, устанавливает бит SYN в 1 и Sequence Number в x, затем клиент переходит в состояние SYN_SEND и ожидает подтверждения от сервера;
Второе рукопожатие: сервер получает сегмент SYN. Когда сервер получает SYN-сегмент от клиента, ему необходимо подтвердить SYN-сегмент и установить для номера подтверждения значение x+1 (порядковый номер+1). , Порядковый номер равен y; сервер помещает всю указанную выше информацию в сегмент. (т.е. сегмент SYN+ACK) и одновременно отправляет его клиенту.В это время сервер переходит в состояние SYN_RECV;
Третье рукопожатие: клиент получает от сервера сегмент SYN+ACK. Затем установите номер подтверждения на y + 1 и отправьте сегмент ACK на сервер.После отправки сегмента и клиент, и сервер переходят в состояние ESTABLISHED и завершают трехстороннее рукопожатие TCP. После завершения трехстороннего рукопожатия клиент и сервер могут начать передачу данных.

ACK: Этот флаг указывает, что поле ответа является допустимым, то есть указанный выше номер ответа TCP будет включен в пакет данных TCP, существует два значения: 0 и 1. Когда он равен 1, это означает, что Поле ответа допустимо, в противном случае оно равно 0. Протокол TCP предусматривает, что только когда ACK=1 действителен, а также предусматривает, что ACK всех отправленных сообщений после установления соединения должен быть равен 1. SYN (SYNchronization): используется для синхронизации порядкового номера при установлении соединения. Когда SYN=1 и ACK=0, это указывает, что это сообщение с запросом на соединение. Если другая сторона соглашается установить соединение, она должна установить в ответном сообщении SYN = 1 и ACK = 1. Таким образом, установка SYN в 1 указывает, что это запрос на соединение или сообщение о принятии соединения. FIN (finis) — это конец, значение терминации, используемое для освобождения соединения. Когда FIN = 1, это указывает на то, что данные отправителя этого сегмента были отправлены, и требуется разорвать соединение.

Отправьте HTTP-запрос, сервер обрабатывает запрос и возвращает результат ответа.

После установления TCP-соединения браузер может отправлять запросы на сервер по протоколу HTTP/HTTPS. Когда сервер получает запрос, он анализирует заголовок запроса. Если в заголовке есть информация, относящаяся к кешу, например if-none-match и if-modified-since, он проверяет, действителен ли кеш. , код состояния 304. Если он недействителен, будет снова возвращен ресурс с кодом состояния 200.

закрыть TCP-соединение

Первый разрыв: хост 1 (может быть клиентом или сервером), установить Sequence Number и Acknowledgment Number и отправить сегмент FIN на хост 2; в это время хост 1 входит в состояние FIN_WAIT_1; это означает, что хост 1 существует нет данных для отправки на хост 2;
Второй разрыв: узел 2 получает сегмент FIN, отправленный узлом 1, и возвращает сегмент ACK узлу 1. Номер подтверждения равен порядковому номеру плюс 1, узел 1 переходит в состояние FIN_WAIT_2, узел 2 сообщает узлу 1 «I». согласен" ваш запрос на закрытие;
Третий разрыв: хост 2 отправляет сегмент FIN хосту 1, запрашивая закрытие соединения, и хост 2 переходит в состояние LAST_ACK;
Четвертый разрыв: хост 1 получает FIN-сегмент, отправленный хостом 2, отправляет ACK-сегмент хосту 2, после чего хост 1 переходит в состояние TIME_WAIT; после того, как хост 2 получает ACK-сегмент от хоста 1, он закрывает соединение; при этом Дело в том, что если узел 1 по-прежнему не получает ответа после ожидания 2MSL, это доказывает, что серверная часть была отключена нормально.Ну, узел 1 также может закрыть соединение.

5. Почему многие сайты быстро открываются со второго раза?

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

Кэш DNS

Главное, связать соответствующий IP с доменным именем локально в браузере, чтобы разрешение DNS было очень быстрым.

MemoryCache

Относится к кешу, существующему в памяти. С точки зрения приоритета, это первый кеш, который пытается найти браузер. С точки зрения эффективности это самый быстрый вид кэша. Кэши памяти быстрые и «короткие». Это "зависит от жизни и смерти" с процессом рендеринга.Когда процесс завершится, то есть после закрытия вкладки, данных в памяти уже не будет.

кеш браузера

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

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

Сильный кеш

强缓存используется в заголовке httpExpiresиCache-Controlконтролируется двумя полями. В сильном кеше, когда запрос отправляется снова, браузер будет судить, «попал» ли целевой ресурс в сильный кеш, в соответствии с истечением срока действия и управлением кешем.

Для реализации сильного кэширования мы использовали истечения срока действия в прошлом. Когда сервер возвращает ответ, запишите время истечения срока действия в поле expires в заголовках ответа. нравится

expires: Wed, 12 Sep 2019 06:12:18 GMT

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

Из такого описания нетрудно догадаться, что expires проблематичен, и его самая большая проблема — зависимость от «местного времени». Если настройки времени сервера и клиента могут отличаться, или я напрямую изменяю время клиента вручную, то expires не оправдает наших ожиданий.

Учитывая ограничения срока действия, добавлен HTTP1.1.Cache-Controlполе для завершения задачи истекает. То, что может сделать expire, может Cache-Control; чего не может expire, может Cache-Control. Поэтому Cache-Control можно рассматривать как полноценную замену expires. В текущей практике внешнего интерфейса единственная цель, по которой мы продолжаем использовать expires, — это обратная совместимость.

cache-control: max-age=31536000

В Cache-Control мы контролируем срок действия ресурсов через max-age. max-age - это не отметка времени, а продолжительность времени. В этом примере максимальный возраст составляет 3 153 6000 секунд, что означает, что ресурс действителен в течение 3 153 6000 секунд, что позволяет избежать потенциальных проблем, вызванных временными метками.

Cache-Control 相对于 expires 更加准确，它的优先级也更高。当 Cache-Control 与 expires 同时出现时，我们以 Cache-Control 为准。

Согласовать кеш

Согласование кеша зависит от связи между сервером и браузером. В соответствии с согласованным механизмом кэширования браузер должен запросить у сервера соответствующую информацию о кеше, а затем определить, следует ли повторно инициировать запрос, загрузить полный ответ или получить кэшированные ресурсы локально. Если сервер сообщает, что кешированный ресурс не изменен, ресурс будет перенаправлен в кеш браузера.这种情况下网络请求对应的状态码是 304。

Согласовать реализацию кеша, начиная сLast-ModifiedприбытьEtag, Last-Modified — это отметка времени, которая будет возвращена с заголовками ответа при первом запросе, если мы включили согласованное кэширование:

Last-Modified: Fri, 27 Oct 2017 06:35:57 GMT

Затем каждый раз, когда мы запрашиваем, мы будем приносить поле временной метки с именем If-Modified-Since, и его значение — это последнее измененное значение, возвращенное ему последним ответом:

If-Modified-Since: Fri, 27 Oct 2017 06:35:57 GMT

После того, как сервер получит эту временную метку, он сравнит временную метку со временем последней модификации ресурса на сервере, чтобы определить, изменился ли ресурс. Если есть изменение, будет возвращено полное содержимое ответа, а в заголовки ответа будет добавлено новое значение Last-Modified; в противном случае будет возвращен ответ 304, показанный выше, а в заголовки ответа не будет добавлено значение Last- Измененное поле.

Использование Last-Modified имеет некоторые недостатки, наиболее распространенными из которых являются следующие два сценария:

Мы отредактировали файл, но содержимое файла не изменилось. Сервер не знает, действительно ли мы изменили файл, он все равно судит по времени последнего редактирования. Поэтому, когда этот ресурс запрашивается снова, он будет рассматриваться как новый ресурс, который вызовет полный ответ — когда его не следует повторно запрашивать, он будет повторно запрошен.
Когда мы модифицируем файл слишком быстро (например, для завершения изменения требуется 100 мс), поскольку If-Modified-Since может проверять только разницу во времени в секундах как наименьшую единицу измерения, он не может воспринять изменение. -запрос, но не повторный запрос.

Эти два сценария на самом деле указывают на одну и ту же ошибку — сервер неправильно воспринимает изменения файлов. Чтобы решить эту проблему,Etag 作为 Last-Modified 的补充出现了。

EtagЭто уникальная идентификационная строка, сгенерированная сервером для каждого ресурса.Эта идентификационная строка может быть закодирована на основе содержимого файла.Пока содержимое файла отличается, их соответствующие Etags различны, и наоборот. Поэтому Etag может точно воспринимать изменения файлов.

Процесс генерации Etag требует от сервера дополнительных накладных расходов, что повлияет на производительность сервера, что является его недостатком. Поэтому включение Etag требует от нас оценки ситуации. Как мы только что упомянули, Etag не заменяет Last-Modified, он может существовать только как дополнение и расширение Last-Modified.

Etag 在感知文件变化上比 Last-Modified 更加准确，优先级也更高。当 Etag 和 Last-Modified 同时存在时，以 Etag 为准。

Service Worker Cache

Service Worker — это поток Javascript, независимый от основного потока. Он отделен от формы браузера, поэтому прямого доступа к DOM нет. Такая независимая личность делает «личное поведение» сервисного работника не влияющим на производительность страницы. Этот «закулисный работник» может помочь нам реализовать такие функции, как автономное кэширование, отправка сообщений и сетевой прокси. Автономный кеш, который мы реализуем с помощью Service Worker, называется Service Worker Cache.

Жизненный цикл Service Worker включает три этапа: установка, активация и работа. После установки Service Worker он всегда будет существовать и будет переключаться только между активным и рабочим состоянием, если мы не завершим его активно. Это важное предварительное условие для реализации автономного хранилища.

Push Cache

Кэш push-уведомлений относится к кешу, который существует на этапе push-уведомлений сервера HTTP2. Это знание относительно новое, и приложение пока находится в зачаточном состоянии.Ограниченность сферы применения не означает, что оно не важно — HTTP2 — это тренд и будущее. В данный момент, когда он еще не получил широкого распространения, я все же надеюсь, что вы сможете понять ключевые особенности Push Cache:

Push Cache — это последняя линия защиты кэширования. Браузер будет запрашивать push-кэш только в том случае, если кэш памяти, HTTP-кэш и кэш сервис-воркеров пропущены.
Push Cache — это кеш, который существует на этапе сеанса. Когда сеанс завершается, кеш также освобождается.
Разные страницы могут использовать один и тот же Push-кэш, если они используют одно и то же соединение HTTP2.

использованная литература

Geek Time "Принцип работы и практика браузеров"
Буклет Nuggets "Принципы и методы оптимизации производительности внешнего интерфейса"

Наконец

Это нелегко организовать, пожалуйста, поставьте мне палец вверх~~
Для получения дополнительной информации, пожалуйста, следуйте за мнойblog, дай мне звезду~~
Если вы считаете, что контент полезен, вы можете обратить внимание на мой официальный аккаунт «Front-end Q» и учиться и расти вместе~~