Что такое браузер и как он работает
Браузер — что это такое для чайников, для чего он нужен
Как работает браузер?
Самые популярные браузеры на сегодняшний день — это Google Chrome, Opera, Firefox, Safari, Яндекс, Internet Explorer. Согласно исследованию HotLog, самым используемым в октября 2020 года стал Chrome — 64.10% пользователей выбрали именно этот браузер. С большим отрывом далее следуют Safari (14.91%) и Яндекс (12.79%). Взгляните на график ниже.
Chrome и Firefox относятся к браузерам с открытым исходным кодом. Это значит, что код находится в публичном доступе, например, на github.com, и каждый желающий может его посмотреть и принять участие в разработке. К преимуществам таких браузеров относится открытость, независимость от больших компаний и скорость разработки. Однако, последнее может оказаться и недостатком, поскольку все зависит от команды разработчиков. В таком случае, открытый код программы становится менее стабильным.
Независимо от вида браузера, механизм работы у всех одинаковый. Ниже мы пошагово описали, как работают браузеры.
Теперь, когда мы разобрались с механизмом работы браузера, рассмотрим его функции.
История появления браузеров и краткий обзор современных продуктов
Первый веб-обозреватель увидел свет в 1990 году и получил название WorldWideWeb (позднее переименован в Nexus). Автором проекта выступил известный лондонский изобретатель Сэр Тимоти Джон Бернерс-Ли, чей вклад в развитие информационных технологий сложно переоценить. Основой для первого в мире браузера послужила платформа NeXTSTEP, используемая также при разработке Mac OS X.
Однако из-за того, что программный код обозревателя долгое время (до 1993 г) оставался закрытым, первым браузером, выпущенным для широких масс, принято считать NCSA Mosaic. Именно он послужил основой для Netscape Navigator и Internet Explorer, именно с него и началась легендарная «война браузеров».
В отличие от Netscape, Microsoft практически изначально распространяла свой продукт бесплатно, что позволило ей к 1999 году монополизировать рынок, заняв более 95% его объема. Для пользователей это обернулось тем, что многие сайты и веб-документы были оптимизированы под один конкретный браузер (IE) и не открывались в других. Сам разработчик, почувствовав преимущество, перестал уделять должное внимание развитию своего продукта. Этим и воспользовалась Netscape. Уходя с рынка, она выпустила исходный код своего веб-обозревателя под лицензией MLP, тем самым нанеся Microsoft «удар в спину» и положив начало многим современным проектам, в числе которых:
Возможности браузера
Просмотр разных страниц в сети называется веб-серфингом. Для этого используется специальная программа – браузер. Изначально она предназначалась для отображения файлов, создаваемых при помощи языка разметки HTML, но со временем веб-обозреватели «научились» воспроизводить все известные типы файлов: звуковые, видео, анимационные.
К самым популярным браузерам, по данным сервиса StatCounter на декабрь 2020 года, относятся Google Chrome, Safari, Firefox, Samsung Internet, Microsoft Edge. Тенденция сохраняется несколько лет, меняется лишь процентное соотношение пользователей, выбирающих тот или иной вариант. Так, иногда в рейтингах «мелькают» браузеры Opera и Яндекс.Браузер.
Функции браузера
Развитие веб-обозревателей в основном связано с высокой конкуренцией. На системах Windows 95 и 98, которые активно использовались в конце XX века, стандартом де-факто был браузер Microsoft Internet Explorer. Но и тогда уже были попытки заменить его на аналог, более функциональный, без характерных недостатков вроде медленной работы и зависаний при открытии больших файлов.
Сегодня браузеры выполняют функции:
Большинство современных программ имеют встроенные функции защиты от вредоносного ПО. Они способны блокировать скачивание подозрительных файлов и открытие фишинговых страниц. Также проверяется сохранность паролей, выдается предупреждение, если появились риски утечки данных, чтобы владелец компьютера своевременно предпринял меры.
Как выбрать браузер
Многие пользователи работают с тем браузером, который был предустановлен вместе с системой, хоть на настольном ПК или ноутбуке, хоть на смартфоне/планшете. Это отчасти объясняет высокую популярность Google Chrome и Safari. Они ставятся «по умолчанию» на мобильных устройствах с Android и iOS соответственно.
Но рано или поздно появляется желание подобрать более удобный инструмент для веб-серфинга. В этом случае наиболее критичными считаются следующие факторы:
Также важна возможность расширения функционала. Опять-таки из-за высокой конкуренции все популярные браузеры поддерживают подключение дополнительных модулей. За счет них владелец компьютера или смартфона активирует/деактивирует различные функции, например блокировку рекламных сообщений.
Расширения (плагины)
Расширить функционал браузера легко – достаточно найти в поиске нужный плагин, установить его и активировать. Второй вариант заключается в ручном выборе модуля в специальном каталоге типа интернет-магазина Chrome. В нем на каждое размещенное расширение имеется описание, отзывы пользователей и определенный набор фильтров для упрощения поиска.
Существуют негласные перечни «стандартных» расширений вроде ABP (блокировщика рекламы) и поиска Яндекса (для включения соответствующего поисковика «по умолчанию», если пользователя не устраивает Google или иные варианты, предлагаемые браузером). Также собственные модули ставят антивирусные программы, криптографические ключи и т.д.
Браузеры для анонимного выхода в сеть
Ранее перечисленные популярные браузеры обычно собирают статистику по посещаемым сайтам и вводимым данным в строку поиска, предлагают сохранять пароли во внутренней базе. Только такое «поведение» программы не всегда устраивает пользователя. Например, если хочется зайти на веб-ресурс в режиме инкогнито. С этой целью используются специальные версии браузеров.
Популярные анонимные браузеры:
Под анонимностью понимается не только отсутствие на компьютере файлов, оставшихся после посещения сайтов. В ряде случаев важно исключить возможность отслеживания IP-адреса или даже открывать сайты, заблокированные провайдером, с помощью VPN. Иногда под различные санкции попадают вполне легитимные веб-ресурсы.
Как пользоваться браузером
Все браузеры, хоть интегрированные в систему, хоть установленные дополнительно, имеют почти идентичное управление. Например, в них работают все горячие клавиши, используемые в Windows или macOS. Это упрощает освоение даже изначально незнакомой программы. Тем более основные приложения выпускаются с мультиязычным интерфейсом и возможностью включить русский язык.
Самые популярные браузеры
В этом разделе мы познакомим вас с 6 самыми популярными браузерами. Расскажем об их преимуществах и недостатках, чтобы вы могли выбрать самый подходящий для себя.
Как скачать
Чтобы загрузить другой браузер, придется воспользоваться тем, который встроен в систему. Откройте и запустите его, перейдите на поисковик и наберите название программы, которую хотите скачать. После выдачи результата перейдите на страницу и загрузите программу.
Скачивайте программы только с официальных сайтов, проверяйте, по какой ссылке переходите. Яндекс и Гугл ставят свои приложения на верхние строчки.
После загрузки останется запустить файл и дождаться окончания установки. Сейчас все установочные данные загружаются из интернета, сам файл представляет собой только лаунчер. В процессе установки не обойтись без подключения к глобальной сети. Есть те установщики, которым не требуется инет. Их ищите отдельно, они тяжелые, весят не меньше сотни мегабайт.
Как найти и открыть
Чтобы попасть в интернет, сначала нужно узнать, где находится браузер в компьютере. Для Винды ситуация простая. Стандартный обозреватель располагается на рабочем столе, либо в панели задач, рядом с меню Пуск.
Если его нет ни там, ни там, откройте меню Пуск. Перейдите к разделу «все программы». Здесь доступны все установленные приложения. Здесь же можно найти браузеры.
Обозреватели в меню «Пуск».
Чтобы открыть браузер, щелкните по нему в Пуске или панели задач один раз. Чтобы запустить обозреватель с рабочего стола, кликните по нему левой кнопкой мыши дважды. После этого программа запустится, и вы сможете перейти к поиску информации.
Виды программ
Internet Explorer не всем нравится. Не все его любят, поэтому скачивают из интернета другие браузеры, более быстрые, надежные. Когда их закачано в ПК несколько, надо указать, какой запускать по умолчанию при открытии html документа.
Как видно из предыдущего раздела, браузеры:
Отечественный Яндекс.Браузер распространен в основном в Рунете, используется для ОС Windows, Android, iOS. Установить его можно, как обычную программу.
Где находится?
При установке ОС Windows ярлык для запуска IE встает на рабочий стол. А файлы с таким же именем хранятся в папке Program Files. Запустить прогу можно из главного меню или с панели быстрого доступа. 
Как всякая программа при инсталляции он спросит, в какую папку сохранить. Обычно сохраняют на диск C в папку Program Files. Папку называют тем же именем, что браузер, а ярлык выводят на рабочий стол.
Теперь вы знаете, где находится браузер.
Настройки в компьютере
Пользователям важно знать где найти настройки браузера в компьютере. Часто происходят какие-то сбои или программа начинает вести себя неадекватно, так что в настройки придется заходить часто. Да и для себя программу лучше настроить сразу, а не пользоваться тем, что дали. Благо, спектр опций и параметров довольно широк, так что можно многое изменить.
Каждый браузер на компьютере ведет себя по-своему. Доступ к настройкам тоже отличается. Даже у программ, которые работают на одном движке, вроде Яндекса и Хрома, есть небольшая разница в настройках. Особых проблем в поиске меню возникать не должно, ведь оно всегда находится в одном клике от основного окна программы. Опишем несколько самых популярных обозревателей и способ попасть в их настройки.
Google Chrome
Сегодня «Хром» ежедневно использует свыше 300 млн. пользователей, что автоматически делает его самым популярным браузером в мире. Выпускаемый на основе Chromium и Blink, он подходит как рядовому, так и продвинутому пользователю ПК. К числу сильных сторон браузера относятся:
Из минусов проекта пользователи выделяют большое число вариантов сбора информации о веб-серфинге клиента и искусственно ограниченный выбор параметров при установке. Также не устраивает их тот факт, что текущая версия браузера может быть установлена на мобильное устройство лишь при наличии у последнего доступа к интернету. Автономные загрузчики у Chrome имеются, однако на главной странице проекта не представлены.
Mozilla Firefox
Этот браузер работает на движке Gecko (который с версии 57.0 постепенно заменяется на движок нового поколения Quantum) и по популярности занимает второе в мире место среди свободно распространяющегося ПО. Официально выпускается для Windows, Android, macOS, и GNU. В дистрибутивах Linux входит в число предустановленных файлов. Разработкой веб-обозревателя занимается корпорация Mozilla, которая изначально назвала свой проект Phoenix, однако затем (из-за конфликтов товарных знаков) вынуждена была переименовать его сначала в Firebird, а затем и в Firefox.
Хотя одно время проект позиционировался, как наследие Netscape, это не совсем верно. После поражения компании в «войне браузеров» код его был написан с нуля. Это позволило разработчикам сделать продукт более гибким и отзывчивым к потребностям пользователей, а также наделить функционалом, недоступным для других веб-обозревателей.
К преимуществам Firefox причисляют:
Из недостатков пользователи выделяют тесное сотрудничество Firefox с корпорациями Google и Adobe. Для них «живой» поиск Google в адресной строке и поддержка DRM-плагинов выглядит, как навязывание услуг, что для открытого ПО недопустимо.
Opera
Opera – один из немногих браузеров, которые портированы под множество операционных систем. Он совместим с различными сборками Windows, OS X, Linux, а также с мобильными операционными системами: Android, Windows Mobile, iOS, Symbian OS и MeeGo. Одна из сильнейших сторон Opera — работа с JavaScript. Ее скорость загрузки примерно в 2 раза превышает аналогичные показатели у других браузеров.
Особое внимание разработчики уделяют безопасности в сети. Так, для шифрования при посещении пользователем защищенных страниц используются протоколы SSL 3 и TLS, известные своей высокой надежностью. База сохраненных паролей шифруется при помощи алгоритма 3DES, отрезая к ним доступ тому, кто не имеет ключа шифрования. Также в последних релизах были представлены механизмы для борьбы со скрытым майнингом, что на фоне возрастающего интереса к криптовалютам особенно актуально.
Среди недостатков «Оперы» пользователи выделяют:
Помимо устанавливаемого на устройство браузера «Опера» предлагает своим клиентам так называемую Opera@USB – программу, которая работает непосредственно со сменного носителя. Фактически это позволяет вам иметь под рукой все ваши настройки, закладки, логи чатов и прочие данные, где бы вы ни находились.
Анонимные браузеры
Какие бывают браузеры для анонимного серфинга в интернете? Их существует немало, но самыми популярными являются:
Список и обзор программ для телефона
Теперь рассмотрим несколько браузеров, которые можно установить на телефон. Самыми лучшими считаются:
Также на телефон можно установить Файерфокс и Гугл Хром. Многие известные компании, вместе с поисковыми системами, разрабатывают браузеры для смартфонов и компьютеров. Пользователю остается только выбрать для себя наилучший вариант и пользоваться приложением в свое удовольствие.
Важные аспекты работы браузера для разработчиков. Часть 1
Автор: Антон Реймер
Статья основана на вебинаре, который я проводил некоторое время назад. Рассчитана она, в первую очередь на тех, кто не знает, как работают браузеры, или тех, у кого есть пробелы в знаниях. Вероятно, здесь будет много очевидного для тех кто не первый день в веб-разработке. Статью я решил разделить на две части. В первой рассмотрим общие принципы работы браузера. Во второй части я акцентирую внимание на некоторых важных моментах: 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-дерева (далее будет пример, где это будет представлено нагляднее), но имеет некоторые отличия:
Дерево отображения служит для того, чтобы браузер понимал, что выводить на экран. Оно содержит информацию о том, из каких блоков состоит страница. Дальше в тексте для простоты я буду называть составные части дерева отображения прямоугольниками, чтобы не путать с 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.
Пример
Здесь у нас есть теги:
Пример
, есть только
Текст в дереве отображения разделился на две строки и представляет собой два элемента: line 1 и line2. Как я писал выше, узлы дерева отображения мы будем называть прямоугольниками. Для наглядности я так и отобразил их на иллюстрации.
Пример
Каждый прямоугольник имеет своего «родителя», кроме корневого элемента root.
Модуль отображения также занимается обработкой скриптов.
Порядок обработки скриптов и таблиц стилей
Важно понимать порядок, в котором происходит обработка скриптов. Рассмотрим следующий пример, где я попытался продемонстрировать все возможные способы подключения скриптов и стилей.
Скрипт 1. Первое, что нужно знать про скрипты, — когда при парсинге html анализатор встречает скрипт, он останавливает дальнейший парсинг документа. Т. е., как только анализатор дошел до скрипта 1, браузеру ничего неизвестно о том, что будет дальше. И пока скрипт 1 не выполнится, дальнейший анализ документа происходить не будет.
Но при этом браузер продолжает выполнять ориентировочный синтаксический анализ. Что это значит? Браузер все равно смотрит, что следует за скриптом. Если находятся ссылки на внешние ресурсы, которые нужно скачать и загрузить, он подгрузит эти данные, пока выполняется скрипт 1. Сделано это для оптимизации.
В случае с defer скрипт 4 всегда выполняется после скрипта 1. С атрибутом async неизвестно, когда он будет выполнен и какая часть документа уже будет проанализирована к этому моменту.
Стили, в отличие от скриптов, никак не могут повлиять на документ. Если скрипты могут добавить дополнительные узлы или теги, то стили этого сделать не могут. Поэтому никакой надобности для браузера блокировать дальнейший анализ документа нет.
При этом есть небольшой нюанс. Например, скрипт 1 может работать с теми или иными стилям, и может потребоваться доступ к ним. Т.е. если мы хотим поменять (или узнать) какие-то стили, но при выполнении скрипта 1 они ещё не подгружены — может случиться ошибка.
Браузеры стараются этот нюанс учесть. Firefox, например, если находит какие-то не подгруженные стили в процессе ориентировочного синтаксического анализа, блокирует выполнение скрипта, подгружает стили, после чего завершает выполнение скрипта. Chrome действует аналогичным образом, но чуть более оптимизировано. Он останавливает скрипт, только если понимает, что в этом скрипте происходит работа с не подгруженными стилями.
Компоновка окон
Окно = Прямоугольник = Узел дерева отображения
Компоновка окон — это этап компоновки дерева отображения. Я думаю многим верстальщикам знакома эта схема, она называется “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 и попытаемся понять как грамотная работа с ними может повысить скорость работы приложения.