Оригинальный адрес:Справка.GitHub.IO/2019/02/20/…
предисловие
Как фронтенд-разработчики, мы обычно тратим больше всего времени на работу с браузерами. В начальном интервью более классический вопрос: введите URL-адрес в адрес браузера, нажмите Enter, что произошло? Что именно делает браузер? Я полагаю, что многие люди будут иметь в уме общую схему, но как только они доберутся до подробного процесса, они не смогут ответить. Итак, как фронтенд-разработчик, что следует добавить, чтобы ответить на этот вопрос?
Рабочий процесс браузера
Для браузера, когда вы вводите URL-адрес в адресную строку, браузер превращает URL-адрес в веб-страницу, отображаемую на экране. Общий процесс выглядит следующим образом:
- Браузер принимает URL-адрес для запуска потока сетевых запросов.
- Браузер делает полный HTTP-запрос
- Сервер получает запрос в фоновом режиме для получения запроса
- Запросить страницу с помощью http-запросов
- Разобрать HTML-код, возвращенный из запроса, в дерево DOM.
- Анализ модели визуального формата CSS
- Отрисовка элементов в соответствии со свойствами CSS, получение растровых изображений в памяти
- Композиция в растровые изображения
- нарисовать страницу
Браузер принимает URL-адрес, чтобы открыть поток сетевых запросов.
Первый пункт в основном касается процесса браузера, модели потоков и рабочего механизма JS:
многопроцессный браузер
Большинство браузеров являются многопроцессорными, есть главный процесс, и каждая вкладка открывает новый процесс (в некоторых случаях несколько вкладок объединяют процессы). Процессы могут включать главные процессы, процессы подключаемых модулей, графические процессоры, вкладки (ядра браузера) и многое другое.
- Браузерный процесс: основной процесс браузера (отвечает за координацию и главный контроль), есть только один
- Процессы сторонних подключаемых модулей: один процесс для каждого типа подключаемого модуля, создаваемый только при использовании подключаемого модуля.
- Процесс GPU: максимум один, для 3D-рендеринга
- Процесс рендеринга браузера (ядро): по умолчанию один процесс на странице вкладки, независимо друг от друга, управляет рендерингом страницы, выполнением скрипта, обработкой событий и т. д. (иногда оптимизировано, например, несколько пустых вкладок будут объединены в один процесс)
Многопоточное ядро браузера
Каждую вкладку можно рассматривать как процесс ядра браузера, и тогда этот процесс является многопоточным и имеет несколько типов подпотоков:
- Графический поток
- Поток движка JS
- поток триггера события
- поток таймера
- поток сетевых запросов
Запустите сетевой поток, чтобы сделать полный HTTP-запрос
Эта часть в основном включает в себя: DNS-запрос, построение tcp/ip-запроса, пятиуровневый Интернет и т. д.
DNS-запрос
Если ввод представляет собой доменное имя, его необходимо преобразовать в IP с помощью DNS.Общий процесс выглядит следующим образом:
- Если в браузере есть кеш, используйте кеш браузера напрямую, в противном случае используйте локальный кеш, если нет, используйте хост
- Если он недоступен локально, запрашивается DNS-сервер доменных имен (конечно, посередине может быть маршрутизация, также есть кэши и т. д.), и запрашивается соответствующий IP-адрес.
tcp/ip-запрос
Запрос tcp/ip здесь должен понимать правило трехэтапного рукопожатия для установления соединения и четырех волн при отключении.Вы можете обратиться к предыдущему блогу:blog.CSDN.net/Справка...
Интернет-протокол уровня 5
На самом деле, это понятие достаточно сложно запомнить полностью. На самом деле это концепция: от клиента для отправки HTTP-запроса на сервер для получения, в середине будет ряд процессов. Вкратце: от прикладного уровня для отправки HTTP-запроса до транспортного уровня для установления TCP/IP-соединения через трехстороннее рукопожатие, до IP-адресации сетевого уровня, до инкапсуляции и кадрирования канала передачи данных. уровень, и, наконец, на физический уровень передачи мультимедиа. Конечно, прием на стороне сервера — это обратный шаг. Пятиуровневый стек протоколов Intel на самом деле представляет собой: 1. Уровень приложений (dns, http) 2. Транспортный уровень (tcp, udp) для установления TCP-соединения (трехстороннее рукопожатие) 3. Сетевой уровень (IP, ARP) IP-адресация 4. Канальный уровень (PPP) 5. Физический уровень Семиуровневая структура OSI: физический уровень, уровень канала передачи данных, сетевой уровень, транспортный уровень, сеансовый уровень, уровень представления, прикладной уровень. Уровень представления: в основном занимается представлением обмениваемой информации в двух системах связи, включая обмен форматами данных, шифрование и дешифрование данных, сжатие данных и преобразование типа терминала и т. д. Уровень сеанса: он специально управляет диалогом между различными пользователями и процессами, например, контролирует процесс входа в систему и выхода из нее.
Сетевой протокол HTTP
Протокол HTTP основан на протоколе TCP.Модель запроса-ответа указана на основе TCP, который определяет, что связь должна быть инициирована браузером.Сначала давайте разберемся с форматом протокола HTTP:
Формат протокола HTTP
Протокол HTTP можно условно разделить на следующие части: где путь — это путь запроса, версия — фиксированная строка, и каждая из следующих частей вводится по очереди:
Метод запроса HTTP-метода
В части метода строки запроса указывается тип операции HTTP. Ниже приведены несколько распространенных методов запроса:
- GET: все браузеры, обращающиеся к страницам через адреса, являются запросами на получение.
- POST: отправка общей формы
- HEAD: Аналогично get, разница в том, что возвращается только заголовок запроса.
- PUT: означает добавление ресурса
- DELETE: указывает, что ресурс удален.
- ПОДКЛЮЧЕНИЕ: в основном используется для HTTPS и WebSocket
- OPTIONS
- TRACE
Код состояния HTTP
Общие коды состояния следующие:
- 1xx: предварительный ответ
- 2xx: запрос выполнен успешно, например 200
- 3xx: цель запроса изменилась, например, 301 и 302 для временного и постоянного перенаправления, 304 для клиента, не обновившего содержимое.
- 4xx; ошибка запроса, например 403, нет разрешения, 404 доступ к ресурсу не существует
- 5xx: ошибка сервера, например, ошибка сервера 500, временная ошибка сервера 503 и т. д.
Во фронтенд-разработке самая знакомая серия — это не что иное, как знак успеха из 200 запросов, который всем нравится.На собеседованиях часто задают 304 вопроса о кэшировании и 301 и 302 вопроса о перенаправлении.
HTTP HEAD (заголовок HTTP)
Заголовок HTTP можно рассматривать как пару ключ-значение.В стандарте HTTP заголовок запроса выглядит следующим образом:
HTTP Request Body
Тело HTTP-запроса в основном используется для отправки формы, общий формат тела:
- application/json
- application/x-www-form-urlencoded: HTML-запрос, отправленный с использованием тега формы, сгенерированный по умолчанию.
- multipart/form-data: формат, используемый при загрузке файла.
HTTPS
HTTPS добавляет две функции на основе HTTP, одна для определения личности целевого сервера запроса, а другая для обеспечения того, чтобы передаваемые данные не были подделаны или перехвачены.Этот протокол использует зашифрованный канал для передачи HTTP-контент, поэтому необходимо обмениваться данными со службой End-CV по зашифрованному каналу TLS. Подробности можно найти здесь:tools.I ETF.org/HTML/RFC281…
HTTP2
HTTP2 — это обновленная версия HTTP1.1 с двумя основными улучшениями: одно — поддержка push-уведомлений сервера, а другое — поддержка мультиплексирования TCP-каналов: один и тот же TCP-канал используется для передачи нескольких HTTP-запросов. Подробнее см.:tools.I ETF.org/HTML/RFC754…
Построить DOM-дерево
После того, как браузер использует HTTP для запроса страницы с сервера, как проанализировать HTML-код, возвращаемый запросом, и построить DOM-дерево?
Как потоки символов разбиваются на слова
Сначала браузер считывает полученный HTML-код, преобразует его в поток символов в соответствии с указанным методом кодирования файла, например UTF-8, а затем преобразует строку в токен слова. Так что же такое слова? Слово — это наименьшая единица в принципе компиляции, такая как начало тега, атрибут, конец тега, комментарий, узел CDATA. Токен идентифицирует тип текущего токена. Например:<p class="a" >hello</p>
Здесь его можно разделить на
(конец тега p), hello (текст),</p>(конечный тег)
Построить DOM-дерево
Следующий шаг — превратить слова в дерево DOM. При построении дерева DOM узлы генерируются путем потребления токенов при их создании.
<html>
<head>
<title>Web page parsing</title>
</head>
<body>
<div>
<h1>Web page parsing</h1>
<p>This is an example Web page.</p>
</div>
</body>
</html>
Построенное DOM-дерево:
Построить CSSOM
После построения дерева DOM текущий объект содержит только узлы и атрибуты без какой-либо информации о стиле, так как же браузер добавляет атрибуты CSS в дерево DOM? Мы знаем, что браузер обрабатывает весь процесс в потоке, мы получаем элементы, построенные DOM-деревом, проверяем правила, которым они соответствуют по очереди, а затем перезаписываем и корректируем их в соответствии с приоритетом правил.
Построить дерево рендеринга
Когда получены и дерево CSSOM, и дерево DOM, дерево рендеринга получается путем слияния двух деревьев:
макет и рисунок
После того, как браузер сгенерирует дерево рендеринга, оно будет выложено в соответствии с деревом рендеринга. В этом процессе каждый элемент должен определить точное положение и размер каждого узла на странице и превратить соответствующий блок в соответствующее растровое изображение. Элемент может соответствовать нескольким блокам (например, встроенным элементам, которые могут быть разделены на несколько строк).Каждый блок соответствует растровому изображению. Композиция превращает композицию частичного растрового изображения в слой композиции. Заключительный процесс рисования заключается в отображении составного растрового слоя на экране. Вот частый вопрос, перерисовывать и переплавлять? Справочник по конкретным связанным знаниям:сегмент fault.com/ah/119000001…
Суммировать
Рабочий процесс браузера примерно следующий:
Построить дерево DOM - Построить CSSOM - Построить дерево рендеринга - Макет - Рисовать