Abr@X@bra.ru
Внутренний взгляд на современный веб-браузер (часть 1)
Внутренний взгляд на современный веб-браузер (часть 1)

Внутренний взгляд на современный веб-браузер (часть 1)

23.09.2018
43

Архитектура процессора, графического процессора, памяти и многопроцессорной архитектуры

В этой серии из 4-х частей мы рассмотрим браузер Chrome от высокоуровневой архитектуры до конкретики конвейер рендеринга. Если вы когда-нибудь задумывались над тем, как браузер превращает ваш код в функциональный веб-сайт, или вы не знаете, почему для повышения производительности предлагается конкретный метод, эта серия для вас.

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

CPU

Сначала это центральный процессор или центральный процессор. ЦП можно считать мозгом вашего компьютера. Ядро процессора, изображенное здесь как офисный работник, может обрабатывать множество разных задач один за другим, когда они появляются. Он может обрабатывать все от математики до искусства, зная, как отвечать на вызов клиента. В прошлом большинство процессоров были одним чипом. В современном оборудовании вы часто получаете больше одного ядра, что дает больше вычислительной мощности вашим телефонам и ноутбукам.




GPU

Блок обработки графики - или GPU - это еще одна часть компьютера. В отличие от процессора, GPU хорошо справляется с простыми задачами, но одновременно с несколькими ядрами. GPU, был впервые разработан для обработки графики. Вот почему в контексте графики «использование GPU» или «GPU-backed» связано с быстрой визуализацией и плавным взаимодействием. В последние годы с использованием GPU-ускоренных вычислений все больше и больше вычислений становятся возможными только на одном GPU.



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




Выполнение программы по процессу и потоку

Еще одна концепция, которую нужно понять перед погружением в архитектуру браузера - это Process and Thread. Процесс может быть описан как исполняющая программа приложения. Поток - это тот, который живет внутри процесса и выполняет любую часть программы своего процесса.

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



Процесс может попросить операционную систему развернуть другой процесс для выполнения различных задач. Когда это происходит, разные части памяти выделяются для нового процесса. Если вам нужно поговорить о двух процессах, они могут сделать это, используя Inter Process Communication (IPC). Многие приложения предназначены для работы таким образом, чтобы, если рабочий процесс не реагирует, его можно перезапустить, не останавливая другие процессы, которые работают с разными частями приложения.



Архитектура браузера

Итак, как создается веб-браузер с использованием процессов и потоков? Ну, это может быть один процесс с множеством разных потоков или много разных процессов с несколькими потоками, обменивающимися IPC.


Важно отметить, что эти различные архитектуры являются деталями реализации. Нет стандартной спецификации того, как можно создать веб-браузер. Один подход к браузеру может полностью отличаться от другого.

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

В верхней части находится процесс браузера, координирующий другие процессы, которые занимаются различными частями приложения. Для процесса рендеринга для каждой вкладки создаются и назначаются несколько процессов. До недавнего времени Chrome предоставлял каждой вкладке процесс, когда это было возможно; теперь он пытается дать каждому сайту свой собственный процесс, включая iframes.



Какой процесс контролируется?


Есть еще больше процессов, таких как процесс расширения и утилиты. Если вы хотите увидеть, сколько процессов запущено в вашем Chrome, нажмите значок меню параметров в верхнем правом углу, выберите «Дополнительные инструменты», затем выберите «Диспетчер задач». Это открывает окно со списком процессов, которые в настоящее время работают, и сколько CPU / памяти они используют.

Преимущество многопроцессорной архитектуры в Chrome

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



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

Поскольку процессы имеют собственное пространство памяти, они часто содержат копии общей инфраструктуры (например, V8, которая является движком JavaScript для Chrome). Это означает больше использования памяти, поскольку они не могут быть разделены так, как они были бы, если бы они были потоками внутри одного и того же процесса. Чтобы сохранить память, Chrome ограничивает количество процессов, которые он может развернуть. Предел варьируется в зависимости от того, сколько памяти и мощности процессора имеет ваше устройство, но когда Chrome достигает предела, он начинает запускать несколько вкладок с одного и того же сайта в одном процессе.

Сохранение большего объема памяти - Servicification в Chrome

Тот же подход применяется к процессу браузера. Chrome обрабатывает изменения архитектуры, чтобы запускать каждую часть программы браузера в качестве услуги, позволяющей легко разделить на разные процессы или объединить в одну.

Общая идея заключается в том, что, когда Chrome работает на мощном оборудовании, он может разделить каждую службу на разные процессы, обеспечивая большую стабильность, но если она находится на устройстве ограничения ресурсов, Chrome объединяет службы в один процесс, сохраняя объем памяти. Подобный подход консолидации процессов для меньшего использования памяти использовался на платформе Android.

Процессы рендеринга для каждого кадра - изоляция сайта

Изоляция сайта - это недавно введенная функция в Chrome, которая запускает отдельный процесс визуализации для каждого межсайтового iframe. Мы говорили об одном процессе визуализации для каждой модели табуляции, который позволял межсайтовым iframes запускаться в одном процессе визуализации с общим объемом памяти между разными сайтами. Запуск a.com и b.com в том же процессе рендеринга может показаться нормальным. Одна и та же основная политика - это основная модель безопасности сети; он гарантирует, что один сайт не сможет получить доступ к данным с других сайтов без согласия. Обход этой политики является основной целью атак безопасности. Изоляция процессов - наиболее эффективный способ разделения сайтов. С Meltdown и Spectre стало еще более очевидным, что нам нужно разделить сайты с использованием процессов. С отключением сайта, включенным на рабочем столе по умолчанию с Chrome 67, каждый межсайтовый iframe на вкладке получает отдельный процесс визуализации.


Включение изоляции сайта было многолетним инженерным проектом. Изоляция сайта не так проста, как назначение различных процессов рендеринга; это в корне меняет то, как iframes разговаривают друг с другом. Открытие devtools на странице с iframe, запущенными на разных процессах, означает, что devtools должен был реализовать за кадром работу, чтобы сделать ее гладкой. Даже запуск простого Ctrl + F для поиска слова на странице означает поиск в разных процессах рендеринга.

Вывод

В этой статье мы рассмотрели высокоуровневое представление архитектуры браузера и рассмотрели преимущества многопроцессорной архитектуры. Мы также рассмотрели службу Servicification и Site Isolation в Chrome, которая тесно связана с многопроцессорной архитектурой. В следующем посте мы начнем погружение в происходящее между этими процессами и потоками, чтобы отобразить веб-сайт.





CPU, GPU
Читайте также:
Nuxt.js: 28 килобайт пользы для веб-разработчика

Nuxt.js: 28 килобайт пользы для веб-разработчика

В этом посте я расскажу, что такое Nuxt.js и про «киллер фичу» этого микрофреймворка и где он может пригодиться.
Читать
CSS font-display: будущее рендеринга шрифтов

CSS font-display: будущее рендеринга шрифтов

Одним из недостатков использования веб-шрифтов является то, что если шрифт не доступен на устройстве пользователя, его н...
Читать
CSS Grid идеально подходит для адаптивной верстки

CSS Grid идеально подходит для адаптивной верстки

Я думаю, что вы уже в курсе, что Grid превосходит Flexbox для создание макетов. Но как насчет адаптивных макетов? Что лу...
Читать