На чем написаны браузеры

Обновлено: 05.07.2024



Автор: Антон Реймер

Статья основана на вебинаре, который я проводил некоторое время назад. Рассчитана она, в первую очередь на тех, кто не знает, как работают браузеры, или тех, у кого есть пробелы в знаниях. Вероятно, здесь будет много очевидного для тех кто не первый день в веб-разработке. Статью я решил разделить на две части. В первой рассмотрим общие принципы работы браузера. Во второй части я акцентирую внимание на некоторых важных моментах: reflow и repaint, event loop.

Что такое браузер?

Браузер — программа, работающая в операционной системе. Большинство браузеров написано на языке C++. Основное предназначение браузера — воспроизводить контент с веб-ресурсов. В качестве веб-ресурса в большинстве случаев выступает html-страница. Это также может быть pdf-файл, png, jpeg, xml-файлы и другие типы. Среди огромного количества браузеров можно выделить самые популярные: Chrome, Safari, Firefox, Opera и Internet Explorer. Мы рассмотрим браузеры с открытым исходным кодом: Chrome, Firefox, Safari.

Из чего состоит и как работает браузер?


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

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

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

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

Когда мы говорим о браузерных движках, таких как Webkit или Gecko (первый находится «под капотом» у Safari и до 2013 года был у Chrome, второй у Firefox), в первую очередь имеем в виду модуль отображения. Далее мы подробно рассмотрим модуль отображения и более детально разберем, как он работает.

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

Модуль JS Interpreter отвечает за интерпретацию скрипта, и его выполнение. Существует несколько JS-движков. Самые известные это V8 и JavaScriptCore. Важно не путать движок браузера и JS-движок, который работает в модуле JS Interpreter.

Следующий модуль — исполнительная часть пользовательского интерфейса (UI backend). Она отвечает за отрисовку всего на экране и работу пользовательского интерфейса.

Последний модуль — хранилище данных. Браузеру нужно где-то хранить данные, обычно для этого используется оперативная память. Какие данные нужно хранить? Например, кэш, собственные настройки. Также к хранилищу данных можно отнести indexedDB, который появился в стандарте html5 — собственные базы данных браузера.

Модуль отображения


Модуль отображения получает данные от сетевого модуля. Данные поступают пакетами по 8 Кб. Что важно — модуль отображения не ждет, пока придут все данные, он начинает обрабатывать и выводить их на экран по мере поступления. В случае с html-страницами, он начинает их анализировать, происходит парсинг html (это отдельная большая тема, я на ней останавливаться не буду). Главное, что нужно понимать: в результате парсинга у нас появляется DOM-дерево. Также по окончании парсинга срабатывает событие load, которое можно обрабатывать в скрипте. Это значит, что документ готов и скрипт может с ним работать.

DOM-дерево — document object model. По большому счету, «интерфейс», который предоставляет браузер JS-движку для работы с тем или иным html-документом. На основе DOM-дерева происходит конструирование дерева отображения (render tree). Дерево отображения — тоже важная часть модуля отображения. По большому счету, два этих дерева — DOM-дерево и дерево отображения — наиболее важные элементы для разработчика. Дерево отображения во многом повторяет структуру DOM-дерева (далее будет пример, где это будет представлено нагляднее), но имеет некоторые отличия:

  1. Дерево отображения не содержит скрытых элементов. Если у нас есть html-элемент, у которого прописан display:none , в дереве отображения он присутствовать не будет. При этом, если visibility:hidden , то в дереве отображения он будет. Некоторые DOM-узлы, которые в DOM-дереве представлены как единый узел, в дереве отображения могут быть представлены в виде нескольких. Яркий пример — составной тэг select. Если в DOM-дереве это один узел, в дереве отображение он преобразовывается в минимум три узла. Первый узел отвечает за отображение выбранного элемента. Второй — за выпадающий список с возможными пунктами. И, наконец, третий блок отвечает за стрелочку.
  2. Текст в DOM-дереве представлен как простая node. DOM-дереву нет никакого дела до того, что там написано, сколько строк этот текст занимает. В то время, как для дерева отображения — это важно, и текст трансформируется в несколько узлов, в зависимости от того сколько строк он занимает. Это нагляднее рассмотрим чуть позже.

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

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


Предлагаю рассмотреть два браузерных движка: Webkit и Gecko.

Webkit. Модуль отображения получает html и стили. В результате парсинга html возникает DOM-дерево. В результате парсинга CSS возникает дерево правил таблиц стилей (Style Rules). Далее идет важный этап, который называется Attachment, можно перевести, как «совмещение». На этом этапе CSS-стили накладываются на DOM-дерево, в результате чего появляется Render Tree. После чего происходит компоновка дерева. Называется она здесь Layout. И в завершении происходит отрисовка (Painting).



Если посмотреть на Gecko, можно заметить, что схемы очень похожи. Главные отличия — в терминологии. Здесь тоже парсятся HTML, CSS. В результате чего создается DOM-дерево, которое здесь называется Content Model. Парсятся стили, образуется дерево стилей. Этап Attachment здесь называется Frame Constructor, но, по сути, это тоже самое. В результате совмещения образуется дерево отображения, здесь оно называется Frame Tree. Компоновка здесь называется Reflow. А отрисовка называется Painting, так же, как и в Webkit.

  • Attachment = Frame constructor = Совмещение
  • Render Tree = Frame Tree = Дерево отображения
  • Layout= Reflow = Компоновка
Пример


Здесь у нас есть теги:


Модуль отображения строит DOM-дерево. В данном случае оно будет выглядеть следующим образом. Есть корневой элемент (он всегда присутствует), называется он documentElement и соответствует тегу html . В этом дереве присутствуют все теги. И заметим, что текст представлен, как [text node] . И DOM-дереву больше ничего о тексте знать не нужно. На основе этого DOM-дерева строится Render Tree.

Пример


Дерево отображения. У него также есть корневой элемент (RenderView), но уже можно увидеть отличия между DOM-деревом и деревом отображения. Во-первых, нет тега head , т. к. он не отображается на экране. Нет <div style =” display: none”> , есть только
Текст в дереве отображения разделился на две строки и представляет собой два элемента: line 1 и line2. Как я писал выше, узлы дерева отображения мы будем называть прямоугольниками. Для наглядности я так и отобразил их на иллюстрации.

Пример


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

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

Порядок обработки скриптов и таблиц стилей

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

Скрипт 1. Первое, что нужно знать про скрипты, — когда при парсинге html анализатор встречает скрипт, он останавливает дальнейший парсинг документа. Т. е., как только анализатор дошел до скрипта 1, браузеру ничего неизвестно о том, что будет дальше. И пока скрипт 1 не выполнится, дальнейший анализ документа происходить не будет.

Но при этом браузер продолжает выполнять ориентировочный синтаксический анализ. Что это значит? Браузер все равно смотрит, что следует за скриптом. Если находятся ссылки на внешние ресурсы, которые нужно скачать и загрузить, он подгрузит эти данные, пока выполняется скрипт 1. Сделано это для оптимизации.

При этом скрипт 3 все равно не будет выполняться, пока не выполнится скрипт 1. К моменту, когда скрипт 1 уже выполнится, скрипт 3 уже может быть полностью загружен. Скрипты можно вставлять в теги head и body . Разница в том, что в скрипте 2, в отличии от скрипта 1, практически весь документ уже будет проанализирован.
У скрипта могут быть атрибуты, такие как defer и async . Они похожи, но у них есть отличия:

  • Атрибут defer сообщает браузеру, чтобы тот не ждал окончания выполнения скрипта, а продолжал парсинг html-страницы. При этом скрипт 4 выполнится только после того, как весь html-документ будет проанализирован и построено DOM-дерево.
  • Атрибут async тоже говорит браузеру, что дальнейший html-документ может быть проанализирован, пока скрипт выполняется. При этом он загружается в параллельном потоке и выполняется сразу после загрузки. Это означает, что он может быть выполнен раньше, чем скрипт1, если последний тоже имеет атрибут async. Т. е. порядок подключения в этом случае не соблюдается.

В случае с defer скрипт 4 всегда выполняется после скрипта 1. С атрибутом async неизвестно, когда он будет выполнен и какая часть документа уже будет проанализирована к этому моменту.

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

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

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

Компоновка окон


Окно = Прямоугольник = Узел дерева отображения

  • Тип окна (свойство display).
  • Схема позиционирования (свойства position и float).
  • Размеры окна.
  • Внешняя информация (размеры изображения, размер экрана).

Компоновка окон — это этап компоновки дерева отображения. Я думаю многим верстальщикам знакома эта схема, она называется “Box model”. Я не буду подробно на ней останавливаться.

При компоновке окон учитываются следующее факторы:

CSS-свойство display. Два основных типа — inline и block. Другие, такие как inline-block table и прочие, появились уже позже. Отличие в том, что display:block, указывает, что ширина прямоугольника будет вычисляться в зависимости от ширины «родителя». А display:inline указывает, что ширина прямоугольника будет вычисляться в зависимости от его содержимого. Если в элементе два слова, ширина прямоугольника будет равна ширине, необходимой для вывода этих слов. Inline-элементы выстраиваются друг за другом. А блочные элементы — друг под другом.

Следующее, что влияет на компоновку элемента, — свойства position и float. Position по умолчанию static, при этом прямоугольник идет в стандартном потоке компоновки. Также есть position:relative и position:absolute. Position:relative указывает, что прямоугольнику выделяется место в стандартном потоке компоновки. При этом позиция элемента может быть сдвинута относительно этого места: влево, вправо, вверх, вниз с помощью соответствующего свойства.

Абсолютное позиционирование, к которому относится position:absolute и position:fixed, указывает, что элемент выходит за пределы своего прямоугольника из общего потока компоновки. Остальные прямоугольники его не учитывают. Он также не учитывает соседние элементы. Координаты его вычисляются относительно корневого элемента страницы, либо относительно предка, у которого position не static. Размеры же вычисляются тоже относительно родителя. Также на позиционирование влияет свойство float. Оно указывает, что наш прямоугольник идет в стандартном потоке, но при этом занимает либо крайнюю левую, либо крайнюю правую позиции. При этом все остальные прямоугольники «обтекают» этот элемент.

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

В Firefox модуль отображения работает в одном потоке. Он един на весь браузер. В Chrome все немного иначе: модуль отображения и поток выполнения у каждой вкладки свои.

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

В следующей части мы детально рассмотрим события reflow и repaint и попытаемся понять как грамотная работа с ними может повысить скорость работы приложения.

Случилось то, что предрекали аналитики — компания Яндекс выпустила собственный браузер. Крупнейшие соперники Firefox и Chrome по умолчанию используют поиск Google и один из логичных способов конкуренции — выпуск собственного браузера со своим же поиском. Браузер получил предсказуемое название Яндекс.Браузер. Логотип программы создан в самом Яндексе и должен символизировать земной шар с буквой «Y», но пользователи уже успели окрестить его «Яндекс.Стрингами».

реклама


Яндекс.Браузер достаточно предсказуемо основан на открытом движке WebKit с оболочкой Chromium, на которой основан Google Chrome и его клоны (WebKit, в свою очередь, лежит в основе Apple Safari, а также используется в ряде других браузеров). Разработчики сообщают, что также рассматривался применяемый в Firefox движок Mozilla Gecko, но он уступал комбинации WebKit+Chromium в аккуратности кода и эффективности управления памятью.


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


В браузер интегрирован машинный перевод Яндекса, доработаны службы геолокации для лучшего взаимодействия с Яндекс.Картами и поисковыми подсказками. В будущем можно ожидать интеграции с прочими облачными сервисами Яндекса. Изначально присутствует поддержка Adobe Flash. Встроена возможность просмотра PDF-файлов, причем выбраны технологии компании Foxit, известной своим качественным продуктом Foxit Reader. Все посещаемые ссылки проверяются на наличие угроз собственной репутационной службой Яндекса Safe Browsing, а безопасность загружаемых файлов контролируется при помощи технологий Лаборатории Касперского. Весьма любопытна возможность интеграции технологии Opera Turbo, сжимающей данные для ускорения загрузки на медленных соединениях. Режим Turbo пока отсутствует, но обещан в следующей версии Яндекс.Браузера.


Расширения Chrome должны подходить к браузеру Яндекса. Как будет осуществляться синхронизация пока не совсем ясно. Как утверждают разработчики, в отличие от Chrome cбор анонимной статистики ведется только с явного разрешения пользователя. Еще одно неочевидное преимущество нового браузера — отсутствие Яндекс.Бара и модуля Яндекс.Защитник.

В данный момент поддерживаются платформы Windows и Mac OS X , разработчики изучают возможность выпуска версии для Linux. Жаль, что в первом выпуске не предусмотрели portable-варианта.

Согласно статистике аналитического сервиса StatCounter, война браузеров давно закончилась и победил в ней Google Chrome, который лидирует с огромной долей в 66.47% даже на десктопах. И на среднестатистическом ПК или ноутбуке сегодня установлен только Google Chrome, не считая Internet Explorer или Microsoft Edge, которые использовались только один раз, при установке Windows, для ввода в поисковик фразы "скачать Google Chrome".

реклама


MSI RTX 3070 сливают дешевле любой другой, это за копейки Дешевая 3070 Gigabyte Gaming - успей пока не началось

Cтабильность и надежность в работе


реклама

var firedYa28 = false; window.addEventListener('load', () => < if(navigator.userAgent.indexOf("Chrome-Lighthouse") < window.yaContextCb.push(()=>< Ya.Context.AdvManager.render(< renderTo: 'yandex_rtb_R-A-630193-28', blockId: 'R-A-630193-28' >) >) >, 3000); > > >);

Я давно являюсь приверженцем браузера Mozilla Firefox, и уже писал об опыте его использования в блогах "5 плюсов браузера Mozilla Firefox, которых нет у Google Chrome" и "Полезные секреты Mozilla Firefox: работа с сотнями вкладок, сохранение в PDF, бекапы и восстановление". Но бывало и так, что после очередного обновления Mozilla Firefox начинал глючить и "крашиться" в самые неподходящие моменты. А если ваша работа завязана на браузере, как у меня, то это совершенно неприемлемо.

Мне пришлось в качестве альтернативы на время установить Google Chrome, перенести в него закладки и пароли, и работать в нем, параллельно пытаясь починить Mozilla Firefox. Это только один из сценариев проблемы, и в наши дни, когда браузер у многих пользователей работает в течении 90% и более времени работы десктопа, иметь под рукой запасной не помешает.

Безопасность ваших логинов, паролей и других личных данных


реклама

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

Только в декабре 2020 года эксперты по безопасности компании Avast обнаружили 28 вредоносных расширений для браузеров Chrome и Edge, ворующих персональные данные или перенаправляющих пользователей на фишинговые сайты. Какое расширение может оказаться опасным - никто не знает, поэтому если вы используете расширения для скачивания музыки и прочие массовые аддоны от малоизвестных издателей, то очень рекомендуется использовать их на браузере, где не хранится ничего ценного.


реклама

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

Безопасность онлайн-банкинга


Еще более остро проблема безопасности встает при использовании онлайн-банкинга в браузере. Тут и суммы потерь могут быть велики и привлекательность этого направления для злоумышленников особенно высока.

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

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


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

Вам доступно разнообразие функций разных браузеров, VPN и многое другое


Все браузеры хороши по своему, Google Chrome - простой и распространенный, Mozilla Firefox имеет огромные возможности кастомизации и множество интересных аддонов, а вот Opera имеет бесплатный VPN и умеет быстро сохранять даже большие страницы в PDF формат с отличным качеством. Конечно, можно установить расширение для VPN и сохранения страниц в PDF, но бесплатные расширения для VPN для многих неприемлемы по причинам безопасности, а такой крупной компании, как Opera, доверия больше.

Для Mozilla Firefox и Google Chrome есть расширение FireShot, для сохранения страниц в PDF, но стабильность его последнее время оставляет желать лучшего, а качество получающихся PDF файлов в Opera намного лучше. Вот так Opera стала третьим по счету браузером, который я постоянно использую.

Минусы использования нескольких браузеров


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

Стоит учесть, что в Windows 10 сегодня уже есть вполне неплохой браузер Microsoft Edge, который вполне подходит на роль запасного. Но многие пользователи относятся к нему, как и к его предшественнику, Internet Explorer и стараются "выкорчевать" его из системы. Об одной из утилит для его блокировки, Edge Blocker v1.6, я писал в цикле блогов "10 небольших полезных и бесплатных утилит, улучшающих и упрощающих использование Windows 10".


Я настолько привык пользоваться несколькими браузерами, что уже не смогу обходиться только одним. А сколько браузеров используете вы? Пишете в комментарии.


Сегодня мы протестируем различные браузеры для актуальной операционной системы Windows 10. Тестирование проводилось на версии Windows 10 Версия 1909 Сборка 18363.836.


MSI RTX 3070 сливают дешевле любой другой, это за копейки Дешевая 3070 Gigabyte Gaming - успей пока не началось


реклама

var firedYa28 = false; window.addEventListener('load', () => < if(navigator.userAgent.indexOf("Chrome-Lighthouse") < window.yaContextCb.push(()=>< Ya.Context.AdvManager.render(< renderTo: 'yandex_rtb_R-A-630193-28', blockId: 'R-A-630193-28' >) >) >, 3000); > > >);

Первый браузер Internet Explorer версии 11.836.18362.0. Некогда легендарный и самый распространенный браузер не смог пройти ни одного теста. Поэтому получил ноль баллов во всех тестах.


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


реклама

Третий браузер Opera Neon версии 1.0.2531.0. Это новый браузер от компании Opera, экспериментальная и перспективная разработка, это взгляд на будущее браузеров. Но, очевидно, пока пользоваться им невозможно. Тест JetStream2 пройти не удалось. Тест MotionMark показал 1,08, или 2,35 общий балл. Тест speedometer показал 35,8 или 15,76 общий балл. Итого по сумме трех тестов 18,12, что является очень низким результатом.


Четвертый браузер Microsoft Edge версии 44.18362.449.0. Этот браузер должен был стать лидером среди браузеров по мнению Microsoft, заменить Internet Explorer 11, но что-то пошло не так. Безусловно он лучше и быстрее, чем IE11, но ненамного. Первый тест пройти не смог и получает 0 баллов. Во втором тесте набрал 1,08 или 2,35 в общем зачете. В третьем тесте


реклама

Пятый браузер Orbitum версии 56.0.2924.89. Первый тест пройти не смог. Во втором набрал 3,99 или 8,7 балла. В третьем тесте набрал 38,2 или 16,82. Итого общий бал 25,52. Низкий результат.


Шестой браузер Firefox версии 77.0b9. Это новейший и популярный браузер. Тем не менее он показывает средние результаты. В первом тесте он показал 65891 или 25,32 балла. Во втором тесте 1 или 2,18 балла. В третьем тесте 53 или 23,34 балла. Итого 50,84 балла. То есть браузер занимает ровно середину среди всех протестированных браузеров.


Седьмой браузер Maxthon версии 5.3.8.3100. Показал себя чуть лучше, чем Firefox. Первый тест дал 58431 или 22,45 балла. Второй – 3,15 или 6,87 балла. Третий тест показал 61,1 или 26,9 балла. Итого в сумме 56,22 балла. Средний результат.



Девятый браузер Avant версии 2020 build 3. Первый тест выдал 71309 или 27,4 балла. Второй тест выдал 1,36 или 2,96 балла. Третий тест показал очень высокий результат 72,5 или 31,92 балла, что и помогло ему так высоко подняться в общем зачете. Итоговый балл по трем тестам – 62,29.


Десятый браузер Google Chrome версии 83.0.4103.61. Один из самых популярных и самых распространенных браузеров на сегодняшний день. В своей последней версии тем не менее показывает средние результаты. Первый тест дает 76698 или 29,74 балла. Второй тест дает 3,15 или 6,87 балла. Третий тест дает 67,6 или 29,76 балла. Итоговая сумма – 66,1 балла. Могло быть и лучше.


Одиннадцатый браузер SRWare Iron версии 81.0.4200.0, основанный на движке Chromium. В первом тесте показал 76586 или 29,43 балла. Во втором тесте показал 3,43 или 7,48 балла. В третьем тесте получилось 69,7 или 30,69 балла. Итого 67,6 балла.


Двенадцатый браузер Brave версии 1.9.72. Новый перспективный браузер. Первый тест показал 83805 или 32,21 балла. Второй тест показал 5,32 или 11,6 балла. Третий тест показал 58,2 или 25,62 балла. Итого получилось 69,43 балла.


Тринадцатый браузер Beaker версии 1.0.0. Еще один новый и малоизвестный браузер. Первый тест показал умопомрачительные 86731 или 33,33 балла. Это наивысший результат в тесте JetStream2 и никакие другие браузеры даже близко не могут приблизиться к лидеру в этом тесте. Второй тест показал 3,94 или8,59 балла. Третий тест показал 63,7 или 28,05 балла. Итого 69,97 балла, главным образом за счет первого теста.


Четырнадцатый браузер Yandex версии 20.4.3.257. Российская разработка одноименной компании, которая пытается конкурировать с Google во всех возможных сервисах, и иногда успешно. Первый тест показал 74337 или 28,57 балла. Второй тест показал 6,24 или13,6 балла. Третий тест speedometer показал 75,7 или 33,33 и это высший балл в этом тесте. Итоговый балл составил 75, то есть данный браузер на 75% приблизился к идеалу, но все же есть кое-то получше.


Пятнадцатый браузер Vivaldi версии 3.0.1874.38. Новый и динамично развивающийся браузер. В первом тесте выдает 73255 или 28,15 балла. Второй тест дает 10,77 или 23,48 балла. Третий тест дает 68,7 или 30,25 балла. Итого 81,88 балла. Весьма достойный результат.


Итак, мы подошли к тройке финалистов, к троим призерам.

Бронзу получает новый и малоизвестный браузер Osiris версии 13.17.24. В первом тесте он получает 64808 или 24,91 балла. Во втором тесте он набирает 14,29 или 31,15 балла. В третьем тесте браузер получает 62,5 или 27,52 балла. Итоговый бал по трем тестам – 83,57 балла.


Серебро получает браузер OperaGX версии 68.0.3618.129. Это версия браузера Opera ориентированная на геймеров. В первом тесте он получает 72691 или 27,93 балла. Второй тест MotionMark выдает 15,29 или 33,33 балла, и это наивысший балл в данном тесте среди всех браузеров. В третьем тесте получается 53,2 или 23,42 балла. Итоговый балл составил 84,69.


И наконец победитель, золотая медаль, золотой кубок или золотые зубы, кому что ближе. Браузер Opera версии 68.0.3618.125. Старая добрая Opera стремится вернуть свои позиции самого популярного браузера и по технической части она выглядит очень хорошо. Первый тест дает 74730 или 28,72 балла. Второй тест дает 12,78 или 27,86 балла. Третий тест дает 67,8 или 29,85 балла. В сумме 86,43 балла.


Что же по итогу. Ни один из браузеров не смог набрать 100 баллов, потому что никто не смог стать лучшим в каждом тесте. В каждом тесте был свой лидер. Но по сумме всех тестов победили Osiris, OperaGX и Opera. Так что, если вы задумывались каким браузером лучше пользоваться – обратите свое внимание на этих трех кандидатов.

Читайте также: