ПРИНЦИПЫ РАБОТЫ СОВРЕМЕННЫХ ВЕБ БРАУЗЕРОВ Текст научной статьи по специальности «СМИ (медиа) и массовые коммуникации»

Научная статья Original article УДК 004

ПРИНЦИПЫ РАБОТЫ СОВРЕМЕННЫХ ВЕБ БРАУЗЕРОВ

HOW MODERN WEB BROWSERS WORK

Яровая Екатерина Владимировна, Магистранта Гродненского государственного университета им Я.Купалы, Беларусь, г.Гродно

Yaravaya Katsiaryna Vladimiravna, Master's student Yanka Kupala State University of Grodno, Belarus, Grodno

Аннотация

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

Annotation

This article will discuss the fundamental principles of architecture using the chrome browser as an example. It will touch on the basic concepts of the computer system elements that are used by browsers. It will also look at the processes that take place

Столыпинский вестник

2792

while browsing, and the difference between a process and a thread. Discuss which element of the browser is responsible for which process. Ключевые слова: веб-браузер, chrome, архитектура, процессы, потоки Keywords: web browser, chrome, architecture, processes, streams

В 1990 году англичанин Тим Бернерс-Ли сделал первый в мире сайт, под названием info.cern.ch, туда включался протокол передачи данных HTTP и специальный язык разметки HTML. В нынешнее время веб сайты плотно вошли в нашу повседневную жизнь, настолько, что стали чем-то привычным и повседневным, таким же для нас стал веб-браузер. Посещение любимых сайтов, проверка почты, чтение новостей или просмотр роликов с котятами. А вы задумывались, как все работает, из каких частей это все состоит, в этой статье мы заглянем под "капот" одному из популярных браузеров, это будет google chrome.

Годом позже, Бернерс-Ли студент-математик, Никола Пелло написал линейный браузер, предназначенный для основных компьютерных терминалов. В 1993 году пришла эра Интернета и многие частные корпорации и правительства разных стран увидели в этом безграничный потенциал для торговли и развития бизнеса, и в том же году ученым Иллинойсского университета в Урбане-Шампейне в области компьютерных технологий Марком Андриссеном, ранний предок популярного браузера в наше время Mozilla Firefox, но первое его имя было "Mosaic". Еще одно знаковое событие в популярности интернет браузеров было так называемые Войны браузеров в 1995, в то время Netscape Navigator был единственной программой для входа в сеть, но корпарация Microsoft выпустила в релиз знаменитый браузер Internet Explorer с чего и начался передел рынка и уже к 1999 году Internet Explorer занял 99% рынка. Netscape в те же годы открыли исходный код браузера и создали организацию Mozilla, которые спроектировали и создали браузер Firefox 2002. И к 2010 году Firefox и другие

2793

браузеры сократили долю рынка Internet Explorer до 50%. И 15 июня 2022 Microsoft перестала поддерживать Internet Explorer.

Давайте начнем. И начнем мы не с браузера, как вы могли подумать, а познакомимся с некоторыми элементами в компьютере и как они работают. CPU (Central Processing Unit) - Центральный процессор вашего компьютера, выполняет всевозможные задачи по мере их поступления, современные компьютеры снабжены не одним ядром в чипе процессора, а несколькими. GPU (Graphics Processing Unit) - графический процессор. Если CPU может выполнять тяжелые задачи, то графический процессор легко справляется с задачами попроще. Как вытекает из их названия, предназначены они работать с графикой. А сейчас давайте себе представим слоеный пирог, где первый слой — это наше приложение (хром), второй - операционная система, которая связывает приложение по нижний слой "железа", в нашем упрощенном варианте, это процессоры CPU и GPU. Следующее в чем нам надо разобраться, это процесс и поток. Процесс - представляет собой программу, а поток какое-то действие в процессе. Простым языком процесс — это запущенный браузер на вашем компьютере, а какие-то действия в рамках этого браузера — это поток. Процессы могут взаимодействовать между собой посредством межпроцессорного взаимодействия (IPC).

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

Теперь к архитектуре, непосредственно нашего рассматриваемого браузера. Первое, браузер-процесс (Browser), он отвечает за адресную строку для ввода url сайта, панель управления, включающие в себя обновления вперед-назад, и все, что мы там можем найти. И некоторые вещи, которые скрыты от глаз пользователя, например, сетевые запросы или доступ к файлам. Второй, рендер-процесс (Renderer) - отвечает за то, что происходит внутри

2794

вкладки, обрабатывается основная часть кода, которая была отправлена пользователю, иногда какая-то часть JavaScript также работает с такими инструментами как web worker и service worker. Затем плагин-процесс (Plugin) - под юрисдикцию этого процесса попадают все плагины, используемые сайтам. И уже наши знакомые GPU-процесс используется для ускорения рендеринга веб-страниц HTML разметки, CSS и графических элементов.

Чем же так привлекательна мультипроцессорная архитектура браузера Chrome. Так как Chrome использует несколько рендер-процессов, это решает одну из проблем. Представим себе, что мы открыли три вкладки и вкладка номер два перестала отвечать, так как процесс отдельный, мы его просто остановили, закрыв вкладки, и работаем дальше, но, если бы все происходила в одно процессе нам бы пришлось перезагружать приложение целиком. Следующее, это безопасность и изолирование, мы можем ограничить права одного из процессов. Так как процессы занимают отдельные ячейки в памяти компьютера, движок на котором работает Chrome (V8) копируется для каждого процесса, и для этого выделяется большее количество памяти, чтобы ее сэкономить, устанавливается ограничение на количество процессов. Установленное ограничение зависит от количества памяти и мощности процессора. Chrome прибегает к некоторым трюкам для того, чтобы сэкономить память, если оборудование достаточно мощное, то chrome разделит каждый сервис на процесс и предоставит более стабильную работу, если наоборот, то сервисы консолидируются в один процесс, что позволяет снизить нагрузку. И немного безопасности Same Origin Policy говорит о том, что сайт "А" не может получить доступ к данным сайта "B" без его согласия. Подтверждает, то что нужно разделять сайты в отдельные потоки, что и реализовано в Chrome с 67 версии.

В данной статье мы рассмотрели базовые принципы архитектурных решений в браузере Chrome.

2795

Литература

1. С. Пьюривал, Основы разработки веб-приложений (2015)

2. Н. Мациевский, Реактивные веб-сайты (2020)

3. Эрик А. Мейер, CSS. Каскадные таблицы стилей. Подробное руководство (2008)

4. Prateek Mehta, Creating Google Chrome Extensions (2016)

5. Шкляр Л., Архитектура веб-приложений (2010)

Literature

1. S. Purewal, Fundamentals of Web Application Development (2015)

2. N. Maciejewski, Reactive Websites (2020)

3. Eric A. Meyer, CSS. Cascading Style Sheets. An in-depth guide (2008)

4. Prateek Mehta, Creating Google Chrome Extensions (2016)

5. Shklar, L., Web Application Architecture (2010)

© Яровая Е.В., 2022 Научный сетевой журнал «Столыпинский вестник» №5/2022

Для цитирования: Яровая Е.В., ПРИНЦИПЫ РАБОТЫ СОВРЕМЕННЫХ ВЕБ БРАУЗЕРОВ// Научный сетевой журнал «Столыпинский вестник» №5/2022

2796