Как работает Веб браузер

Сегодня трудно представить мир без интернета.

Веб-браузер лежит в основе нашего опыта работы в Интернете. Каждый день миллионы посещают сайты через браузеры. Пять основных браузеров - Chrome, Firefox, Internet Explorer, Safari и Opera - составляют 95% веб-трафика.

Основная роль веб-браузера заключается в том, чтобы принимать веб-URL через адресную строку, извлекать ресурсы и отображать их на экране

Функциональность браузеров можно разделить на четыре основных раздела, которые включают в себя:

• Получать
• Процесс
• Отображать
• Хранения

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

Получать данные

Основная подсистема, называемая сетевым уровнем, играет жизненно важную роль в получении данных с последующих веб-серверов через Интернет.

Сетевой уровень

Принимает URL-адреса из пользовательского интерфейса браузера и отвечает за сетевые вызовы для извлечения ресурсов по протоколам HTTP / FTP.

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

Если на запрошенном веб-сайте реализован кэш, копия данных будет сделана в App Cache или Service Workers в следующий раз. Кэши отлично подходят для быстрого отклика и сохранения сетевых запросов для регулярных посещений.

Браузер изначально ищет доступность любого кэша в локальной памяти для запрошенных URL-адресов. В противном случае сетевой уровень создает HTTP-пакет с именем домена для запроса веб-ресурса через Интернет.

Сетевой уровень

Принимает URL-адреса из пользовательского интерфейса браузера и отвечает за сетевые вызовы для извлечения ресурсов по протоколам HTTP / FTP.

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

Если на запрошенном веб-сайте реализован кэш, копия данных будет сделана в App Cache или Service Workers в следующий раз. Кэши отлично подходят для быстрого отклика и сохранения сетевых запросов для регулярных посещений.

Браузер изначально ищет доступность любого кэша в локальной памяти для запрошенных URL-адресов. В противном случае сетевой уровень создает HTTP-пакет с именем домена для запроса веб-ресурса через Интернет.

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

Процесс

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

Рендеринг

Подсистема механизма рендеринга обрабатывает данные с сетевого уровня и отображает веб-контент на экране.

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

Многие механизмы рендеринга доступны и обычно написаны на C ++. Примеры включают в себя:

• Chrome и Opera используют Blink
• Firefox использует Gecko
• Internet Explorer использует Trident
• Edge используя EdgeHTML
• Safari использует WebKit

С движками рендеринга веб-ресурсы анализируются.

Например, анализатор HTML преобразует шаблон HTML в объект, называемый деревом DOM.

Таблицы стилей анализируются для создания правил стиля как для внешних, так и для встроенных элементов стиля.

Дерево рендеринга - это объект, который сочетает в себе как проанализированный HTML, так и CSS. Он генерируется с визуальными инструкциями и атрибутами для визуализации элементов на экране пользователя.

Как только дерево рендеринга построено, оно проходит процессы макета и рисования и отображает вывод на экране.

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

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

Механизм рендеринга обрабатывает данные порциями и отображает содержимое как можно скорее. Он не будет ждать, пока все содержимое документа подвергнется разметке и процессам рисования.

Движок JavaScript

Это подсистема для анализа кода JavaScript в машинном коде и последующего его выполнения. Эти движки JS могут быть стандартными интерпретаторами или JIT (как раз вовремя) компиляторами.

Одним из самых популярных движков является движок Google V8. Это написано на C ++. Вот несколько примеров, которые используют разные браузеры:

• Chrome использует Chrome V8
• Safari использует JavaScriptCore
• Firefox использует SpiderMonkey
• Edge использует Chakra
• Internet Explorer использует Chakra(JsScript)

Эти двигатели имеют несколько внутренних потоков для выполнения различных задач. Примеры таких задач включают в себя:

• Извлечение, компиляция и выполнение кода
• Поток профилирования для анализа функций и их затрат времени
• Оптимизация процесса исполнения
• Сборщик мусора

Движок Google V8 использует метод разметки и разметки для поэтапного сбора мусора. Это использует время простоя браузера и повышает производительность.

Начиная с версии 5.9 (начало 2017 года), Ignition и Turbofan являются новейшими трубопроводами в двигателе V8.

NodeJS - это серверная среда исполнения JavaScript, созданная на основе движка V8 с открытым исходным кодом Google. Он используется для выполнения JavaScript на стороне сервера.

Дисплей

Как следует из названия, это относится к представлению данных пользователям. Пользовательский интерфейс и Browser Engine отвечают за представление данных и обработку пользовательской навигации.

Пользовательский интерфейс

Внешний вид браузера обычно включает в себя адресную строку для приема веб-адресов и кнопки навигации, такие как «назад», «вперед», «обновить», а также панель «Домой» и «Закладки».

Наряду с этими входами и кнопками действий у нас есть окно просмотра (основная часть экрана) для отображения содержимого, полученного с веб-сайтов.

Пользовательский интерфейс (UI) связывается с другими подсистемами в браузере для отображения контента и действует соответствующим образом.

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

Движок браузера

Механизм браузера представляет собой встраиваемую подсистему, которая обеспечивает высокоуровневый интерфейс для механизма визуализации.

Он загружает заданный URL-адрес и поддерживает примитивные действия при просмотре, такие как навигация вперед, назад и перезагрузка.

Место хранения

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

Хранилище данных

Постоянство данных достигается с помощью различных браузерных API. Некоторые из них включают в себя:

• Локальная хранилище
• Хранилище сессии
• Печеньки или же куки
• WebSQL
• IndexedDB
• FileSystem
• AppCache
• Сервисные работники

Локальное хранилище и хранилище сеансов - это пары ключ-значение, которые могут хранить любые объекты и функции JS в браузере.

Хранилище сеансов сохраняет данные в браузере, пока активен сеанс веб-сайта. Локальное хранилище - это память в браузере. Данные сохраняются до тех пор, пока они не будут явно очищены или изменены пользователем или кодом JavaScript.

Эти ограничения для Session и Local web storage составляют 5 МБ на объект и 50 МБ на систему.

Файлы cookie - это наборы данных пар ключей, которые хранятся в памяти браузера. Они отправляются туда и обратно между клиентом и сервером.

Они дорогостоящие и наименее эффективны среди методов сохранения данных. Тем не менее, они очень полезны, когда на карту приходят конфиденциальность и безопасность.

Файлы cookie - это наборы данных пар ключей, которые хранятся в памяти браузера. Они отправляются туда и обратно между клиентом и сервером.

Они дорогостоящие и наименее эффективны среди методов сохранения данных. Тем не менее, они очень полезны, когда на карту приходят конфиденциальность и безопасность.

WebSQL, IndexedDB и FileSystem имеют возможность хранить данные в браузере в зависимости от размера, производительности и необходимости.

Кэш приложений был представлен в HTML5. Он хранит статический контент сайта и обслуживает контент пользовательского интерфейса во время простоя сети.

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

Финал

Хорошо, давайте сделаем краткий обзор. Все основные веб-браузеры включают подсистемы, а также другие подмодули, помогающие в этом процессе.

Эти системы участвуют от принятия веб-URL до отображения веб-контента на экране. Они выполняют сетевые вызовы, извлекают ресурсы, анализируют файлы HTML, CSS и JavaScript для создания объектов, отображаемых на экране. Все это в совокупности создает замечательный сайт для пользователя.

Источник