Главная/ Учимся Javascript, CSS, HTML/ Тоже нужно знать/ Как работает браузер: архитектура

Как работает браузер: архитектура

Дата публикации: 04.11.2010

Общая архитектура всех современных популярных браузеров похожа: состоит из нескольких независимых компонентов (или систем, или модулей — кому как больше нравится). Между собой компоненты взаимодействуют посредством специальных интерфейсов.

Такая организация имеет ряд сильных достоинств:

  • легко менять дизайн браузера;
  • легче локализировать ошибки кода;
  • каждый компонент можно улучшать отдельно;
  • каждый компонент можно использовать повторно;
  • каждый компонент можно использовать отдельно (например, веб-браузер GNOME использует движок Gecko от Mozilla, но свои интерфейсы).

Схема архитектуры браузера

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

Это упрощенная схема частей браузера. На самом деле компонентов гораздо больше: это встроенные плагины и мультимедиа, и модуль для работы с почтой, и help, и многое другое. Но все это мало интересно front-end разработчику. Надеюсь из последующих статей станет ясно, почему мне интересно только это упрощенное ядро.

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

Интерфейс пользователя (user interface)

Это такой себе буфер между пользователем и сердцем браузера — его движком. Именно ему приходится принимать все мыслимые и немыслимые пожелания от пользователя и обрабатывать его действия.

Интерфейс пользователя обеспечивает стандартный набор функций (ввод информации, печать, визуализация процесса загрузки данных, панели инструментов и настроек) — в общем все то, что пользователь ждет от обычного ПО.

Высокоуровневый движок браузера *

* — в некоторых источниках этот уровень называют движком браузера (browser engine). Но многие привыкли (и я в том числе) называть движком браузера, модуль, отвечающий за рендеринг страницы. А это, что на самом деле является графическим движком. Поэтому, чтобы не путаться, я переименовал тут движок браузера на высокоуровневый движок (как более умно назвать его — не придумал).

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

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

Графический движок (rendering engine или layout engine, или browser engine)

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

Именно эта часть браузера анализирует полученный HTML или XML, при этом учитывает влияние CSS и Javascript, а так же других объектов, расположенных на веб странице (например, изображения или flash). На основе всех этих данных, движок создает макет (разметку) страницы, который видит пользователь на экране.

Ключевыми компонентами графического движка являются HTML и CSS парсеры — сложные программные комплексы, поскольку они позволяет графическому движку отобразить документ даже при наличии ошибок в HTML и CSS.

Самые распространенные движки браузеров на сегодня:

  • Trident — Internet Explorer;
  • Gecko — браузеры Mozilla;
  • Webkit — Chrome, Safari;
  • Presto — Opera.

Некоторые из этих движков совмещают в себе графический и высокоуровневый движки.

Сеть (networking)

Этот компонент предоставляет функциональные возможности для получения и обработки URL-адресов, используя общие протоколы Интернет HTTP и FTP. Управляет всеми аспектами связи через Интернет и безопасности. Именно этот компонент осуществляет кэширование полученных данных для минимизации сетевого трафика.

Javascript движок

Отвечает за выполнение кода Javascript. Результаты выполнения передается графическому движку для отображения содержимого документа.

XML парсер

Используется для разбора XML-документов.

Заметка

В последних версиях движков похоже на то, что XML парсер перебрался в ядро графического движка. Связано с тем, что то же SVG и MathML уже могут быть непосредственно встроены в HTML документ (спецификация HTML5).

Display Backend

Тесно связан с операционной системой. Обеспечивает отображение примитивной графики (стандартные скролбары, элементы форм, оформление окон), которые зависят от операционной системы.

Сохранение данных

Отвечает за сохранение данных пользователя такие как закладки, настройки, пароли.

Материалы

Теги: ,
Показать комментарии