Внутреннее устройство современных браузеров
Сводный график
Основной ЦП и ГП компьютера
ЦП: Центральный процессор (Центральный процессор), центральный процессор - это мозг компьютера. Каждое ядро ЦП будет выполнять разные задачи одну за другой. В настоящее время многие компьютеры являются многочиповыми и многоядерными.
GPU: Графический процессор (Graphic Processing Unit), GPU хорошо справляется с простыми задачами между ядрами и разработан для решения графики. В графической среде как «использовать поддержку графического процессора», так и «использовать ЦП» связаны с быстрым и плавным рендерингом.
Многие ядра графического процессора с гаечным ключом говорят, что могут выполнять только ограниченные задачи по обработке.
Когда компьютер включен, центральный и графический процессоры обеспечивают работу приложения. Как правило, приложения запускаются на ЦП и ГП с помощью механизмов, предоставляемых операционной системой.
Трехуровневая компьютерная архитектура: аппаратное обеспечение внизу, операционная система в середине и приложения вверху.
Выполнение программ в процессах и потоках Процессы и потоки
Обрабатывать как ограничивающую рамку, нить как абстрактную рыбу, плавающую внутри
Процесс можно описать как исполнитель приложения, в котором существуют потоки, выполняющие произвольные части процесса.
Когда приложение запускается, создается один или несколько процессов, помогающих приложению работать. Операционная система предоставляет часть «памяти», которую может использовать процесс. Все состояние приложения сохраняется в этом частном пространстве памяти. приложение закрыто, процесс будет закрыт.Операционная система освобождает память.
Процесс может запросить другой процесс операционной системы для выполнения другой задачи. В это время новому процессу будет выделена другая память, и процессы могут взаимодействовать через (IPC: Inter Process Communication). Если рабочий процесс приложения перестает отвечать на запросы, этот процесс можно перезапустить, не останавливая другие процессы в приложении.
Схематическая диаграмма независимых процессов, обменивающихся данными через IPC
архитектура браузера
Различные браузеры могут быть многопроцессорными или однопрозрачными.
Архитектура браузера Chrome, использующая многопроцессную архитектуру
Верхний уровень браузера — это процесс браузера, который координирует свои действия с другими прикладными модулями браузера.
Работа каждого процесса браузера Chrome:
- Browser Process:
- Адресная строка, панель закладок, кнопки «вперед» и «назад» и т. д.
- Невидимые некоторые операции, запросы, доступ к файлам и т.д.
- Rederer Process
- Отвечает за всю работу вкладки веб-страницы
- Plugin Process
- Процесс плагина, который обрабатывает плагины, используемые на веб-странице, такие как Flash-плагины
- GPU Process
- Отвечает за обработку ГПУ, связанной с работой * Есть и другие процессы, такие как: приложение расширения, процесс приложения
Различные процессы указывают на разные части пользовательского интерфейса браузера.
Каждый сайт (веб-страница) Google Chrome представляет собой независимый процесс, который гарантирует, что даже сбой веб-страницы не повлияет на другие веб-страницы. Преимущество наличия нескольких процессов в браузере — это безопасность и песочница. Поскольку операционная система предоставляет способ ограничения разрешений процессов, браузеры могут помещать определенные процессы в песочницу. Поскольку у процесса есть собственное пространство памяти, каждый процесс имеет копию общедоступной инфраструктуры, что также означает, что он будет занимать больше памяти.Когда операция достигнет своего предела, Chrome будет использовать одну и ту же страницу для разных вкладок одного и того же сайт процесс.
Когда Chrome работает на мощном оборудовании, он будет назначать разные служебные функциональные модули разным процессам для повышения стабильности, но при работе на слабых аппаратных устройствах некоторые служебные функциональные модули будут интегрированы в тот же процесс для экономии памяти, но соответствующая стабильность также будет снижаться.
Процесс рендеринга для каждого iframe) — Изоляция сайта
Изоляция сайта позволяет запускать каждый iframe в отдельном процессе рендеринга. Каждый сайт вкладок запускает отдельный процесс, а фреймы iframe на сайте запускают отдельный процесс рендеринга, так что на разных сайтах один и тот же фрейм может совместно использовать память.
Политика одинакового происхождения - это модель безопасности веб-сайта, то есть, если сайт не разрешен, другие сайты не могут получить свои данные. Изоляция процессов является наиболее эффективным средством разделения сайтов.
Схема изоляции сайта
Что происходит при навигации?
Запускается как процесс браузера (Browser Process)
Процесс браузера управляет всем, кроме Ta. В процессе браузера есть много потоков, таких как поток пользовательского интерфейса, который рисует кнопки браузера и поля ввода, сетевой поток, который обрабатывает сетевой стек для получения из Интернета, и тот, который контролирует доступ к файлам Хранить потоки. При вводе URL-адреса ввод обрабатывается потоком пользовательского интерфейса процесса браузера.
Вверху — пользовательский интерфейс браузера, внизу — граф процессов браузера с пользовательским интерфейсом, сетью и потоками хранения.
простая навигация
- ввод процесса
Тема пользовательского интерфейса процесса браузера сначала определяет, является ли это поисковый запрос или URL. Тема пользовательского интерфейса решает, поиск контента к поисковой системе или на сайт.
Поток пользовательского интерфейса спрашивает, является ли ввод поисковым запросом или URL-адресом
- При нажатии клавиши Enter поток пользовательского интерфейса позволяет сети получать содержимое сайта, а анимация загрузки отображается в углу вкладки. Сетевой поток установит TLS-соединение для запроса по соответствующему протоколу.
SSL (Secure Sockets Layer) и его преемник Transport Layer Security (TLS) — это протокол безопасности, который обеспечивает безопасность и целостность данных для сетевых коммуникаций. TLS и SSL шифруют сетевые соединения на транспортном уровне.
Протокол SSL расположен между протоколом TCP/IP и различными протоколами прикладного уровня, обеспечивая поддержку безопасности при передаче данных. Протокол SSL можно разделить на два уровня: Протокол записи SSL: он основан на надежном протоколе передачи (например, TCP) и обеспечивает поддержку основных функций, таких как инкапсуляция данных, сжатие и шифрование для протоколов высокого уровня.
Безопасность транспортного уровня (TLS) используется для обеспечения конфиденциальности и целостности данных между двумя взаимодействующими приложениями. Протокол состоит из двух уровней: TLS Record и TLS Handshake. Нижний уровень — это протокол записи TLS, который расположен на надежном транспортном протоколе (например, TCP) и не имеет ничего общего с конкретным приложением, поэтому протокол TLS обычно классифицируется как протокол безопасности транспортного уровня.
Роджер[ˈrɑ:dʒə(r)]: Ответ по беспроводной связи: получен. Поток пользовательского интерфейса указывает сетевому потоку перейти кmysite.com
В этот момент сетевой поток может получить заголовок перенаправления сервера, например HTTP 301. В этом случае сетевой поток сообщит потоку пользовательского интерфейса, что сервер запрашивает перенаправление. Затем будет инициирован другой запрос URL.
- прочитать ответ
Заголовок ответа, содержащий Content-Type и полезную нагрузку как фактические данные
Как только тело ответа начинает поступать, сетевой поток просматривает первые несколько байтов потока данных, а поле Content-Type ответного сообщения объявляет тип данных. Но могут быть ошибки в проигрыше. Таким образом, для решения этой проблемы существует сниффинг MIME-типа.
Если ответ представляет собой HTML-файл, следующим шагом будет передача данных в процесс рендеринга, а если это загруженный файл, то есть запрос на загрузку, он передается менеджеру загрузчика.
Сетевой поток спрашивает, являются ли данные ответа HTML с защищенного веб-сайта.
На этом этапе также выполняется проверка safeBrowsing, и если имя домена и данные совпадают с вредоносным веб-сайтом, веб-поток отобразит страницу с предупреждением. Кроме того, выполняются проверки блокировки чтения из разных источников (CORB), чтобы гарантировать, что конфиденциальные данные из разных источников не будут переданы в процесс рендеринга.
- Найти процесс рендеринга
После того, как все проверки обработаны и сетевой поток обязательно перейдет к запрошенному сайту, поток сетевых запросов сообщает потоку пользовательского интерфейса, что все запросы данных выполнены. Поток пользовательского интерфейса будет искать процесс рендеринга, чтобы начать рендеринг веб-страницы.
Сетевой поток сообщает потоку пользовательского интерфейса, что нужно найти процесс визуализации.
Поскольку поток сетевых запросов требует времени, за один раз можно применить одну меру оптимизации. Когда поток пользовательского интерфейса отправляет запрос URL-адреса в сетевой поток, он также может найти и запустить процесс рендеринга в режиме ожидания. Если навигация перенаправляет, этот процесс рендеринга не может быть использован.
- Отправить навигацию
Теперь, когда данные и процесс рендеринга готовы, браузер отправит IPC (межпроцессное взаимодействие) в процесс рендеринга для отправки навигации, а также передаст поток данных, поэтому процесс рендеринга продолжит принимать данные HTML, как только процесс браузера получает подтверждение отправки процесса рендеринга, навигация завершается и начинается синтаксический анализ загрузки документа.
На данный момент адресная строка была обновлена, индикатор безопасности и пользовательский интерфейс настроек сайта будут отображать информацию о сайте для новой страницы, а история сеансов этой вкладки обновлена, поэтому кнопки «вперед» и «назад» будут переходить на сайт, который вы только что перешел, Когда вы закрываете вкладку или окно, для оптимизации восстановления вкладки/сеанса история сеанса сохраняется на жестком диске.
IPC между браузером и процессом рендеринга, запрашивая рендеринг страницы.
Дополнительный шаг: начальная загрузка завершена
Как только навигация отправлена, процесс рендеринга начинает загружать ресурсы и отображать страницу, и как только процесс рендеринга завершает рендеринг, IPC отправляется обратно в процесс браузера (это также происходит после того, как все события frameh и onload были запущены и казнен). В этот момент поток пользовательского интерфейса останавливает анимацию загрузки на вкладке.
Перейти на другой сайт
Простая навигация завершена. При вводе URL-адреса на панели навигации процесс браузера сначала проверит, заботится ли отображаемый сайт о событии beforeUnload. Если подтверждается, что это не так, он выполнит ту же операцию и перейдет к другой сайт.
Событие befounload выдаст напоминание «покинуть этот сайт», когда пользователь покинет или закроет вкладку.
Примечание. Не добавляйте безусловный обработчик перед выгрузкой, это вызовет задержку.
Процесс браузера отправляет IPC в процесс рендерера, сообщающего его навигации на другой сайт
Если процесс рендеринга запускает навигацию (window.location.herf=xxx), процесс рендеринга сначала проверит обработчик события перед загрузкой и выполнит те же шаги, что и браузер, обрабатывает навигацию, с той лишь разницей, что запрос навигации отправляется процесс рендеринга в процесс браузера.
При новом переходе на новый сайт вызывается отдельный процесс визуализации для обработки навигации, в то время как текущий процесс визуализации сохраняется для обработки события выгрузки.
2 IPC (от процесса браузера к новому процессу рендеринга) сообщают об отображении страницы и говорят старому процессу рендеринга о выгрузке
Сервисный работник будет добавлен
Внутренний механизм процесса рендеринга
Процесс рендеринга обрабатывает содержимое сайта
Процесс рендеринга отвечает за все, что отправляется в теге. В процессе рендеринга основной поток обрабатывает большую часть данных, возвращаемых сервером пользователю, а если используется веб-воркер или Service Sorker, то часть JS будет обрабатываться рабочим потоком. Композитные и растровые потоки также запускаются в процессе рендеринга для эффективного и плавного рендеринга страниц.
Основная задача процесса рендеринга — преобразовать HTML, CSS и JavaScript в веб-страницы, с которыми пользователи могут взаимодействовать.
Процесс рендеринга содержит основной поток, рабочий поток, поток компоновки и поток растра.
- Разбор
- Строительство Дома Когда процесс рендеринга получает данные HTML, основной поток анализирует текстовую строку (HTML) и преобразует ее в (DOM). DOM — это внутреннее представление страницы в браузере, а также структура данных, с которой разработчики взаимодействуют через JS.
Теги HTML анализируютсяHTML StandarРешил, что спецификация HTML может быть очень элегантной, чтобы обрабатывать некоторые ошибки тегов.
- загрузка подресурсов
Изображения, CSS, внешние ресурсы JS веб-сайта должны быть загружены из сети или кэша. При синтаксическом анализе и построении DOM основной поток загружается один за другим в порядке обработки.Чтобы ускорить работу, одновременно запускается «сканер предварительной загрузки». Если документ имеет<img><link>, сканер предварительной загрузки отправит запрос в процессе браузера.
Основной поток анализирует HTML и строит дерево DOM.
3. JS блокирует парсинг
При синтаксическом анализе HTML столкнитесь<script>, он прекратит синтаксический анализ следующего контента, загрузит js и выполнит код внутри.
- Подскажите браузеру как загрузить ресурс
допустимый<script>Добавьте атрибуты async или defer к тегам для асинхронной загрузки JS или загрузите модули JS, которые вы можете использовать<link rel="preload">Сообщите браузеру, что ресурс обязательно нужен для текущей навигации и что вы хотите загрузить его как можно скорее.
- расчет стиля
Только элементы DOM не могут определять внешний вид страницы и должны сочетаться со стилями CSS. Основной поток анализирует CSS и определяет вычисляемые стили для каждого узла DOM.
Основной поток анализирует CSS для добавления поствычисленных стилей.
- Дерево компоновки
Знать, что каждый узел имеет соответствующие элементы стиля, недостаточно для отображения страницы. Макет - это процесс вычисления геометрических элементов формы, основной поток проходит через DOM, вычисляет стиль и создает дерево макета, содержащее координаты xy, размер кадра и другую информацию, дерево макета может быть похоже на дерево древовидной структуры DOM. , но он содержит только видимый контент информационных страниц. Если элемент приложения display: часть none, то этот элемент не является деревом компоновки. Аналогично, если применение таких псевдоклассов p::before{content:"!Hi"}, даже если это не DOM, также включается в дерево компоновки.
Основной поток проходит по стилизованному дереву DOM для создания дерева компоновки.
- рисовать
С DOM, стилем и деревом компоновки вы не можете нарисовать страницу и не знаете порядок рисования. Например, некоторые элементы имеют z-индекс, и простое рисование сверху вниз вызовет ошибки высоты слоя.
Поскольку Z-индекс не рассматривается, элементы страницы находятся в порядке тегов HTML, что приводит к рендерингам ошибок.
На этапе рисования основной поток проходит по дереву компоновки (Дерево компоновки) для создания записей рисования (Paint Records), таких как сначала фон, затем прямоугольник, текст.
Поток проходит по дереву компоновки и генерирует записи отрисовки.
- Обновление конвейера рендеринга стоит дорого
Порядок генерации DOM + Стиль, макет и дерево рисования
Самое главное в конвейере рендеринга: каждый шаг, результат предыдущей операции используется для данных следующей операции. Если вы анимируете элемент, одна и та же обработка выполняется каждый кадр, 1 кадр/сек для большинства браузеров. Если браузер теряет несколько кадров посередине, он может заикаться.
Кадры анимации на временной шкале
- на самом деле нарисовать страницу
- Растеризация
Принципиальная схема простой обработки растра
Теперь я знаю структуру документа, CSS, дерево компоновки и порядок отрисовки. То есть конвертировать данные в пиксели на физических устройствах. Этот процесс становится растеризацией.
- синтез
Процесс компоновки растрирует части страницы, а поток компоновки выполняет композицию со сдвигом слоя.
- Слоистый
Чтобы различать, какие элементы находятся на каких слоях, основной поток пересекает дерево макета для создания дерева слоев.Если некоторые части являются отдельными слоями (например, выдвижная боковая строка меню), но не разделены, вы можете использовать свойство CSS: will-Change запрашивает браузер.
- Растеризация и композитинг в основном потоке
Как только дерево слоев создано и порядок отрисовки определен, основной поток передаст информацию потоку компоновки, который затем растрирует каждый слой, слой может быть размером со страницу, а поток компоновки заблокирует его и затем отправляется в растровый поток. Растровый поток растрирует каждый тайл и сохраняет их в видеопамяти.
Растровые потоки создают мозаичные растровые изображения и отправляют их на графический процессор.
Поток компоновки отдает приоритет различным потокам растеризации, чтобы вид или близлежащие области экрана могли быть растеризованы в первую очередь. Слои также имеют блоки разного разрешения, которые можно отображать в увеличенном виде.
Когда блоки растеризованы, поток композитинга собирает информацию об этих блоках (называемых четырехугольниками рисования), создавая кадр композитинга.
- Draw quads: содержит такую информацию, как расположение блока в памяти и расположение блока на странице при составлении.
- Составные фреймы: набор четырехугольников для рисования, представляющих один фрейм страницы.
Затем составной кадр передается в процесс браузера через IPC. В это время составной кадр может быть добавлен в процесс рендеринга потока пользовательского интерфейса или других плагинов. Эти составные кадры отправляются на графический процессор, а затем отображаются на экране. . Если получено событие прокрутки, составной кадр создает еще один составной кадр для графического процессора.
Поток композиции создает кадр композиции, отправляет его в процесс браузера, а затем отправляет в графический процессор.
Поведение ввода пользователя и синтезаторы
Любое поведение пользователя, для браузера как входное поведение. В том числе щелчки, прокрутка, сенсорный экран, скольжение мыши.
Например, когда пользователь прикасается к экрану, процесс браузера первым фиксирует поведение, а информация, хранящаяся в процессе браузера, ограничивается областью, где происходит поведение, поскольку содержимое тега обрабатывается процессом рендеринга. обработать. Процесс браузера передает действие щелчка и координаты процессу визуализации. Процесс рендеринга выполняет соответствующую обработку.
Синтезатор получает входные события
Окно просмотра над слоем страницы
Понимание областей, не требующих немедленной прокрутки
Запуск JS — это работа основного потока процесса рендеринга.После синтеза страницы область, в которой зарегистрировано событие, называется «областью, не допускающей немедленной прокрутки», и поток компоновщика уведомляет основной поток о рендеринге. процесс, чтобы справиться с этим. Если в области регистрации событий не происходит никаких входных событий, процесс компоновки не должен ждать основной поток и может продолжать компоновку кадров.
Следует отметить установленное время обработки
document.body.addEventListener('touchstart',
event => {
if (event.target === area) {
event.preventDefault();
}
});
Делегирование событий — это общий режим обработки событий, используемый браузерами, добавляющий событие к элементу верхнего уровня. Проблема заключается в том, что вся страница помечается как непрямая область прокрутки, и процесс компоновщика должен каждый раз спрашивать основной поток, нужно ли ему обрабатывать событие, и ждать обратной связи. Режим гладкой синтезаторной обработки просто не работает.
Вы можете свести к минимуму этот негативный эффект, добавив параметр «passive:true» в прослушиватели событий. Это подскажет браузеру, что вы хотите продолжить прослушивание событий в основном потоке, но компоновщик не должен останавливаться и может затем создать новый кадр композитинга.
document.body.addEventListener('touchstart', event => {
if (event.target === area) {
event.preventDefault()
}
}, {passive: true});
Однако описанный выше способ написания может привести к другой проблеме.Если вы хотите прокручивать только по горизонтали в определенной области, используйтеpassive: trueПлавная прокрутка возможна, но вертикальная прокрутка может предшествоватьevent.preventDefault()происходит, и в этот момент можно пройтиevent.cancelableчтобы предотвратить это.
document.body.addEventListener('pointermove', event => {
if (event.cancelable) {
event.preventDefault(); // 阻止默认的滚动行为
/*
* 这里设置程序执行任务
*/
}
}, {passive:: true});
Вы также можете использовать свойства csstouch-actionчтобы полностью удалить эффект обработчика событий, например: #area{touch-action:pan-x;}
Найти объекты события
Когда поток объединителя отправляет входное событие в основной поток, основной поток сначала выполняет проверку попадания, чтобы найти соответствующую цель времени.Проверка попадания находит координаты события на основе записей рисования, сгенерированных в процессе рендеринга. Элемент, который нужно искать ниже.
Основной поток проверяет содержимое чертежа по координатам запроса записи чертежа x, y.
##### Оптимизация событий
Как правило, частота обновления нашего экрана составляет 60 кадров в секунду, но количество срабатываний некоторых событий будет превышать это значение. В целях оптимизации Chrome будет комбинировать непрерывные события (такие как колесо, колесо мыши, движение мыши, движение указателя, движение касания) и задерживать их до тех пор, пока next Выполняется при рендеринге кадра. Непрерывные события, такие как keydown, keyup, mouseup, mousedown, touchstart и touchend, запускаются немедленно.
Используйте getCoalescedEvents для получения внутрикадровых событий
Объединение событий помогает большинству веб-приложений создать удобный пользовательский интерфейс. Однако, если вы разрабатываете приложение для рисования, которому необходимо рисовать линии на основе координат события touchmove, то при попытке нарисовать плавную линию некоторые точки координат в интервале также могут быть потеряны из-за слияния событий. На этом этапе вы можете использовать метод getCoalescedEvents целевого события, чтобы получить объединенную информацию о событии.
window.addEventListener('pointermove', event => {
const events = event.getCoalescedEvents();
for (let event of events) {
const x = event.pageX;
const y = event.pageY;
// 使用 x、y 坐标画线
}
});
Ссылаться на: