Браузер != Браузерный движок. Ядро браузера

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

Автор: Евгений Рыжков Дата публикации: 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

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

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

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

Материалы

xiper.net

Браузер != Браузерный движок / Хабрахабр

Всем привет!

В данной статье я хочу поделиться мыслями на счёт создания собственного браузерного движка. Мы рассмотрим текущие браузеры и браузерные движки. Вспомним про Modest и узнаем его нелёгкую судьбу.

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

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

Браузер и браузерный движок

Существующий мир сложно представить без браузеров. Они есть на многих устройствах: компьютеры, лэптопы, телефоны, игровые приставки. Если представить браузер в виде машины то браузерный движок это всё то, что скрыто под капотом вашего автомобиля. Браузеры как и автомобили могут отличаться внешним видом и содержимым под капотом. Цвет, кнопочки на панели, аудиосистема. У кого-то под капотом двигатель V8, а у кого-то там масло течёт.

Браузер объединяет периферию и предоставляет функционал позволяющий манипулировать движком, его поведением, предоставляет дополнительные сервисы. Браузерный движок выполняет всю "грязную" работу: загрузка, обработка, отрисовка данных и все возможные расчёты.

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

Кто создает браузеры и движки

Разработкой собственного браузера занимается множество компаний: Google, Mozilla, Apple, Microsoft, Opera Software, Яндекс, Ростелеком, Vivaldi Technologies, много их…

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

С браузерными движками дела обстоят кардинально иначе. Вот список движков, их разработчиков и обладателей:

• Blink: Google
• Gecko: Mozilla
• WebKit: Apple
• EdgeHTML: Microsoft

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

Например, рассмотрим самый популярный проект от компании Google — Chromium. Данный проект содержит в себе движок Blink. Создавать данный проект Google помогают такие компании как Intel, Facebook, IBM, LG Electronics, NVIDIA, Yandex. Полный список можно посмотреть тут. Условия на которых компании помогают создавать Blink/Chromium описаны в разделе Legal stuff на сайте проекта Chromium. Если кратко, то всё что вы создаёте принадлежит (не эксклюзивно) Google.

Браузеры компаний Opera, Яндекс, Ростелеком и другие используют именно этот браузерный движок. Если быть до конца откровенным то заявления вроде "у нас есть свой браузер" не совсем правда. Собственные сервисы — да, а вот всё остальное принадлежит другой компании(ям). И эта другая компания предоставляет свой браузерный движок на определенных условиях.

Лицензии браузерных движков

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

Если сразу и кратко: лицензии сносные, прям вот из ряда вон ничего нет. Кроме EdgeHTML который закрыт. Легально утащить к себе какой-то проект и закрыто разрабатывать/изменять видимо не выйдет. Лицензии призывают к взаимной открытости.

Blink

Открытый исходный код, ответвление движка WebKit. Как и в WebKit заявлено четыре лицензии:

Самый популярный браузерный движок. Он входит в состав проекта Chromium. Именно на основе Chromium создают собственные браузеры.

Если верить файлу LICENSE проекта Chromium его основная лицензия 3-Clause BSD. Но у проекта есть директория third_party (третьи лица, третья сторона) содержащая множество стороннего кода от которого проект зависит. Иначе говоря, без этого кода собрать браузер не выйдет. У каждого компонента свои лицензии отличные от того что указано в LICENSE проекта:

Gecko

Открытый исходный код. Заявлена одна лицензия:

Активно развивается компаний Mozilla и используется в собственном браузере компании — Firefox. Так же используется в браузере Tor Browser обеспечивающий анонимное пребывание в сети.

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

WebKit

Открытый исходный код. Заявлено четыре лицензии:

Развивается компанией Apple и используется в собственном браузере компании — Safari. Ранее многие компании использовали в своих разработках WebKit, но после покинули проект и переключились на Blink от Google.

EdgeHTML

Закрытый исходный код. Проприетарная лицензия.

Движок используется для браузера компании Microsoft под названием Edge, который пришёл на смену Internet Explorer. Это их новый движок. Предыдущий Trident (MSHTML) компания прекратила развивать.

Риски

Использование стороннего движка порождает очевидные риски:

1. Закрытие исходного кода
2. Выход ключевых компаний из разработки
3. Смена лицензий на код

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

Компании развивающие собственные браузеры должны понимать, что всё будет "хорошо" пока они не составляют угрозу/конкуренцию разработчикам оригинального браузера/браузерного движка. Думаю это очевидно. Компания тратит на разработку движка свои ресурсы, но вдруг появляется другая компания которая используя их движок захватывает рынок. Реакция, думаю, очевидна — смотрим список рисков выше.

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

Для примера, компания Microsoft создает свой движок, хоть и закрытый. Google вместе с Apple разрабатывали WebKit, но позже Google сделал форк и начал развитие собственного движка Blink.

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

Адаптация движков

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

Собственный движок

Прежде всего стоит ответить на главный вопрос — зачем создавать свой браузерный движок? А точнее, кому не надо создавать свой движок?

Свой браузерный движок не стоит создавать если:

• Нет задачи/стремления захватить рынок.
• Браузер нужен лишь номинально. Сейчас это модно, делают даже школьники.
• Создаваемый движок не будет отличаться от существующих: скорость, надёжность, адаптивность.
• Идёт освоение бюджета.

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

Стоит ли заниматься разработкой движка для "заработка", для создания стартапа?

Данный вопрос скорее к сфере его применения. Мне видится несколько направлений:

1. Собственно, создание полноценного браузера. Сотрудничество с поисковыми системами, различными сервисами. Создание особых версий для государственных структур.
2. Рынок IoT (интернет-вещей), а так же адаптация для телевизоров, приставок, портативных устройств.
3. Сервисы на отдельных компонентах браузера. Например, умный анализ контента сайта на риски: запрещенные комментарии, посты от пользователей и так далее. Технический анализ сайтов.
4. Продажа движка. Самое простое, написать под компанию.

Кроме того, престиж компании разработчика браузерного движка значительно выше чем у клонов. Именно как технологической компании. Это сказывается на популярности компании и привлекательности для существующих и будущих сотрудников. Но это уже скорее о честолюбии, встать в одном списке с такими компаниями как Google, Mozilla, Microsoft.

Заключение

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

Развитие браузерного движка сильно зависит от метода его разработки. Каким он будет: открытым, закрытым?

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

Компании далёкой от браузеров заняться разработкой браузерного движка тоже можно, и не только для того чтобы создать браузер. Если итоговый продукт будет полноценным браузерным движком превосходящим существующие то он будет востребован. Сферы применения были описаны выше.

Цикл статей

1. Браузер != Браузерный движок
2. Браузерный движок. Архитектура, работа с памятью.
3. HTML парсер. Токенизация, обработка токенов, построение дерева. Пишем свой парсер. Из каких стадий состоит разбор HTML, в чём сложность и как разогнать HTML парсер в несколько раз.
4. Кодировки в HTML. Как определяются, как конвертируются. Напишем свой кодировщик и обсудим положение дел.
5. CSS парсер и CSS модули. Токенизация, обработка токенов. Создадим свой CSS парсер. Разберём основные аспекты обработки CSS. Выясним в чём сложность, на что тратятся ресурсы и как написать самый быстрый парсер CSS/модулей.
6. CSS парсер. Grammar. Пишем собственный Grammar для CSS модулей формирующий быстрый, человеко-читаемый код.
7. CSS Selectors. Как устроены, быстрый поиск HTML элементов по селекторам.
8. Layout. Скрещиваем HTML и CSS. Назначаем CSS свойства HTML элементам. Разберём порядок назначения, приоритеты и что делать если CSS постоянно изменяется.
9. Layout. Потоки. Поддержка CSS свойства display: block.
10. Шрифты. Как расчитывать размер символов, строк. Напишем свой парсер шрифтов. Узнаем, что такое baseline, descender, x-height, как хранятся символы и углубимся в тему расчётов размера символов.
11. Layout. Поддержка CSS свойства display: inline.

Судьба Modest

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

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

Не смотря на то, что у меня есть все права на Modest, на код никто не претендует (подписаны бумаги), я решил его "закопать". Чтобы ни у кого не возникало ложных ощущений. Тут надо понимать, что закапывается и весь основной код который развивался вне компании (mycore, myhtml). Но, есть и плюс, возможно, я стал чуть умнее.

Мной было потрачено очень много времени на изучение спецификаций, осознания их, поиск оптимальных алгоритмов, написание черновиков (прототипов), создание myhtml (самый быстрый парсер html) в свободное от работы время, и просто так забросить эту тему я пока не могу. Было потрачено много выходных, праздников, вечеров, ночей.

Теперь я занимаюсь разработкой нового браузерного движка. Разработка с ноля. Имени у него пока нет, только кодовое — lexbor. Вся основа уже написана: работа с памятью, общие алгоритмы, заложена будущая архитектура. Как всегда, всё краше и лучше чем было. В общем, у меня есть самое главное: технология и чёткое видение/понимание как и что развивать.

Одному мне такой проект не потянуть. Если поддержки не найду (финансирования) то прекращу разработку и присоединюсь контребьютером к существующему открытому движку (Blink или Gecko). Попробую побыть там волонтером и реализовать свои идеи. Занимаюсь всем этим исключительно в нерабочее время.

Тут видимо должна быть картинка «ты должен был бороться со злом, а не примкнуть к нему».

Спасибо за внимание!

P.S.: Все ошибки в личку или считать авторским стилем.

habrahabr.ru

Кроссбраузерная вёрстка / Блог компании HTML Academy / Хабрахабр

Если собрать охапку современных браузеров, то разложить её можно по-разному: по устройствам, по платформам, по типу работы, да хоть по цвету иконок. Самое полезное для разработчика — уметь разложить их по движкам. Именно движок, то есть самое ядро браузера, определяет как он работает с вашей вёрсткой.

При всём разнообразии браузеров, независимых движков довольно мало, а новые появляются очень редко. Так что вместо десятков браузеров вам нужно поддерживать не больше пяти независимых движков. А ещё бывает, что браузеры с одним названием используют разные движки на разных платформах! В общем, всё очень сложно и интересно.

Самый популярный в мире браузерный движок — это Blink. Его использует Chrome и браузеры на его основе: Opera, Samsung Internet, Яндекс.Браузер и другие. Для работы с JavaScript, эти браузеры используют движок V8 — тот же, что и в Node.js. Один из главных разработчиков открытого движка Blink — Google, но в разработке активно участвует не меньше десятка компаний.

WebKit, другой популярный движок, очень похож на Blink. А вообще, наоборот — это Blink похож на WebKit. Это как? В 2013 году Blink форкнули из WebKit. По сути, скопировали. Google собрала вещи и сказала Apple, основному разработчику WebKit, что ей не нравятся её методы работы и теперь всё будет по-другому. Что поделать, опенсорс. И действительно, стало по-другому: основа у WebKit и Blink общая (префиксы webkit, например), но возможности уже довольно разные. На новом WebKit сейчас работают мобильные и десктопные браузеры Safari, на старом — встроенный браузер на Android до версии KitKat.

На движке Gecko работает браузер Firefox, когда-то очень популярный, а сегодня сохраняющий небольшую долю и важную роль в развитии веба и технологий. Префиксы у Gecko свои: moz — Mozilla, но для лучшей совместимости Firefox специально поддерживает некоторые свойства WebKit. Полноценный Firefox на Gecko работает на десктопных платформах и на Android. Параллельно с Gecko, Mozilla разрабатывает экспериментальный движок Servo и меняет некоторые части Gecko прямо на ходу. Например, в следующем Firefox 57 движок CSS заменят на новый.

Браузер Edge работает на всех современных платформах Microsoft, включая мобильные и Xbox. В его основе движок EdgeHTML — недавно как раз вышла его 16-я версия. EdgeHTML тоже форкнули от движка Trident или MSHTML, на котором работал браузер Internet Explorer. Удивительно похоже на историю Blink и WebKit: оба движка сохраняют общие префиксы (ms и опять немного webkit для совместимости), но сильно отличаются по возможностям. EdgeHTML отбросил всякое старьё и смело развивается: пара крупных релизов в год и даже система голосования за фичи. Trident и IE закрыли в 2015 году.

Кроме движков, полезно ещё знать особенности платформ. Например, на мобильной платформе iOS куча браузеров, помимо встроенного Safari: Chrome, Firefox, Opera, Яндекс, UC и даже Edge недавно выпустили. Но все эти браузеры — просто оболочки над встроенным в систему движком WebKit. Правила этой платформы запрещают использовать другие браузерные движки. А вот на Android большинство браузеров поставляются со своими движками: Firefox, Opera, Samsung, но некоторые используют встроенный Chromium.

Ну вроде всё? А нет! Есть ещё отдельная группа необычных браузеров: они живут не на устройствах пользователей, а глубоко на серверах. На устройствах стоит только лёгкая оболочка, которая запрашивает адрес и получает с сервера набор скриншотов и ссылок, слепленных в сайт. Это прокси-браузеры и они безумно сжимают трафик, но по пути теряют: фирменные шрифты, фоновые картинки, градиенты, скруглённые уголки, тени и вроде того. Opera Mini — один из самых популярных прокси-браузеров. На сервере у него крутится устаревший движок Presto, а ставят его чаще всего на простые телефоны. Но есть и другие, подробнее вам расскажет Тим Кадлек.

Некоторые браузеры работают только на одной платформе: Edge и IE есть только на Windows, Safari только на macOS и iOS. Были когда-то попытки интервенций, но ничего не вышло. Это конечно усложняет тестирование. К счастью, есть сервисы вроде BrowserStack, которые дают вам доступ ко всем существующим браузерам, а Microsoft выкладывает компактные образы Windows для тестирования Edge и IE в виртуальных машинах.

Ладно! Про браузеры мы теперь знаем. А что делать, если тот же браузер, тот же движок — а результат на разных платформах разный? А ничего не поделаешь! На деле браузеры могут сильно отличаться в зависимости от платформы или устройства. Самая большая разница между десктопными и мобильными браузерами — в последних очень много оптимизаций и просто магии. Но можно поймать и разное поведение на десктопных Windows и macOS.

Думаю вы уже поняли, к чему я клоню. Кроссбраузерность — это такой радужный единорог, за которым все гоняются, но никто не может поймать. Цель у погони, безусловно, благородная: чтобы сайты выглядели и работали одинаково хорошо на всех браузерах и всех платформах. И если размеры отступов, шрифта, высоту строки, цвета мы ещё можем более-менее гарантировать, то сглаживание текста, размытие теней, рендеринг графики и внешний вид системных контролов лучше даже не пытаться привести к общему виду.

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

И ещё про тестирование. Как бы хорошо ни имитировал устройства и браузеры эмулятор Chrome DevTools — это только намёк на то, как они будут выглядеть в реальности. Важно проверить результат на настоящих платформах и устройствах, как минимум: на Windows, Android, macOS и iOS. Настоящие пальцы на настоящем устройстве, настоящие браузеры в естественной среде обитания расскажут вам много нового о том, как именно будут пользоваться вашими интерфейсами. Это гораздо важнее того, насколько они похожи на макет.

Подпишитесь на новости браузеров в Твиттере, поставьте себе Chrome Canary, Firefox Nightly, Safari Technology Preview. Включайте флаги, пробуйте, будьте в курсе и главное — хватит гоняться за пикселями, займитесь хорошими интерфейсами. Сайты не должны выглядеть одинаково во всех браузерах.

Видеоверсия

Вопросы можно задавать здесь.

habrahabr.ru

Смотрите также

• 
  Браузер bat
• 
  Кукис браузера
• 
  Офис браузер
• 
  Файловый браузер
• 
  Браузер назначение
• 
  Конфиденциальность браузера
• 
  Gecko браузеры
• 
  Зашифрованный браузер
• 
  Веб браузере
• 
  Firefox браузера
• 
  Браузер 10