[Перевод] Понимание современных браузеров изнутри (1)
[Перевод] Понимание современных браузеров изнутри (2)
Понимание современных браузеров изнутри (3)
CPU, GPU, память и многопоточная архитектура
В четырех статьях этой серии мы рассмотрим все тонкости потоков рендеринга в архитектуре Chrome; если вам интересно, как браузер превращает ваш код в функциональный сайт, или вы не уверен, почему для повышения производительности рекомендуется использовать ту или иную технологию, эта серия для вас;
В качестве первой статьи этой серии давайте рассмотрим некоторые важные компьютерные термины и многопроцессорную архитектуру Chrome.
Основной ЦП и ГП компьютера
Чтобы понять операционную среду браузера, нам нужно понять некоторые важные аппаратные средства компьютера и их роль;
CPU
Первым является вычислительный блок ядра компьютера - ЦП (Central Processing Unit), процессор можно рассматривать как мозг вашего компьютера. Ядро процессора, которое можно рассматривать как офисного клерка, может выполнять одну за другой разные задачи, оно может выполнять все, от математики до искусства, и знает, как отвечать на звонки клиентов. В прошлом большинство ЦП состояло из одного чипа, ядро было похоже на другой ЦП на том же чипе, в современном оборудовании обычно имеется более одного ядра, что дает вашему телефону и компьютеру большую вычислительную мощность.
Рисунок 1: Каждое ядро может обрабатывать различные задачи
GPU
Графический процессор — GPU (Graphics Processing Unit) — еще одна важная часть компьютера; в отличие от CPU, GPU хорошо справляется с простыми задачами, но одновременно с несколькими ядрами; как следует из названия, изначально он был разработан для обработки графики; поэтому в графикеusing GPUа такжеGPU-backed, что связано с быстрым рендерингом и плавным взаимодействием, в последние годы с технологией GPU-ускоренных вычислений все больше и больше вычислений стало возможным на GPU;
Рисунок 2. Каждое устройство может выполнять только ограниченное количество задач
Когда вы запускаете приложение на мобильном телефоне или компьютере, ЦП и ГП обеспечат его возможность запуска, а приложение будет работать на ЦП и ГП через механизм, предоставляемый операционной системой;
Рисунок 3: Аппаратное обеспечение — Операционная система — Приложения
Программы работают в процессах и потоках
Прежде чем углубляться в архитектуру браузера, необходимо понять еще одну концепцию — процессы и потоки. Процесс можно описать как выполнение приложения, внутри процесса существуют потоки, которые могут обрабатывать любую часть процесса (потоки совместно используют контекст процесса);
Когда вы запускаете приложение, создается процесс; процесс может создавать потоки, помогающие ему работать (необязательно), операционная система предоставляет процессу блок памяти, и все состояние приложения хранится в этой выделенной памяти. при закрытии приложения процесс также исчезнет, а операционная система освободит память;
Рисунок 4: Процессы и потоки
Рисунок 5. Процессы используют пространство памяти и хранят данные приложений
Процесс может попросить операционную систему запустить другой процесс для выполнения другой задачи; когда это произойдет, разные части памяти будут выделены для нового процесса; если двум процессам необходимо взаимодействовать друг с другом, они могут взаимодействовать с помощью межпроцессорного взаимодействия. - взаимодействие процессов (IPC); многие приложения работают таким образом, поэтому, если рабочий процесс перестает отвечать на запросы, его можно перезапустить, не останавливая процессы, выполняющие другие части приложения;
Рисунок 6: Процесс связи через IPC
архитектура браузера
Так как же создаются браузеры с использованием процессов и потоков? Да, у него может быть много разных потоков или много разных процессов, лишь немногие из которых взаимодействуют через IPC.
Рисунок 7: Процессы/потоки в архитектуре браузера
Здесь следует отметить, что эти разные архитектуры являются деталями реализации, и не существует стандарта реализации одного браузера, и способ одного браузера может полностью отличаться от способа другого браузера;
В этой серии статей мы будем использовать последнюю архитектуру Chrome, описанную ниже;
Наиболее важным является процесс браузера, который координирует процессы, обрабатывающие остальную часть приложения; для процесса рендеринга создается несколько процессов для назначения каждой вкладке; до недавнего времени Chrome пытался иметь по одному процессу на вкладку; а теперь Chrome пытается дать каждому сайту свой собственный процесс, включая iframes (подробности см. в разделе «Изоляция сайта»);
Рис. 8. Схема многопроцессорной архитектуры Chrome. Несколько слоев, отображаемых в разделе «Процессы визуализации», указывают на то, что Chrome запускает несколько процессов визуализации для каждой вкладки.
Что контролирует каждый процесс?
В таблице ниже описаны все процессы Chrome и части, за которые они отвечают.
| Процессы и части, которыми они управляют | |
|---|---|
| браузер | Управление различными частями приложений Chrome, такими как адресная строка, закладки, кнопки «назад» и «вперед», а также отвечает за невидимые, защищенные части Chrome, такие как сетевые запросы и управление файлами; |
| оказывать | Управляйте содержимым любой вкладки дисплея; |
| плагин | управлять любыми плагинами, используемыми сайтом, такими как flash; |
| GPU | Выполняйте задачи графического процессора независимо от других процессов. Он разделен на разные процессы, потому что GPU обрабатывает запросы от нескольких приложений и рисует их на одной поверхности. |
Рисунок 9: Различные процессы, указывающие на разные части пользовательского интерфейса браузера
Есть еще много процессов, таких как процесс расширения и процесс инструмента. Если вы хотите увидеть количество процессов, запущенных в Chrome, щелкните значок меню «Параметры» в правом верхнем углу, выберите «Дополнительные инструменты», а затем выберите «Диспетчер задач». Открывшееся всплывающее окно содержит список запущенных в данный момент процессов и объем используемого ими ЦП/памяти.
Преимущества многопроцессорной архитектуры Chrome
Я упомянул выше с Chrome, используя несколько процессов рендерера. В простейшем случае вы можете подумать, что каждая вкладка имеет свой собственный процесс рендерера. Предположим, вы открыты 3 вкладка, каждая вкладка работает с отдельным процессом рендерера. Если вкладка не отвечает, вы можете закрыть эту нежелательную вкладку, когда активна другая вкладка. Если все вкладки работают в процессе, все вкладки не будут отвечать, когда вкладка не отвечает. Это плохо.
Рисунок 10: Запуск процесса на каждой вкладке
Еще одним преимуществом браузера, работающего на нескольких процессах, является безопасность и песочница. Браузеры могут помещать в песочницу определенные процессы в определенных функциях, поскольку операционная система предоставляет способ ограничения разрешений процессов. Например, браузер Chrome ограничивает любой доступ к файлам процесса, например, ограничение пользовательского ввода в процессе рендеринга;
Поскольку у процессов есть собственное личное пространство памяти, они часто содержат копии общедоступной инфраструктуры (например, JavaScript-движок Chrome V8). Это означает большее использование памяти, потому что, если они не являются потоками внутри одного и того же процесса, нет возможности каким-либо образом разделить пространство памяти. Для экономии памяти Chrome ограничивает количество процессов, которые он может запустить. Ограничение зависит от памяти устройства и мощности процессора, но когда Chrome достигает предела, он запускает несколько вкладок на одном сайте в одном процессе.
Экономьте больше памяти – Сервисизация в Chrome
Тот же метод работает для процесса браузера. Chrome вносит архитектурные изменения для запуска каждой части программы браузера как службы, что упрощает разделение на отдельные процессы или их объединение в один процесс.
Общая идея заключается в том, что когда Chrome работает на мощном оборудовании, он может разделить каждую службу на отдельный процесс, обеспечивая большую стабильность, но если он находится на требовательном к ресурсам устройстве, Chrome объединит службы в один процесс, тем самым экономя использование памяти. До этого твика аналогичный подход использовался на платформах, подобных Android, для консолидации процессов для уменьшения использования памяти.
Рисунок 11: Serivization Chrome перемещает различные службы в несколько процессов и один процесс браузера
Отдельный процесс рендеринга для каждого кадра — изоляция сайта
Изоляция сайта— это недавно представленная функция в Chrome, которая запускает отдельный процесс рендеринга для каждого межсайтового iframe. Мы говорили об одном процессе рендеринга для каждой модели вкладок, что позволяет межсайтовым фреймам работать в одном процессе рендеринга и совместно использовать пространство памяти между разными сайтами. Кажется, можно запускать a.com и b.com в одном и том же процессе рендеринга.Та же политика происхождения— это основная модель безопасности в Интернете, которая гарантирует, что один сайт не может получить доступ к данным других сайтов без согласия. Обход этой политики является главной целью для атак безопасности. Изоляция процессов — наиболее эффективный способ разделения сайтов. вместе сMeltdown/Spectre(Уязвимость), очевидно, что нам нужно использовать процессы для изоляции сайтов. По умолчанию, начиная с Chrome 67 с включенной изоляцией, каждый межсайтовый iframe на вкладке получает отдельный процесс рендеринга.
Рис. 12. Несколько процессов рендеринга, указывающих на iframe на сайте
Включение изоляции сайтов — это многолетний проект. Изоляция сайта не так проста, как назначение различных процессов рендеринга; она коренным образом меняет способ взаимодействия iframe друг с другом. Открытие devtools на странице с iframe, запущенным в другом процессе, означает, что devtools должен реализовать работу за кулисами, чтобы она выглядела цельной. Даже простое нажатие Ctrl+F для поиска слова на странице означает поиск в различных процессах рендеринга. Вы можете понять, почему разработчики браузеров сделали выпуск Site Isolation важной вехой!
Суммировать
В этом посте мы представили общий обзор архитектуры браузера и рассказали о преимуществах многопроцессорной архитектуры. Мы также рассмотрели сервисизацию и изоляцию сайтов в Chrome, которые тесно связаны с многопроцессорной архитектурой. В следующей статье мы начнем разбираться в том, что происходит между этими процессами и потоками, а также в том, как отображать веб-сайт.