какие движки используют браузеры

Браузеры

Основные браузерные движки

Движок «WebKit» — разрабатывался для браузера «Safari» компанией «Apple Inc». (новая версия WebKit2)

Основные компоненты движка «WebKit»

Движок «Blink» — разработан компанией «Google Inc» на основе компонента «WebCore» движка «WebKit» для браузера «Chromium». Для обработки «JavaScript» использует движок «V8» разработанный компанией «Google»

Движок «Gecko» — разработчик «Mozilla Foundation». Используется в браузерах «Mozilla Firefox», «SeaMonkey», «Camino». Для обработки «JavaScript» используется движок «SpiderMonkey»

Движок «Trident» второе название MSHTML, разработан компанией Microsoft для браузера Internet Explorer (сокращение MSIE или IE). Для обработки «JavaScript» в «Internet Explorer» до версии «IE9» использовался движок «JScript», начиная с версии «IE9» для обработки «JavaScript» используется движок «Chakra»

Движок «EdgeHTML» — новый браузерный движок разработанный компанией Microsoft

Распространенные браузеры

Chromium

Chromium — (с англ. хром). браузер с открытым исходным кодом, разрабатываемый сообществом авторов, компанией Google и другими Яндекс, NVIDIA Corporation, Comodo CA Limited

Основные компоненты

На основе «Chromium» созданы браузеры:

Mozilla Firefox

«Mozilla Firefox» — браузер на движке «Gecko», разработкой и распространением которого занимается «Mozilla Corporation».

Safari

«Safari» — разработан корпорацией Apple. Движок «WebKit»

Internet Explorer

«Internet Explorer» — браузер на движке «Trident», от компании «Microsoft». Входит в комплект операционных систем семейства Windows.

Microsoft Edge

«Microsoft Edge» — («Project Spartan») браузер на движке «EdgeHTML», интерпретатор «JavaScript» — «Chakra». Разработан компанией «Microsoft» для замены «Internet Explorer»

Maxthon

«Maxthon» — китайское творение которое позволяет переключаться между браузерными движками Microsoft Trident и WebKit.

Источник

Что прячется под линком: обзор различных браузеров с точки зрения безопасности и технической стороны

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

Первый браузер появился в 1990 году, а разработал его Тим Бернерс-Ли, отец Всемирной паутины. С тех пор прогресс шел с удивительной скоростью и то, что тогда могло считаться революцией, сейчас кажется обыденностью.

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

Проверить отображение контента на разных браузерах можно здесь:

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

Так выглядит наш сайт на старых версиях браузеров:

Более подробно про кроссбраузерность можно почитать в нашем блоге.

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

Основные движки

Сначала разберемся, что такое движок браузера. Если коротко, то это программа, которая преобразовывает набор команд и строки кода в полноценную красивую веб-страницу. И уже на основе движка разрабатывается браузер, обличается в более привлекательную форму и в итоге становится user-friendly. Т. е. движок — это ядро, а браузер уже оболочка. Так, например, самый популярный движок Blink (в рамках проекта Chromium) используется на разных браузерах — на Google Chrome и Opera.

На данный момент актуальный список браузерных движков выглядит так (в скобках процент использования на 2019 год):

Ниже вкратце рассмотрим историю каждого движка.

Blink и WebKit

Blink является популярнейшим браузерным движком. Используется в Google Chrome и в браузерах на его базе, например, Opera и Яндекс.Браузер. Один из основных разработчиков — Google, но разработка поддерживается с помощью дюжины компаний.

В 2019 году Microsoft решила не изобретать велосипед и анонсировала запуск Edge на движке Blink в рамках проекта Chronium. Ранее часть сервисов могли отсеивать пользователей браузера от Microsoft по User Agent, поэтому возникали некоторые различия в поведении браузеров, и часть особенностей поведения и функций, которые встречаются в Chronium, могли внедряться в Edge с запозданием.

Так как отличия движка сказывались на комфорте конечных пользователей и разработчиков, Microsoft решила внедрить в Edge Chronium. Также это позволит устанавливать пользователям расширения для Edge, совместимые с тем же Google Chrome, а интерфейс приблизится к браузеру от Google.

Blink вытек из другого популярного движка — WebKit. Его разработали Apple в 2000 году на основе движка KHTML, который использовался в браузере для Nokia Series 60. Google Chrome с 2008 по 2013 год работал на WebKit. Но в 2013 году Google с некоторыми изменениями скопировали ядро у Apple для последующей его модификации, оптимизации и в итоге внедрению в Chrome. Появление нового движка усложнила жизнь веб-разработчиков, но заставила рынок развиваться более быстрыми темпами.

Сейчас на Webkit работает браузер Apple Safari как на MacOS, так и на мобильной iOS.

Trident и EdgeHTML

У Microsoft есть два браузерных движка: Trident и EdgeHTML, более пристальный взгляд можно бросить только на последний, т.к. Trident был закрыт еще в 2015 году. Но для истории:

Trident был разработан Microsoft для Internet Explorer 4.0 в 1997 году и поддерживался вплоть до выхода Windows 10. Для пользователей считался самым неудачным движком. Он не мог похвастаться поддержкой сторонних расширений, некорректно отображал веб-страницы, а его скорость работы оставляла желать лучшего. Кроме того, постоянные зависания не давали плюсов браузеру.

Хоть Microsoft более не поддерживает Trident, пользовательская база Internet Explorer почти 7%. Но адаптировать сайты для него все труднее и труднее.

В Windows 10 для Edge Microsoft взяли базу Trident и уже на ее основе разработали EdgeHTML. Над движком поработали на славу: по данным результатов некоторых тестов производительности, браузер Edge перегнал Chrome и Firefox. Но стоит сказать, что загрузка страниц в Edge действительно была моментальная, и это поражало.

В 2019 году Microsoft отказываются от дальнейшей разработки EdgeHTML в угоду Blink и Chromuim.

Gecko и Quantum

Движок Gecko предназначен для браузера Firefox, достаточно популярного, но ныне не лидирующего браузера. Толчком к разработке послужила первая война браузеров, где соперничали Internet Explorer и Netscape Navigator (практически лидер на рынке в 90-х). Победа была за IE, он занял около 90% рынка. А разработчики NN опубликовали исходные коды, которые оказались в очень плохом состоянии.

На основе этого было приято решение переписать движок с нуля. На старте носил название «Raptor», затем «NGLayout» и в итоге обрел свое окончательное название «Gecko».

Firefox занимал свою долю на рынке, но не хотел быть отстающим от Chrome. По некоторым исследованиям, до 2010 года Firefox владел третью рынка (31,6%), в 2010 количество установок снизилось до 23,2%, а в 2017 и вовсе до 13%. По сравнению с Google Chrome (67,2%), это мизерные цифры.

Поэтому в Mozilla встала задача о привлечении новых пользователей. И первым шагом был анонс нового проекта — Quantum, в рамках которого началась разработка более усовершенствованного энергоемкого движка.

В ноябре 2017 года Firefox обновился до 57 версии, которая привнесла серьезные изменения. В названии красовалось «Firefox Quantum», браузер стал использовать преимущества многоядерных систем по аналогии с Chrome, получил новый интерфейс, который, к слову, стал «легче» и интуитивнее.

Браузер получил новый API-интерфейс разработки дополнений, теперь Firefox 57 поддерживает только расширения, созданные с помощью WebExtension. Это новый метод разработки, который должен унифицировать процесс создания плагинов и оптимизировать работу в многоядерных системах.

Хоть большинству пользователей понравилась новая версия «огненной лисы», доля Firefox в июне 2019 года составила 8,9%.

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

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

Safari

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

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

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

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

Google Chrome

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

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

В 2010 году Google встроила Adobe Flash в браузер, дабы избавить пользователя от необходимости загружать его отдельно.

С мая 2018 года Chrome начал помечать небезопасными все HTTP сайты и порекомендовал переключиться на HTTPS.

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

Предлагаем пройти тест, сможете ли вы распознать фишинговую атаку.

Автоматической загрузке исполняемых файлов компания Google сказала нет. Прежде чем загрузить исполняемый файл, необходимо нажать кнопку «сохранить». Сделано это для того, чтобы обезопасить пользователей от автозагрузок вредоносного ПО. Также в Chrome присутствует режим «инкогнито». По заявлениям Google, просматриваемые страницы, пароли, cookie автоматически удалятся после закрытия вкладок.

В 2019 году вышло 76-е обновление браузера, в котором удалось устранить уязвимость, которая позволяла сайтам определять при заходе на сайт, используется режим инкогнито или нет. Эта проблема основывалась на проверке наличия Chrome FileSystem API, который был отключен в новой версии, чтобы действия пользователя на устройстве не оставляли следов.

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

Стало известно, что Chrome для файловой системы выделяет хранилище во внутренней памяти, максимальный объем которого составляет 120 мбайт. Это позволяет отслеживать режим инкогнито с высокой скоростью.

Microsoft Edge

Microsoft заверяет, что браузер Edge более безопасен остальных обозревателей. Основано это на исследовании NSS Labs — организации, оценивающей решения в области безопасности. 304 фишинговых сайтов и вредоносного социально-инженерного софта были изучены. Было обнаружено, что SmartScreen — опция защищенности в Edge — заблокировала 99% атак на основе методов социальной инженерии, Firefox справился на 78,3%, а Chrome заблокировал 85,8%.

Как раз SmartScreen — основной вектор Microsoft в области безопасности. SmartScreen появился еще в Internet Explorer 7 и с тех времен только развивался. Но SM не есть гарант безопасности, Microsoft рекомендует использовать Edge в связке с хорошим антивирусом.

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

По аналогии с другими браузерами, в Edge есть функция «InPrivate», она позволяет при использовании вкладок или окон в режиме InPrivate не сохранять данные браузера на компьютере после завершения просмотра.

Opera

Главной фишкой в Opera и Opera mini, по заявлению самих Opera Software, является встроенный бесплатный VPN, который позволяет работать с расширенными настройками конфиденциальности. Но польский исследователь Михал Шпачек выяснил, что встроенный в Opera VPN не является оным, это лишь переконфигурированный HTTPS прокси.

Краткая выжимка на русском с ссылкой на оригинал.

Также удобно, что Opera и Opera mini для Android использует встроенный блокировщик рекламы. Пользователю нет необходимости терять время и искать нужное расширение в магазине аддонов. Opera заботится о своих пользователях, поэтому встроенный блокировщик рекламы также предотвращает майнинг криптовалюты с компьютера пользователя.

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

Opera, как и Chrome, периодически загружает черные списки фишинговых или сайтов-мошенников и при посещении одного из сайтов из списка показывает соответствующий значок.

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

Firefox

Если по цифрам браузер от Mozilla и отстает от того же Chome, но по безопасности он как минимум ровня. В Firefox предусмотрен и внутренний блокировщик содержимого, и функция «не отслеживать», и определяющие безопасность сайта значки, и предупреждение о небезопасном вводе пароля, когда страница не использует защищенное соединение. Mozilla делает все, чтобы пользователь чувствовал себя в безопасности, когда использует Firefox.

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

Также на странице помощи есть огромнейший FAQ по безопасности в Firefox и не только. Рекомендуем к ознакомлению.

И если мы заговорили о безопасности, то, конечно же, стоит отметить браузер Tor и внутренние Onion сети. Безусловно, ниженаписанное не гарантирует полную безопасность пользователя и его устройства, но на долю обеспечить сможет.

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

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

Браузером пользуются журналисты, социальные работники, общественные организации и спецслужбы. Часто через Tor проводятся транзакции по криптовалютам, т. к. IP-адрес скрыт, а адрес крипто-кошелька не меняется.

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

Важно понимать, что Tor — аномайзер трафика, а не его шифровщик. Чтобы остаться защищенным, к дополнению к Tor желательно пользоваться VPN, а также применять протокол HTTPS, когда это возможно.

Стоить помнить и про то, что скорость передачи информации оставляет желать лучшего. Дело в том, что IP пользователя шифруется, проходя через множество прокси-серверов, расположенных по всему миру. Постоянная переадресация и приводит к понижению скорости загрузки страниц.

Правда об Onion доменах

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

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

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

Хотите, чтобы проверили сайт на ошибки, которые могут быть критическими? Сообщите нам — проведем аудит сайта, составим подробный отчёт об ошибках и дадим рекомендации по их исправлению или исправим сами.

Источник

Браузерные войны 2021

Дисклеймер: речь в данной статье не идёт о браузерных войнах как таковых. Скорее, автор пытается объяснить устройство и механизм работы браузеров простым языком (прим. переводчика).

Наблюдая за тем, как Google Chrome планомерно подавляет конкуренцию на рынке браузеров, Нил Мор пытается проанализировать причины его популярности, а также объясняет, почему не стоит им пользоваться.

Подозреваем, что одно только упоминание о браузерных войнах 2000-го года вызовет у олдов горечь и раздражение (да, скорее всего, войны были в 1995-м, нам просто нравится округлять числа). В те дни веб-сайты представляли собой страницы, украшенные недружелюбными к пользователю логотипами «Compatible with Netscape» («Совместимый с Netscape») и анимированными гифками вроде «Under Construction» («В разработке»), загружать которые модем на 56 кбит/с мог вечность.

Сайты работали на аляповатых плагинах, а Microsoft нарушала бытующие в то время стандарты направо и налево, чтобы заполучить долю на рынке. Чудесные деньки, если под словом «чудесный» понимать «отвратительный».

Бороздить просторы Интернета в 2005-м было не очень весело

Всё изменилось благодаря той же корпорации Microsoft, точнее Биллу Гейтсу, который уже тогда осознал значимость браузеров для будущего и всё равно умудрился уступить лидирующую позицию на рынке какому-то отважному неудачнику. Этого неудачника звали Google

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

Мы не собираемся возвращаться в 1993 год и рассказывать вам историю появления всемирной компьютерной сети, также известной как Web 1.0. Это дела давно минувших дней, спасибо Тиму Бернерс-Ли. Мы будем говорить о наших днях, чтобы выяснить, за счёт чего работают современные браузеры и почему так велика разница между ними. Также важно ответить на вопрос «почему»? Что так кардинально поменялось за эти 27 лет, отчего устройство современных браузеров стало таким сложным? Отметим для начала, что один только обзор основных высокоуровневых функций веб-браузера раскрывает его сложную структуру. Их частью является структура коммутации сети, необходимая для получения всех протоколов HTTP и связанных с ним протоколов, прежде чем ваш браузер отобразит что-либо.

Лидерство на ПК всегда принадлежало одному браузеру

Тут нужно отметить, что Всемирная паутина представляет собой набор ненадёжных, нагромождённых друг на друга стандартов, распространяемых посредством сети на международном уровне. Любое вмешательство корпорации или государства может привести к нарушению её работы. Взять хотя бы DDoS-aтаки или тот факт, что отдельные страны перенаправляют трафик, нарушая тем самым протокол граничного шлюза. Это означает, что если владельцы известного браузера решат подорвать открытые стандарты, то они вполне могут сделать это – и, можно сказать наверняка, делали это.

Внутри браузера

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

Сеть. Работа браузеров сильно завязана на сети. И хотя HTTP(S) – основа всего, существует также протокол FTP, предназначенный для передачи файлов, SMTP – для пересылки электронной почты и DNS – для получения информации об электронном адресе и запроса страниц с веб-сервера, не говоря уж о TCP/IP-соединениях и передаче пакетов.

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

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

Хранилище данных. Хотя браузеры начинались с куки, для локальных приложений современные обозреватели чаще используют локальные хранилища. Веб-хранилище предоставляет базовые локальные переменные, в то время как Web SQL предлагает настоящую локальную базу данных. Индексная база данных API является компромиссным решением между двумя вариантами.

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

Механизм визуализации. Ключевой компонент любого современного браузера. Большая часть статьи будет посвящена изучению механизма его работы, для чего нам понадобится ещё одна блок-диаграмма (см. изображение ниже). Фактически здесь всего два парсера: один отвечает за обработку кода HTML и объектных моделей документов (DOM), другой—за анализ данных в каскадной таблице стилей. На основе этого создаётся дерево рендера.

Всё то же самое, но другое

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

Получение доступа к сетевому стеку протоколов TCP/IP и запрос/отправка HTTP – рутинная работа, выполняемая библиотекой стандартных программ. Мастерство разработки интерфейса лучше оставить для отдельного критического обзора или группового теста. И хотя в статье будет упомянуто хранилище данных, мы не будем вдаваться в его глубокий анализ.
А посему из всего списка остаются лишь два компонента, которые задают уровень производительности и соответствия стандартам: движок JavaScript и механизм визуализации.

Мы остановимся на механизме визуализации, потому что он большой и имеет сложную структуру. Но сначала ответим на вопрос: почему столько шума из-за простого кода HTML? Как было упомянуто ранее, интернет и онлайн-приложения строятся на стандартах; в случае HTML это Консорциум Всемирной паутины, известный также под именем W3C, руководящие принципы которого определяют, что должен делать каждый тег HTML.
Проблема заключается в том, что из-за большого количества обстоятельств эти руководящие принципы и правила можно интерпретировать по-разному, и то, что будет допустимо для одного браузера, для другого таковым являться не будет. К тому же глупые людишки придумали ещё один набор тегов.

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

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

Составляющие браузеров

Подноготная механизма визуализации

Сетевой движок выполняет свою работу, извлекает содержимое веб-страницы и адресует его механизму визуализации. На этом этапе есть два варианта обработки содержимого. Мы посмотрим, как движки WebKit и Blink справляются с этим процессом, но знайте, что у Gecko, на котором построен Firefox (и его производные) иной порядок обработки.

Все вышеупомянутые движки, однако, делят всё содержимое веб-сайта на HTML и CSS данные. И те и другие данные обрабатываются отдельно своим собственным парсером. А что потом? В общих чертах парсер принимает этот входящий двоичный поток и переводит данные в дерево узлов; структуру такого дерева определяет синтаксис (правила) языка (HTML или CSS).

Если вам знакомы теги HTML, то имеет смысл сказать, что парсинг включает в себя две составляющие:

лексический анализатор. Делит входящие данные на известные токены (теги) в соответствии с существующими правилами;

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

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

Edge мёртв. Да здравствует Edge (построен на движке Blink).

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

В итоге обработанный парсером код HTML становится объектной моделью документа, так называемой моделью DOM. Отдельно от HTML также анализируются элементы CSS (каскадные таблицы стилей) и на основе этого создаётся объектная модель CSS. В отличие от HTML грамматика CSS не имеет контекстуальных ограничений, отчего глупым людишкам становится трудно сломать её. Синтаксический анализатор должен обработать каскадные таблицы стилей, чтобы определить стиль каждого элемента.

Однако WebKit и Gecko используют спекулятивный парсинг, чтобы заранее считывать и загружать любые сетевые ресурсы, например, скрипты, изображения и CSS, облегчая тем самым загрузку страницы. Это хорошее решение, поскольку сценарии, которые запрашивают нагружающие сеть таблицы стилей, вызывают проблемы, если к ним (к таблицам стилей) нельзя получить доступ

Дерево рендера

И тут начинается самое интересное. Из модели DOM мы знаем, где должны располагаться объекты на странице, созданной из кода HTML. Из объектной модели CSS мы знаем также, как элементы должны быть оформлены стилями. Каждый визуализируемый объект – это, по сути, прямоугольная область, имеющая определённый размер, позицию и стиль. Большинство объектов построено из множества отрисованных прямоугольников; важно помнить, что дерево рендера построено из узла DOM.

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

Теперь можно начать вёрстку страницы. Она подразумевает вычислительный процесс, в ходе которого те самые прямоугольники совмещаются с назначенным стилем. HTML уже сконструирован, и потому вёрстку можно сделать в один заход. Переверстать страницу можно полностью (например, при кардинальной смене стиля или размера окна) или же её отдельные «дочерние» объекты. В заключение отметим, что дерево рендера можно нарисовать и обработать элементами пользовательского интерфейса браузера, поскольку последний зависим от ОС.

Наращивание возможностей

Раннее мы упоминали о том, что во всех современных браузерах имеется движок JavaScript с JIT-компилятором. Динамический компилятор нужен для максимального увеличения скорости работы программ. Все браузеры используют свой движок JavaScript, и именно благодаря ему вы можете «программировать паутину» и создавать комплексные интерактивные онлайн-приложения. И так как JavaScript морально устарел (он появился ещё 1990-х, и в то время ещё никто не знал его прямого предназначения), встречайте – Web Assembly (Wasm).

Этот бинарный формат стартовал в 2015-м, а к 2017-му поддерживался почти во всех браузерах и стал стандартизированным концу 2019-го. Он поддерживает низкоуровневый кроссплатформенный язык и нативно запускается на самом устройстве через браузер. Wasm может компилировать C/C++ и Rust и запускается в той же «песочнице», что и JavaScript, и потому может быть использован его библиотеками для безграничного ускорения.

В итоге мы имеем совместимую с HTML5 веб-страницу со всеми моргалками и дуделками от Web 2.0 на любой вкус и цвет. IT-корпорации (Google, Apple, Microsoft), видимо, остановили свой выбор на браузерах с движками WebKit/Blink, которые имеют хорошую совместимость и кучу производных. Искренне надеемся, что Mozilla отстоит независимость Firefox, но сейчас она действует в невыгодных для себя условиях. Похоже, браузерные войны возвращаются.

Источник