Я видел этот вопрос во многих вопросах интервью, поэтому я взял его и подробно изучил. Если есть какая-то ошибка, добро пожаловать, чтобы исправить ее.
Недавно построилиличный блог!
Многопроцессорная архитектура браузера
ввод из браузераURLВесь процесс рендеринга страницы завершается взаимодействием различных процессов в архитектуре браузера.
- Основной процесс браузера: управление дочерними процессами и предоставление сервисных функций
- Процесс рендеринга: рендеринг HTML, CSS и JS в интерфейс.На нем есть движок js v8 и движок набора текста Blink.Он создаст процесс рендеринга для каждой вкладки.
- Процесс графического процессора: изначально отвечал за обработку 3Dcss, а затем постепенно интерфейс пользовательского интерфейса также был передан графическому процессору для рисования.
- Сетевой процесс: процесс, отвечающий за сетевые запросы и загрузку сетевых ресурсов.
- Процесс плагина: отвечает за работу плагина, потому что плагин легко сломать, поместите его в отдельный процесс и не позволяйте ему влиять на другие
Обработать
От ввода информации пользователем до различных этапов отображения страницы задействованы разные процессы.Схема выглядит следующим образом:
Как видно из рисунка, для завершения всего процесса требуется взаимодействие различных процессов, и этот процесс можно грубо описать как:
-
Пользователь вводит url, обрабатывает введенную информацию, основной процесс начинает навигацию и передает ее сетевому процессу для работы
-
Сетевой процесс инициирует сетевой запрос, в котором может произойти перенаправление
-
После того, как сервер ответит на URL-адрес, основной процесс уведомит процесс рендеринга, и вы должны начать работу.
-
Процесс рендеринга готов. Если процесс рендеринга отправляет данные, это время называется отправкой документа.
-
Процесс рендеринга получает данные и завершает рендеринг страницы.
Конкретный процесс
1. Введите URL
Пользователи вводят URL, обрабатывая введенную информацию:
Если это строка структуры, отличная от URL, передать ее браузеру.двигатель по умолчаниюискать и изменять строку;
Если это строка структуры URL, основной процесс браузера передаст еесетевой процесс, начинай работать.
Найти кеш браузера 2.1
Сетевой процесс сначала проверит есть ли локальный кеш, если есть, то напрямую вернет ресурс процессу браузера, если нет, то следующим шагом будет DNS->IP->TCP
2.2DNS-разрешение
После того, как сетевой процесс получит URL-адрес, он сначала выполнит разрешение доменного имени DNS, чтобы получитьайпи адрес. Если протокол запроса — HTTPS, то также необходимо установить соединение TLS.
2.3 Установка TCP-соединения, трехстороннее рукопожатие
Следующим шагом является установление соединения TCP с сервером с использованием IP-адреса. После того, как соединение установлено, запрос отправляется на сервер.
3 ответа сервера
После того, как сервер получит информацию запроса, он сгенерирует строку ответа, заголовок ответа и тело ответа в соответствии с информацией запроса и отправит их сетевому процессу. После того, как сетевой процесс примет ответную информацию, он начинает анализировать содержимое заголовка ответа.
Процесс, с помощью которого сетевой процесс анализирует строку ответа и информацию заголовка ответа:
3.1 Перенаправление
Если код состояния строки ответа 301 (постоянная переадресация) и 302 (временная), то это означает, что вам нужно перенаправить на другой URL-адрес. В это время сетевой процесс прочитает адрес перенаправления из поля Location в заголовке ответа и повторно инициирует сетевой запрос.
3.2 Обработка данных ответа
Навигация будет проходить через заголовок запросаContent-typeПоле определяет тип данных тела ответа. Браузер использует это, чтобы решить, как отображать содержимое тела ответа.
Например: если это application/octet-stream, запрос будет обработан в соответствии с типом загрузки, и навигация завершится.
Если это text/html, это сообщает браузеру, что сервер возвращает формат html, и браузер уведомляет процесс рендеринга о том, что вам нужно работать.
4 Подготовьте процесс рендеринга
По умолчанию для каждой страницы выполняется один процесс рендеринга. Но если втот же сайт(То же имя корневого домена + протокол), то процесс рендеринга будет повторно использован.
5Подать документы
После того, как процесс рендеринга готов, процесс браузера отправляет «сообщение для отправки документа». После того, как процесс рендеринга примет сообщение, он возобновит конвейер передачи данных с сетевым процессом.
Когда передача данных будет завершена, процесс рендеринга сообщит процессу браузера,Подтвердить отправку документа, в это время браузер обновит страницу, статус безопасности, URL-адрес, историю пересылки и перенаправления.
На этом навигация заканчивается, и начинается этап рендеринга.
Примечание. Когда браузер начинает загружать адрес, значок на вкладке переходит в состояние загрузки. Но в это время страница, отображаемая на картинке, по-прежнему является содержимым страницы, которая была открыта ранее, и она не сразу заменяется страницей домашней страницы Baidu. Из-за необходимости ждать фазы отправки документа содержимое страницы будет заменено.
Процесс рендеринга в браузере
-
Браузеры не могут читать html напрямую и должны быть сначала собраныDomДерево.
-
Преобразуйте прочитанный css во что-то, что браузер может понятьcssomДерево.
Преобразование значений свойств в таблицах стилей для их нормализации. 2em анализируется как 32px, красный анализируется как rgb(255,0,0), полужирный анализируется как 700...
Рассчитать конкретный стиль каждого узла в дереве DOM. Вычисляется с использованием наследования css, приоритета css, каскадных правил css и т. д.
-
Браузер будет просматривать каждый видимый узел, начиная с корня дерева DOM, и добавлять эти узлы в список.оказыватьв дереве. Невидимые узлы не будут добавлены в дерево рендеринга, например, узлы с атрибутом display, для которого в CSS установлено значение none.
-
По сгенерированному дереву рендеринга делаеммакет(Также называется перекомпоновкой), получите точное положение и размер каждого узла на странице. (автоматическая перестановка). Результатом этапа компоновки является блочная модель, которая точно фиксирует точное положение и размер каждого элемента на экране, а все относительные измерения преобразуются в абсолютные значения пикселей на экране (перерисовываются).
-
Для создания иерархического дерева страницы формируются слой за слоем. Например, для некоторых сложных анимаций CSS, z-index и т. д. механизм рендеринга создаст для них специальные слои и сгенерирует соответствующиеДерево слоев.
-
После создания слоя механизм рендеринга выполняетрисовать. Композитный поток превращает слои иерархического дерева вплитка.
-
Растеризация графического процессора превращает плитки рядом с окном просмотра в растровые изображения, которые затем сохраняются в процессе графического процессора. (Поскольку страница может быть очень большой, и пользователь может видеть только часть страницы в области просмотра, будет очень дорого рисовать их все, поэтому поток композиции сначала будет генерировать растровые изображения в соответствии с тайлами рядом с областью просмотра. )
-
После завершения растеризации браузер переходит к процессу графического процессора, чтобы извлечь содержимое страницы и отобразить его на экране, что завершает этап рендеринга.
Перекомпоновать и перекрасить
переплавка
Перекомпоновка происходит в процессе рендеринга страницы браузером. Процесс вычисления дерева макета из дерева DOM и стиля называется перекомпоновкой. На этом шаге необходимо рассчитать размер и положение каждого элемента (игнорировать элемент с display:none )
перерисовать
Мы преобразуем дерево макета и стили в реальные пиксели на экране, этот этап называется перерисовкой узлов. так,Перерисовка должна привести к перерисовке, но перерисовка не обязательно ведет к перерисовке, и стоимость перерисовки выше, чем стоимость перерисовки.
Когда некоторые элементы в дереве рендеринга нуждаются в обновлении свойств, и эти свойства влияют только на внешний вид и стиль элемента, но не на макет, например цвет фона.
Когда происходят перекомпоновки и перерисовки
- Размер окна браузера изменяется (поскольку перекомпоновка вычисляет размер и положение элементов на основе размера окна просмотра)
- Когда страница отображается впервые
- добавить или удалить дом
- Изменить положение или размер элемента
оптимизация
Механизм оптимизации производительности браузера
- Сам браузер имеет свою собственную оптимизацию, он будет поддерживать очередь для обновления, аналогичную пакетной обработке для оптимизации, только когда задачи или временной интервал в очереди достигают порогового значения, браузер очищает очередь, так что несколько перекомпоновок и Перекрашивать делается один раз. Но если запускается событие синхронного макета, браузер принудительно очищает очередь (немедленно очищает очередь). Итак, мы хотим избежать запуска синхронных событий макета, мы знакомы со следующим:
getBoundingClientRect, getComputedStyle(), offsetTop, scrollWidth,
clientWidth,
Как уменьшить перекомпоновку и перерисовку
- Свести к минимуму перекомпоновку и перерисовку
- Используйте эл.стиль.cssText
- Добавьте имя класса напрямую
- Избегайте частых манипуляций со структурой DOM, при необходимости можно сначала
display：none(Поскольку эти элементы не появятся и не вызовут перерисовку перерисовки), дождитесь завершения операции dom, прежде чем отпускать их. - Элементы со сложной анимацией используют абсолютное позиционирование, чтобы сделать ихвне документооборотаУменьшите частые перекомпоновки родительских и последующих узлов
- Аппаратное ускорение CSS3/ускорение графического процессора заключается в использовании некоторого CSS для включения ускорения CUP, такого как преобразование, непрозрачность, фильтры, эти анимации не вызывают перекомпоновку и перерисовку.