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

Современные браузеры - это полнофункциональные программные пакеты, которые могут интерпретировать и отображать веб-страницы HTML, приложения, JavaScript, AJAX и другой контент, размещенный на веб-серверах. Многие браузеры предлагают плагины, которые расширяют возможности программного обеспечения, чтобы оно могло отображать мультимедийную информацию (включая звук и видео), или браузер можно использовать для выполнения таких задач, как видеоконференции, для разработки веб-страниц или добавления антифишинговых фильтров и другие функции безопасности браузера.

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

Архитектура браузера высокого уровня

На изображении ниже показаны основные компоненты веб-браузера:

  1. Пользовательский интерфейс. Пользовательский интерфейс - это пространство, в котором Пользователь взаимодействует с браузером. Он включает в себя адресную строку, кнопки «Назад» и «Далее», кнопку «Домой», «Обновить и остановить», опцию закладки и т. Д. Все остальные части, кроме окна, в котором отображается запрошенная веб-страница, находятся под ним.
  2. Механизм браузера. Механизм браузера работает как мост между пользовательским интерфейсом и механизмом рендеринга. В соответствии с входными данными от различных пользовательских интерфейсов он запрашивает и манипулирует движком рендеринга.
  3. Механизм визуализации. Механизм визуализации, как следует из названия, отвечает за отображение запрошенной веб-страницы на экране браузера. Механизм визуализации интерпретирует HTML, XML-документы и изображения, отформатированные с помощью CSS, и генерирует макет, отображаемый в пользовательском интерфейсе. Однако, используя плагины или расширения, он также может отображать данные других типов. В разных браузерах используются разные механизмы рендеринга:
    * Internet Explorer: Trident
    * Firefox и другие браузеры Mozilla: Gecko
    * Chrome и Opera 15+: Blink
    * Chrome (iPhone) и Safari: Webkit
  4. Сеть: компонент браузера, который извлекает URL-адреса с помощью распространенных интернет-протоколов HTTP или FTP. Сетевой компонент обрабатывает все аспекты интернет-коммуникации и безопасности. Сетевой компонент может реализовать кэш извлеченных документов, чтобы уменьшить сетевой трафик.
  5. Интерпретатор JavaScript: это компонент браузера, который интерпретирует и выполняет код JavaScript, встроенный в веб-сайт. Интерпретированные результаты отправляются механизму рендеринга для отображения. Если сценарий внешний, то сначала ресурс извлекается из сети. Парсер остается в ожидании, пока скрипт не будет выполнен.
  6. Backend пользовательского интерфейса. Backend пользовательского интерфейса используется для рисования основных виджетов, таких как поля со списком и окна. Этот бэкэнд предоставляет общий интерфейс, не зависящий от платформы. Внизу используются методы пользовательского интерфейса операционной системы.
  7. Сохранение / хранение данных: это уровень сохраняемости. Браузеры поддерживают такие механизмы хранения, как localStorage, IndexedDB, WebSQL и FileSystem. Это небольшая база данных, созданная на локальном диске компьютера, на котором установлен браузер. Он управляет данными пользователя, такими как кеш, файлы cookie, закладки и настройки.

Здесь важно отметить, что в веб-браузерах, таких как Google Chrome, каждая вкладка выполняется в отдельном процессе (несколько экземпляров механизма рендеринга).

Механизм рендеринга

Сетевой уровень начнет отправлять содержимое запрошенных документов механизму рендеринга кусками по 8 КБ.

Механизм визуализации анализирует фрагменты HTML-документа и преобразует элементы в узлы DOM в дереве, называемом «c деревом содержимого» или «деревом DOM». Он также анализирует как внешние файлы CSS, так и элементы стиля.

Пока строится дерево DOM, браузер строит другое дерево, дерево рендеринга. Это дерево состоит из визуальных элементов в том порядке, в котором они будут отображаться. Это визуальное представление документа. Назначение этого дерева - дать возможность раскрасить содержимое в правильном порядке. Firefox называет элементы в дереве визуализации «фреймами». WebKit использует термин «средство визуализации» или «объект визуализации».

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

Следующий этап - покраска. На этапе рисования выполняется обход дерева визуализации и вызывается метод «paint ()» средства визуализации для отображения содержимого на экране. Рисование использует внутренний слой пользовательского интерфейса.

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

Ссылки: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Resources
https://image.slidesharecdn.com/howbrowserwork-140714233410-phpapp01/95/how-browser -work-19-638.jpg? cb = 1405397055