Начальная

Windows Commander

Far
WinNavigator
Frigate
Norton Commander
WinNC
Dos Navigator
Servant Salamander
Turbo Browser

Winamp, Skins, Plugins
Необходимые Утилиты
Текстовые редакторы
Юмор

File managers and best utilites

Что такое браузер? Описание, назначение, конфигурации. Структура браузера


Что на самом деле происходит, когда пользователь вбивает в браузер адрес google.com

Эта статья является попыткой ответа на старый вопрос для собеседований: «Что же случается, когда вы печатаете в адресной строке google.com и нажимаете Enter?» Мы попробуем разобраться в этом максимально подробно, не пропуская ни одной детали.

Примечание: публикация основана на содержании репозитория What happens when...

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

Мы перенесли перевод в репозиторий GitHub и отправили Pull Request автору материала — оставляйте свои правки к тексту, и вместе мы сможем значительно улучшить его.

1. Нажата клавиша «g»

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

Большинство алгоритмов автоподстановки ранжируют рекомендации в зависимости от истории поиска и оставленных закладках. Некоторые браузеры (например, Rockmelt) даже предлагают профили друзей на Facebook. Когда пользователь планирует напечатать в адресной строке «google.com», ничего из вышеперечисленного не играет роли, но тем не менее выполнится большое количество кода, а рекомендации будут обновляться с каждой новой напечатанной буквой. Возможно, браузер предложит перейти на google.com, до того, как пользователь вобьёт адрес целиком.

2. Клавиша «enter» нажата до конца

В качестве некой нулевой точки можно выбрать момент, когда клавиша Enter на клавиатуре нажата до конца и находится в нижнем положении. В этой точке замыкается электрическая цепь этой клавиши и небольшое количество тока отправляется по электросхеме клавиатуры, которая сканирует состояние каждого переключателя клавиши и конвертирует сигнал в целочисленный код клавиши (в данном случае — 13). Затем контроллер клавиатуры конвертирует код клавиши для передачи его компьютеру. Как правило, сейчас передача происходит через USB или Bluetooth, а раньше клавиатура подключалась к компьютеру с помощью коннекторов PS/2 или ADB.

В случае USB-клавиатуры:

  • Для работы USB-контуру клавиатуры требуется 5 вольт питания, которые поступают через USB-контроллер на компьютере.
  • Сгенерированный код клавиши хранится в регистре внутренней памяти клавиатуры, который называется «конечной точкой» (endpoint).
  • USB-контроллер компьютера опрашивает эту конечную точку каждые 10 микросекунд и получает хранящийся там код клавиши.
  • Затем это значение поступает в USB SIE (Serial Interface Engine) для конвертации в один или более USB-пакетов, которые формируются по низкоуровневому протоколу USB.
  • Эти пакеты затем пересылаются с помощью различных электрических сигналов через D+ и D- контакты с максимальной скоростью 1,5 Мб/сек — поскольку HID-устройства (Human Interface Device) всегда были «низкоскоростными».
  • Этот последовательный сигнал далее декодируется в USB-контроллере компьютера и интерпретируется универсальным драйвером HID-устройства (клавиатуры). Затем значение кода клавиши передаётся на «железный» уровень абстракции операционной системы.
В случае виртуальной клавиатуры (тачскрин):
  • Когда пользователь прикладывает палец к современному ёмкостному тач-экрану, небольшое количество тока передаётся к пальцу. Это замыкает цепь через электростатическое поле проводящего слоя и создаёт падение напряжения в этой точке экрана. Экранный контроллер затем инициирует прерывание, сообщающее координату «клика».
  • Затем мобильная ОС оповещает текущее открытое приложение о событии клика в одном из GUI-элементов (в этом случае — кнопках виртуальной клавиатуры).
  • Виртуальная клавиатура вызывает программное прерывание для отправки сообщения «клавиша нажата» обратно в ОС.
  • Это прерывание оповещает текущее открытое приложение о возникновении события «нажатия клавиши».
2.1 Возникло прерывание [не для USB-клавиатур]
Клавиатура отправляет сигналы в свою «линию запросов прерываний» (IRQ), которая затем сопоставляется с «вектором прерывания» (целое число) контроллером прерываний. Процессор использует «таблицу дескрипторов прерываний» (IDT) для сопоставления векторов прерываний с функциями («обработчики прерываний») ядра. Когда появляется прерывание, процессор (CPU) обновляет IDT вектором прерывания и запускает соответствующий обработчик. Таким образом, в дело вступает ядро.
2.2 (На Windows) Сообщение WM_KEYDOWN отправлено приложению
HID передаёт событие нажатой клавиши драйверу KBDHID.sys, который конвертирует его в скан-код (scancode). В данном конкретном случае скан-код — VK_RETURN (0x0D). Драйвер KDBHID.sys связывается с драйвером KBDCLASS.sys (драйвер классов клавиатуры). Он отвечает за безопасную обработку всего ввода с клавиатуры. В дальнейшем этот драйвер вызывает Win32K.sys (после возможной передачи сообщения через установленные сторонние клавиатурные фильтры). Все это происходит в режиме ядра.

Win32K.sys определяет, какое окно активно в данный момент, с помощью функции GetForegroundWindow(). Этот API обеспечивает обработку окна адресной строки в браузере. Затем главный «насос сообщений» Windows вызывает SendMessage(hWnd, WM_KEYDOWN, VK_RETURN, lParam). lParam — это битовая маска, которая указывает на дальнейшую информацию о нажатии клавиши: счётчик повторов (в этом случае 0), актуальный скан-код (может зависеть от OEM, но VK_RETURN обычно не зависит от этого), информацию о том, были ли нажаты дополнительные клавиши (например, Alt, Shift, Ctrl — в нашем случае не были) и некоторые другие данные.

В API Windows есть функция SendMessage, которая помещает сообщение в очередь для конкретного обработчика окон (hWnd). После этого для обработки всех сообщений очереди вызывается главная функция обработки сообщений (WindowProc), присвоенная обработчику hWnd.

Окно (hWnd), активное в данный момент, представляет из себя контрол обработки и в этом случае у WindowsProc есть обработчик для сообщений WM_KEYDOWN. Этот код изучает третий параметр, который поступил в SendMessage (wParam) и, поскольку это VK_RETURN, понимает, что пользователь нажал клавишу ENTER.

2.3 (В OS X) Событие NSEVent KeyDown отправлено приложению
Сигнал прерывания активирует событие прерывания в драйвере I/O Kit клавиатуры. Драйвер переводит сигнал в код клавиатуры, который затем передаётся процессу OS X под названием WindowServer. В результате, WindowsServer передаёт событие любому подходящему (активному или «слушающему») приложению через Mach-порт, в котором событие помещается в очередь. Затем события могут быть прочитаны из этой очереди потоками с достаточными привилегиями, чтобы вызывать функцию mach_ipc_dispatch. Чаще всего это происходит и обрабатывается с помощью основного цикла NSApplication через NSEvent в NSEventype KeyDown.
2.4 (В GNU/Linux) Сервер Xorg слушает клавиатурные коды
В случае графического X server, для получения нажатия клавиши будет использован общий драйвер событий evdev. Переназначение клавиатурных кодов скан-кодам осуществляется с помощью специальных правил и карт X Server. Когда маппинг скан-кода нажатой клавиши завершён, X server посылает символ в window manager (DWM, metacity, i3), который затем отправляет его в активное окно. Графический API окна, получившего символ, печатает соответствующий символ шрифта в нужном поле.

3. Парсинг URL

Теперь у браузера есть следующая информация об URL:Protocol «HTTP» Использовать «Hyper Text Transfer Protocol»

Resource «/» Показать главную (индексную) страницу

3.1 Это URL или поисковый запрос?
Когда пользователь не вводит протокол или доменное имя, то браузер «скармливает» то, что человек напечатал, поисковой машине, установленной по умолчанию. Часто к URL добавляется специальный текст, который позволяет поисковой машине понять, что информация передана из URL-строки определённого браузера.
3.2 Список проверки HSTS
  • Браузер проверяет список «предзагруженных HSTS (HTTP Strict Transport Security)». Это список сайтов, которые требуют, чтобы к ним обращались только по HTTPS.
  • Если нужный сайт есть в этом списке, то браузер отправляет ему запрос через HTTPS вместо HTTP. В противном случае, начальный запрос посылается по HTTP. (При этом сайт может использовать политику HSTS, но не находиться в списке HSTS — в таком случае на первый запрос по HTTP будет отправлен ответ о том, что необходимо отправлять запросы по HTTPS. Однако это может сделать пользователя уязвимым к downgrade-атакам — чтобы этого избежать, в браузеры и включают список HSTS).
3.3 Конвертация не-ASCII Unicode символов в название хоста
  • Браузер проверяет имя хоста на наличие символов, отличных от a-z, A-Z, 0-9, -, или ..
  • В случае доменного имени google.com никаких проблем не будет, но если бы домен содержал не-ASCII символы, то браузер бы применил кодировку Punycode для этой части URL.

4. Определение DNS

  • Браузер проверяет наличие домена в своём кэше.
  • Если домена там нет, то браузер вызывает библиотечную функцию gethostbyname (отличается в разных ОС) для поиска нужного адреса.
  • Прежде, чем искать домен по DNS gethostbyname пытается найти нужный адрес в файле hosts (его расположение отличается в разных ОС).
  • Если домен нигде не закэширован и отсутствует в файле hosts, gethostbyname отправляет запрос к сетевому DNS-серверу. Как правило, это локальный роутер или DNS-сервер интернет-провайдера.
  • Если DNS-сервер находится в той же подсети, то ARP-запрос отправляется этому серверу.
  • Если DNS-сервер находится в другой подсети, то ARP-запрос отправляется на IP-адрес шлюза по умолчанию (default gateway).
4.1 Процесс отправки ARP-запроса
Для того, чтобы отправить широковещательный ARP-запрос необходимо отыскать целевой IP-адрес, а также знать MAC-адрес интерфейса, который будет использоваться для отправки ARP-запроса.

Кэш ARP проверяется для каждого целевого IP-адреса — если адрес есть в кэше, то библиотечная функция возвращает результат: Target IP = MAC.

Если же записи в кэше нет:

  • Проверяется таблица маршрутизации — это делается для того, чтобы узнать, есть ли искомый IP-адрес в какой-либо из подсетей локальной таблицы. Если он там, то запрос посылается с помощью интерфейса, связанного с этой подсетью. Если адрес в таблице не обнаружен, то используется интерфейс подсети шлюза по умолчанию.
  • Определяется MAC-адрес выбранного сетевого интерфейса.
  • Отправляется ARP-запрос (второй уровень стека):
ARP-запрос:

Sender MAC: interface:mac:address:hereSender IP: interface.ip.goes.hereTarget MAC: FF:FF:FF:FF:FF:FF (Broadcast)Target IP: target.ip.goes.here

В зависимости от того, какое «железо» расположено между компьютером и роутером (маршрутизатором):

Прямое соединение:

  • Если компьютер напрямую подключён к роутеру, то это устройство отправляет ARP-ответ (ARP Reply).
Между ними концентратор (Хаб):
  • Если компьютер подключён к сетевому концентратору, то этот хаб отправляет широковещательный ARP-запрос со всех своих портов. Если роутер подключён по тому же «проводу», то отправит ARP-ответ.
Между ними коммутатор (свитч):
  • Если компьютер соединён с сетевым коммутатором, то этот свитч проверит локальную CAM/MAC-таблицу, чтобы узнать, какой порт в ней имеет нужный MAC-адрес. Если нужного адреса в таблице нет, то он заново отправит широковещательный ARP-запрос по всем портам.
  • Если в таблице есть нужная запись, то свитч отправит ARP-запрос на порт с искомым MAC-адресом.
  • Если роутер «на одной линии» со свитчем, то он ответит (ARP Reply).
ARP-ответ:

Sender MAC: target:mac:address:hereSender IP: target.ip.goes.hereTarget MAC: interface:mac:address:hereTarget IP: interface.ip.goes.here

Теперь у сетевой библиотеки есть IP-адрес либо DNS-сервера либо шлюза по умолчанию, который можно использовать для разрешения доменного имени:

  • Порт 53 открывается для отправки UDP-запроса к DNS-серверу (если размер ответа слишком велик, будет использован TCP).
  • Если локальный или на стороне провайдера DNS-сервер «не знает» нужный адрес, то запрашивается рекурсивный поиск, который проходит по списку вышестоящих DNS-серверов, пока не будет найдена SOA-запись, а затем возвращается результат.

5. Открытие сокета

Когда браузер получает IP-адрес конечного сервера, то он берёт эту информацию и данные об используемом порте из URL (80 порт для HTTP, 443 для HTTPS) и осуществляет вызов функции socket системной библиотеки и запрашивает поток TCP сокета — AF_INET и SOCK_STREAM.
  • Этот запрос сначала проходит через транспортный уровень, где собирается TCP-сегмент. В заголовок добавляется порт назначения, исходный порт выбирается из динамического пула ядра (ip_local_port_range в Linux).
  • Получившийся сегмент отправляется на сетевой уровень, на котором добавляется дополнительный IP-заголовок. Также включаются IP-адрес сервера назначения и адрес текущей машины — после этого пакет сформирован.
  • Пакет передаётся на канальный уровень. Добавляется заголовок кадра, включающий MAC-адрес сетевой карты (NIC) компьютера, а также MAC-адрес шлюза (локального роутера). Как и на предыдущих этапах, если ядру ничего не известно о MAC-адресе шлюза, то для его нахождения отправляется широковещательный ARP-запрос.
На этой точке пакет готов к передаче через: В случае интернет-соединения большинства частных пользователей или небольших компаний пакет будет отправлен с компьютера, через локальную сеть, а затем через модем (MOdulator/DEModulator), который транслирует цифровые единицы и нули в аналоговый сигнал, подходящий для передачи по телефонной линии, кабелю или беспроводным телефонным соединениям. На другой стороне соединения расположен другой модем, который конвертирует аналоговый сигнал в цифровые данные и передаёт их следующему сетевому узлу, где происходит дальнейший анализ данных об отправителе и получателе.

В конечном итоге пакет доберётся до маршрутизатора, управляющего локальной подсетью. Затем он продолжит путешествовать от одного роутера к другому, пока не доберётся до сервера назначения. Каждый маршрутизатор на пути будет извлекать адрес назначения из IP-заголовка и отправлять пакет на следующий хоп. Значение поля TTL (time to live) в IP-заголовке будет каждый раз уменьшаться после прохождения каждого роутера. Если значение поля TTL достигнет нуля, пакет будет отброшен (это произойдёт также если у маршрутизатора не будет места в текущей очереди — например, из-за перегрузки сети).

Во время TCP-соединения происходит множество подобных запросов и ответов.

5.1 Жизненный цикл TCP-соединения
a. Клиент выбирает номер начальной последовательности (ISN) и отправляет пакет серверу с установленным битом SYN для открытия соединения.

b. Сервер получает пакет с битом SYN и, если готов к установлению соединения, то:

  • Выбирает собственный номер начальной последовательности;
  • Устанавливает SYN-бит, чтобы сообщить о выборе начальной последовательности;
  • Копирует ISN клиента +1 в поле ACK и добавляет ACK-флаг для обозначения подтверждения получения первого пакета.
c. Клиент подтверждает соединение путём отправки пакета:
  • Увеличивает номер своей начальной последовательности;
  • Увеличивает номер подтверждения получения;
  • Устанавливает поле ACK.
d. Данные передаются следующим образом:
  • Когда одна сторона отправляет N байтов, то увеличивает значение поля SEQ на это число.
  • Когда вторая сторона подтверждает получение этого пакета (или цепочки пакетов), она отправляет пакет ACK, в котором значение поля ACK равняется последней полученной последовательности.
e. Закрытие соединения:
  • Сторона, которая хочет закрыть соединение, отправляет пакет FIN;
  • Другая сторона подтверждает FIN (с помощью ACK) и отправляет собственный FIN-пакет;
  • Инициатор прекращения соединения подтверждает получение FIN отправкой собственного ACK.

6. TLS handshake

  • Клиентский компьютер отправляет сообщение ClientHello серверу со своей версией протокола TLS, списком поддерживаемых алгоритмов шифрования и методов компрессии данных.
  • Сервер отвечает клиенту сообщением ServerHello, содержащим версию TLS, выбранный метод шифрования, выбранные методы компрессии и публичный сертификат сервиса, подписанный центром сертификации. Сертификат содержит публичный ключ, который будет использоваться клиентом для шифрования оставшейся части процедуры «рукопожатия» (handshake), пока не будет согласован симметричный ключ.
  • Клиент подтверждает сертификат сервера с помощью своего списка центров сертификации. Если сертификат подписан центром из списка, то серверу можно доверять, и клиент генерирует строку псевдослучайных байтов и шифрует её с помощью публичного ключа сервера. Эти случайные байты могут быть использованы для определения симметричного ключа.
  • Сервер расшифровывает случайные байты с помощью своего секретного ключа и использует эти байты для генерации своей копии симметричного мастер-ключа.
  • Клиент отправляет серверу сообщение Finished, шифруя хеш передачи с помощью симметричного ключа.
  • Сервер генерирует собственный хеш, а затем расшифровывает полученный от клиента хеш, чтобы проверить, совпадёт ли он с собственным. Если совпадение обнаружено, сервер отправляет клиенту собственный ответ Finished, также зашифрованный симметричным ключом.
  • После этого TLS-сессия передаёт данные приложения (HTTP), зашифрованные с помощью подтверждённого симметричного ключа.

7. Протокол HTTP

Если используемый браузер был создан Google, то вместо отправки HTTP-запроса для получения страницы, он отправит запрос, чтобы попытаться «договориться» с сервером об «апгрейде» протокола с HTTP до SPDY («спиди»).

Если клиент использует HTTP-протокол и не поддерживает SPDY, то отправляет серверу запрос следующей формы:

GET / HTTP/1.1Host: google.comConnection: close[другие заголовки]

где [другие заголовки] — это серия пар «ключ: значение», разбитых переносом строки. (Здесь предполагается, что в использованном браузере нет никаких ошибок, нарушающих спецификацию HTTP. Также предполагается, что браузер использует HTTP/1.1, в противном случае он может не включать заголовок Host в запрос и версия, отданная в ответ на GET-запрос может быть HTTP/1.0 или HTTP/0.9).

HTTP/1.1 определяет опцию закрытия соединения («close») для отправителя — с её помощью происходит уведомление о закрытии соединения после завершения ответа. К примеру:

Connection: close Приложения HTTP/1.1, которые не поддерживают постоянные соединения, обязаны включать опцию «close» в каждое сообщение.

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

Сервер отвечает специальным кодом, который обозначает статус запроса и включает ответ следующей формы:

200 OK[заголовки ответа]

После этого посылается пустая строка, а затем оставшийся контент HTML-страницы www.google.com. Сервер может затем закрыть соединение, или, если того требуют отправленные клиентом заголовки, сохранять соединение открытым для его использования следующими запросами.

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

304 Not Modified[заголовки ответа]

и, соответственно, клиенту не посылается никакого контента, вместо этого браузер «достаёт» HTML из кэша.

После разбора HTML, браузер (и сервер) повторяет процесс загрузки для каждого ресурса (изображения, стили, скрипты, favicon.ico и так далее), на который ссылается HTML-страница, но при этом изменяется адрес каждого запроса c GET / HTTP/1.1 на GET /$(относительный URL ресурса www.google.com) HTTP/1.1.

Если HTML ссылается на ресурс, размещённый на домене, отличном от google.com, то браузер возвращается к шагам, включающим разрешение доменного имени, а затем заново проходит процесс до текущего состояния, но уже для другого домена. Заголовок Host в запросе вместо google.com будет установлен на нужное доменное имя.

7.1 Обработка HTTP-запросов на сервере
HTTPD (HTTP Daemon) является одним из инструментов обработки запросов/ответов на стороне сервера. Наиболее популярные HTTPD-серверы это Apache или Nginx для Linux и IIS для Windows.

— HTTPD (HTTP Daemon) получает запрос.

— Сервер разбирает запрос по следующим параметрам:

  • Метод HTTP-запроса (GET, POST, HEAD, PUT или DELETE). В случае URL-адреса, который пользователь напечатал в строке браузера, мы имеем дело с GET-запросом.
  • Домен. В нашем случае — google.com.
  • Запрашиваемые пути/страницы, в нашем случае — / (нет запрошенных путей, / — это путь по умолчанию).
— Сервер проверяет существование виртуального хоста, который соответствует google.com.

— Сервер проверяет, что google.com может принимать GET-запросы.

— Сервер проверяет, имеет ли клиент право использовать этот метод (на основе IP-адреса, аутентификации и прочее).

— Если на сервере установлен модуль перезаписи (mod_rewrite для Apache или URL Rewrite для IIS), то он сопоставляет запрос с одним из сконфигурированных правил. Если находится совпадающее правило, то сервер использует его, чтобы переписать запрос.

— Сервер находит контент, который соответствует запросу, в нашем случае он изучит индексный файл.

— Далее сервер разбирает («парсит») файл с помощью обработчика. Если Google работает на PHP, то сервер использует PHP для интерпретации индексного файла и направляет результат клиенту.

8. За кулисами браузера

Задача браузера заключается в том, чтобы показывать пользователю выбранные им веб-ресурсы, запрашивая их с сервера и отображая в окне просмотра. Как правило такими ресурсами являются HTML-документы, но это может быть и PDF, изображения или контент другого типа. Расположение ресурсов определяется с помощью URL.

Способ, который браузер использует для интерпретации и отображения HTML-файлов описан в спецификациях HTML и CSS. Эти документы разработаны и поддерживаются консорциумом W3C (World Wide Wib Consortium), которая занимается стандартизацией веба.

Интерфейсы браузеров сильно похожи между собой. У них есть большое количество одинаковых элементов:

  • Адресная строка, куда вставляются URL-адреса;
  • Кнопки возврата на предыдущую и следующую страницу;
  • Возможность создания закладок;
  • Кнопки обновления страницы (рефреш) и остановки загрузки текущих документов;
  • Кнопка «домой», возвращающая пользователя на домашнюю страницу.
Высокоуровневая структура браузера
Браузер включает следующие компоненты:
  • Пользовательский интерфейс: В него входит адресная строка, кнопки продвижения вперёд/назад, меню закладок и так далее. Сюда относятся все элементы, кроме окна, в котором собственно отображается веб-страница.
  • «Движок» браузера: Распределяет действия между движком рендеринга и интерфейсом пользователя.
  • «Движок» рендеринга: Отвечает за отображение запрашиваемого контента. К примеру, если запрашивается HTML, то «движок» разбирает код HTML и CSS, а затем отображает полученный контент на экране.
  • Сетевая часть: с помощью сетевых функций браузер обрабатывает вызовы, вроде HTTP-запросов, с применением различных реализаций для разных платформ.
  • Бэкенд интерфейса (UI): Используется для отрисовки базовых виджетов, вроде комбо-боксов и окон.
  • Интерпретатор JavaScript: Используется для парсинга и выполнения JavaScript-кода.
  • Хранилище данных: Браузеру может понадобиться локально хранить некоторые данные (например, cookie). Кроме того, браузеры поддерживают различные механизмы хранения, такие как localStorage, IndexedDB, WebSQL и FileSystem.

9. Парсинг HTML

Движок рендеринга начинает получать содержимое запрашиваемого документа от сетевого механизма браузера. Как правило, контент поступает кусками по 8Кб. Главной задачей HTML-парсера является разбор разметки в специальное дерево.

Получающееся на выходе дерево («parse tree») — это дерево DOM-элементов и узлов атрибутов. DOM — сокращение от Document Object Model. Это модель объектного представления HTML-документа и интерфейс для взаимодействия HTML-элементов с «внешним миром» (например, JavaScript-кодом). Корнем дерева является объект «Документ».

Алгоритм разбора
HTML-нельзя «распарсить» с помощью обычных анализаторов (нисходящих или восходящих). Тому есть несколько причин:
  • Прощающая почти что угодно природа языка;
  • Тот факт, что браузеры обладают известной толерантностью к ошибкам и поддерживают популярные ошибки в HTML.
  • Процесс парсинга может заходить в тупик. В других языках код, который требуется разобрать, не меняется в процессе анализа, в то время как в HTML с помощью динамического кода (например, скриптовые элементы, содержащие вызовы document.write()) могут добавляться дополнительные токены, в результате чего сам процесс парсинга модифицирует вывод.
Невозможность использования привычных технологий парсинга приводит к тому, что разработчики браузеров реализуют собственные механизмы разбора HTML. Алгоритм парсинга подробно описан в спецификации HTML5.

Алгоритм состоит из двух этапов: токенизации и создания дерева.

Действия после завершения парсинга
После этого браузер начинает подгружать внешние ресурсы, связанные со страницей (стили, изображения, скрипты и так далее).

На этом этапе браузер помечает документ, как интерактивный и начинает разбирать скрипты, находящиеся в «отложенном» состоянии: то есть те из них, что должны быть исполнены после парсинга. После этого статус документа устанавливается в состояние «complete» и инициируется событие загрузки («load»).

Важный момент: ошибки «Invalid Syntax» при разборе не может быть, поскольку браузеры исправляют любой «невалидный» контент и продолжают работу.

10. Интерпретация CSS

  • Во время разбора браузер парсит CSS-файлы, содержимое тегов <style> и атрибутов «style» c помощью «лексической и синтаксической грамматики CSS».
  • Каждый CSS-файл разбирается в объект StyleSheet, каждый из таких объектов содержит правила CSS с селекторами и объектами в соответствии с грамматикой CSS.
  • Парсер CSS может быть как восходящим, так и нисходящим.

11. Рендеринг страниц

  • Путём перебора DOM-узлов и вычисления для каждого узла значений CSS-стилей создаётся «Дерево рендера» (Render Tree или Frame Tree).
  • Вычисляется предпочтительная ширина каждого узла в нижней части дерева — для этого суммируются значения предпочтительной ширины дочерних узлов, а также горизонтальные поля, границы и отступы узлов.
  • Вычисляется реальная ширина каждого узла сверху-вниз (доступная ширина каждого узла выделяется его потомкам).
  • Вычисляется высота каждого узла снизу-вверх — для этого применяется перенос текста и суммируются значения полей, высоты, отступов и границ потомков.
  • Вычисляются координаты каждого узла (с использованием ранее полученной информации).
  • Если элементы плавающие или спозиционированы абсолютно или относительно, предпринимаются более сложные действия. Более подробно они описаны здесь и здесь.
  • Создаются слои для описания того, какие части страницы можно анимировать без необходимости повторного растрирования. Каждый объект (фрейма или рендера) присваивается слою.
  • Для каждого слоя на странице выделяются текстуры.
  • Объекты (рендеры/фреймы) каждого слоя перебираются и для соответствующих слоёв выполняются команды отрисовки. Растрирование может осуществляться процессором или возможна отрисовка на графическом процессоре (GPU) через D2D/SkiaGL.
  • Все вышеперечисленные шаги могут требовать повторного использования значений, сохранённых с последнего рендеринга страницы, такая инкрементальная работа требует меньше затрат.
  • Слои страницы отправляются процессу-компоновщику, где они комбинируются со слоями для другого видимого контента (интерфейс браузера, iframe-элементы, addon-панели).
  • Вычисляются финальные позиции слоёв и через Direct3D/OpenGL отдаются композитные команды. Командные буферы GPU освобождаются для асинхронного рендеринга и фрейм отправляется для отображения на экран.

12. Рендеринг GPU

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

13. Вызванное пользователем и пост-рендеринговое исполнение

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

habr.com

История и структура браузеров. Сравнение браузеров

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

Браузер (browse - просматривать, листать; интернет-обозреватель, веб-обозреватель, web-browser) - специальная программа, предназначенная для просмотра веб-сайтов. Происходит это с помощью http-запросов к серверу и получения от него данных, которые обрабатываются по специальным утвержденным стандартам и таким образом формируется веб-страница. Браузер является проводником между всемирной сетью Интернет и пользователем и позволяет получить доступ ко всем информационным ресурсам сети. То, каким образом браузер обрабатывает и отображает HTML-файлы, определено спецификациями HTML и CSS. Они разрабатываются Консорциумом W3C (World Wide Web Consortium), который внедряет стандарты для Интернета. Многие годы браузеры отвечали лишь части спецификаций, и для них создавались отдельные расширения. Для веб-разработчиков это означало серьезные проблемы с совместимостью. Сегодня большинство браузеров в большей или меньшей степени отвечает всем спецификациям.

История появления браузеров

1990 - WWW/Nexus (Тим Бернерс-Ли). Работая в конце 80-х годов XX века в Европейской лаборатории физики элементарных частиц в Женеве (CERN), Тим Бернерс-Ли разработал "гипертекстовую систему" распределённого доступа к сетевой информации. Получившаяся технология, впоследствии названная World Wide Web, представляла собой единое информационное пространство, содержащее страницы гипертекста, ссылающиеся друг на друга и адресуемые по универсальному идентификатору ресурса (URL). Позже Бернес-Ли создал язык разметки HTML и протокол передачи гипертекста HTTP, что повлекло за собой разработку удобного инструмента для работы с документами в новом HTML-формате. Так появился первый браузер, который назывался WorldWideWeb. Однако потом во избежание путаницы он был переименован в Nexus. Самый первый браузер был текстовым, способным отображать только буквы и цифры.  

1992 - Viola (Тим Бернерс-Ли). Первый браузер, обладающий графическим интерфейсом и способный отображать картинки, размещённые на веб-страницах, по сути, расширенный вариант WWW/Nexus. Этот браузер стал первым интернет-приложением, поддерживающим встроенные в веб-страницы интерактивные объекты, а также таблицы, формы и таблицы стилей. В 1992 году в Женеве состоялся музыкальный фестиваль CERN Hardronic Festival. После его окончания Бернерс-Ли решил разместить несколько фотографий шоу в информационной сети, созданием которой занимался. Таким образом, эти фотографии оказались первыми в мире изображениями, выложенными в Интернете.

1992 - NCSA Mosaic (Марк Андреесен, Эрик Бина). Первый современный кроссплатформенный браузер. Но, несмотря на то, что Mosaic является пионером в области обозревателей, его развитие было прекращено в 1997 году из за потери рынка. Mosaic разработан в Национальном центре суперкомпьютерных приложений (NSCA), в Иллинойском университете.

1994 - Netscape Navigator (Марк Андреесен, Джим Кларк). Два друга Марк Андреесен и Джим Кларк усмотрели золотую жилку в Mosaic и решили создать совместную компанию Mosaic Communications Corporation. Однако NSCA начал предъявлять претензии, так как авторские права на Mosaic всё ещё принадлежали ему. Из-за этого компанию пришлось переименовать в Netscape Communications Corporation, а уже существовавшие наработки с Mosaic Netscape в Netscape Navigator. 

1995 - Internet Explorer (Томас Риардон). Компания Microsoft воспользовалась тем, что первый графический обозреватель Mosaic имел открытый исходный код, и быстро создала свой браузер - Interner Explorer, который был включен в обязательное обновление для операционной системы Windows 95. Каждый пользователь был практически лишен права выбора, в том числе и из за своей неграмотности в этом вопросе. В этом, ксати, и весь секрет ошеломляющего успеха IE - монополия. 

1995 - Opera (Гейр Иварсёй, Йон Стефенсон фон Течнер). Прототипом будущего браузера стала разработка компании Televerket - крупнейшей телекоммуникационной компании Норвегии. В 1995 году проект вылился в разработку специально созданной компании Opera Software. Преемник Opera - браузе Vivaldi.

2003 - Safari (Дон Мелтон). В 2003 году компания Apple заняла более жёсткую позицию по отношению к Microsoft и решила не продлевать свой контракт на использование микрософтовского браузера Internet Explorer для Mac OS X и создать собственный браузер с закладками и иконками.

2004 - Mozilla Firefox (Блейк Росс, Дейв Ха́йат). Проект Firefox был разработан в качестве экспериментальной ветки от проекта Mozilla Suite. 

2008 - Google Chrome (Брайан Раковски). На протяжении шести лет главный исполнительный директор Google Эрик Шмидт не поддерживал идею о создании отдельного браузера. Он указывал на то, что "Google является небольшой компанией", и что он не хотел участвовать в "болезненных войнах браузеров". После того как основатели компании Сергей Брин и Ларри Пейдж наняли нескольких разработчиков Mozilla Firefox и создали демонстрацию Chrome, Шмидт сказал: "она была настолько хорошей, что заставила меня изменить свое мнение".

2012 - Yandex.Browser (?). Выход браузера от Яндекса связывают с тем, что Яндекс постоянно оглядывался на компанию Google, усматривая в ней своего основного конкурента. Возросшая популярность браузера Google Chrome и подтолкнула Яндекс к идее создания собственного браузера с поисковой системой Яндекс, используемой по умолчанию. За основу взяли все ту же разработку гугла - браузер Chromium с открытым исходным кодом. 1 октября на ежегодной конференции "Яндекса" Yet another Conference был представлен новый браузер собственной разработки.

Структура браузеров 

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

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

Модуль отображения (движок) – отвечает за вывод запрошенного содержания на экран. Например, если запрашивается HTML-документ, модуль отображения выполняет синтаксический анализ кода HTML и CSS и выводит результат на экран.

Сетевые компоненты – предназначены для выполнения сетевых вызовов, таких как HTTP-запросы. Их интерфейс не зависит от типа платформы, для каждого из которых есть собственные реализации.

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

Интерпретатор JavaScript – используется для синтаксического анализа и выполнения кода JavaScript.

Хранилище данных – необходимо для сохраняемости процессов. Браузер сохраняет на жесткий диск данные различных типов, например файлы cookie. В новой спецификации HTML (HTML5) имеется определение термина "веб-база данных": это полноценная (хотя и облегченная) браузерная база данных.

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

Теперь рассмотрим основную схему работы модуля отображения на примере Gecko и Webkit. Модуль отображения получает содержание запрошенного документа по протоколу сетевого уровня, обычно фрагментами по 8 КБ.

Схема дальнейшей работы модуля отображения выглядит приведенным ниже образом.

Модуль отображения выполняет синтаксический анализ HTML-документа и переводит теги в узлы DOM в дереве содержания. Информация о стилях извлекается как из внешних CSS-файлов, так и из элементов style. Эта информация и инструкции по отображению в HTML-файле используются для создания еще одного дерева – дерева отображения. Оно содержит прямоугольники с визуальными атрибутами, такими как цвет и размер. Прямоугольники располагаются в том порядке, в каком они должны быть выведены на экран.

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

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

Схема работы модуля отображения WebKit
Схема работы модуля отображения Gecko

Сравнение основных браузеров

Теперь проведем тестирование браузеров. Методика довольно простая: с официальных сайтов я скачаю и установлю на компьютер самые актуальные версии браузеров, Java и Flash, подберу набор тестов и сделаю сравнительный анализ. По сути, я проведу сегодня небольшое кроссбраузерное тестирование.

Аппаратная часть: Windows 8 Профессиональная, AMD A4-3305M APU with Radeon™ HD Graphics 1.90 GHz, 8,00 ГБ, 64 разрядБраузеры: Google Chrome 45.0.2454.101 m, Mozilla Firefox 41.0.1,Opera 32.0.1948.69, Internet Explorer 10.0.9200.17228

Flash Player v.19.0.0

Java build 1.8.0_60-b27

1. Тест на производительность (Octane) 2. Тест на поддержку браузером веб-стандартов (Acid3) 3. Тест на соответствие стандарту (HTML5)

www.ladyqa.com

Как работает браузер: обмен данными с сервером

Автор: Евгений Рыжков Дата публикации: 13.10.2010

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

Первое что нужно запомнить — браузер запрашивает и получает данные посредством HTTP протокола, поэтому его (браузер) еще называют HTTP клиентом.

Протокол передачи Гипертекста (HTTP — англ. HyperText Transfer Protocol) — специально разработанный протокол как основа World Wide Web и используется для передачи всех необходимых данных: HTML кода, изображений, CSS файлов, javascript и т.д. Остановимся только на моментах интересных фронт разработчику (с тонкостями HTTP все желающие могут познакомится в спецификации).

HTTP — синхронный протокол

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

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

HTTP синхронный протокол

На что тратит время HTTP запрос

Запрос происходит в несколько этапов:

  • DNS-запрос — поиск ближайшего DNS-сервера, чтобы преобразовать URI (например, google.com) в его числовое представление — IP-адрес (74.125.87.99, прим. — получено посредством команды ping). Это адрес и будет реальным адресом сайта в Интернет.
  • соединение — установка соединения с сервером по полученному IP-адресу;
  • отправка данных;
  • ожидание ответа — ждем пока пакеты данных дойдут до сервера, он их обработает и ответ вернется назад;
  • получение данных.

Это легко проследить если воспользоваться например, плагином для Firefox — Firebug или встроенными средствами для разработчика в Chrome.

этапы HTTP запроса

Первый этап (DNS-запрос и установка соединения) отнимает довольно много времени. В протоколах HTTP ранних версий, после того, как получен ответ на запрос, соединение разрывалось. И чтобы послать новый запрос, нужно снова тратить время на DNS-запрос и установку соединения. Это было большим ступором, который устранили в спецификации HTTP 1.1 — появился режим постоянного соединения (keep-alive): при первом запросе происходит соединение, которое не разрывается. Это был прорыв, который ощутимо разогнал Веб.

Заметка

Соединение не разрывается, если все запросы направлены на один хост. Если какой-то элемент веб страницы размещен на другом хосте, для запроса этого элемента устанавливается новое соединение, начиная с DNS-запроса.

Но смотрим на диаграмму HTTP запроса дальше: видим, что время соединения ощутимо меньше, чем время ожидания ответа. И тут уже HTTP 1.1 не спасает. Поэтому не важно, что у тебя четыре процессора, 5 Гб оперативки и навороченная видеокарта. От этого веб страницы быстрей открываться не станут, ведь большую часть времени вся эта «мощь» простаивает в ожидании пока пакеты данных пройдут туда-сюда.

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

Заметка

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

Параллельные HTTP соединения

Чтобы хоть немного ускорить работу HTTP, был разработан механизм параллельных соединений, которые устанавливает браузер для одновременной доставки нескольких объектов веб страницы. Спецификация HTTP 1.1 рекомендует не использовать одновременно не более двух соединений к одному хосту. Связано с тем, что разрабатывалась спецификация давно, тогда не было таких широкополосных каналов и мощных серверов. Современные браузеры таких соединений устанавливают минимум 4 и это число можно увеличить до 8 ручными настройками.

параллельные HTTP соединения

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

HTTP конвейер

Изначально, HTTP устанавливал соединение, отправлял один запрос и ждал на него ответ. После расширения каналов связи, стало ясно, что такой подход ведет к существенным временным задержкам. Чтобы это устранить, была разработана технология HTTP конвейера (HTTP pipelining) — когда браузер может послать несколько GET-запросов в одном соединении, не дожидаясь ответа от сервера. Сервер в таком случае должен ответить на все запросы последовательно.

HTTP конвейер

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

Конвейерная обработка может также резко сократить количество TCP/IP-пакетов. С типичным MSS (максимальный размер сегмента) в диапазоне от 536 до 1460 байт, можно упаковать несколько HTTP-запросов в один TCP/IP-пакет. Сокращение числа пакетов, необходимых для загрузки страницы — это преимущество интернета в целом, так как снижается нагрузка на маршрутизаторы и каналы.

Итого

Протокол HTTP 1.1 уже давно не справляется с задачами поставленные современными веб приложениями. Над его усовершенствованием уже давно ведутся работы (HTTP-NG, SPDY). Помимо самого протокола появятся новые возможности для разработчиков с распространением HTML5 (websockets, SSE). Это все значительно разгрузит и ускорит Веб, но принцип «меньше запросов — быстрее сайт» все равно останется.

По теме

Материалы

xiper.net

5.2. Назначение и общая характеристика браузеров

Браузеры служат основным средством для чтения (просмотра) электронных изданий в HTML-формате и Web-сайтов. В издательских технологиях браузерам отведена почетная роль универсального средства как для просмотра изданий и Web-страниц, так и организации совместной работы сотрудников по подготовке изданий в рамках передовой технологии интрасетей (Intranet). Фирма Microsoft какой-то период даже распространяла свою оболочку Windows с интегрированным в нее браузером Explorer, пока это не было ей запрещено судом. Все браузеры и сопутствующие инструменты можно разделить на четыре группы, а именно (рис. 5.1):

  • браузеры общего назначения;

  • специализированные браузеры для просмотра трехмерных изображений;

  • так называемые «офф-лайн» браузеры, т. е. средства для быстрого переноса информации на компьютер пользователя с последующим отключением от сети Интернет и просмотром данных в автономном режиме;

  • дополнительные средства (инструменты) для улучшения работы браузеров.

Браузер общего назначения Microsoft Internet Explorer исходно предназначался для работы исключительно на платформе Windows. За шесть лет от первой версии до нынешней пятой пакет неузнаваемо переменился, совершенствуясь вместе с самой оболочкой Windows. Работа с современной версией пакета Internet Explorer 5.0 в оболочке Windows 98 или 2000 внешне ничем не отличается от работы с другими приложениями оболочки или с предыдущей версией этой программы. Основная функция Explorer'a состоит в обмене данными в сети Интернет, в частности, отображении Web-страниц и HTML-документов. Браузер может быть загружен теми же приемами, что и другие пакеты оболочки. Он также автоматически запускается при щелчке указателем мыши по любому гипертекстовому документу. Он же обеспечивает и поиск сайтов и документов в сети Интернет, если известны их сетевые URL, атрибуты или другие признаки, пригодные для организации поиска.

Русифицированный браузер Internet Explorer, по мнению многих пользователей, является лучшим на сегодняшний день средством общего назначения для непосредственного просмотра Web-страниц. Хотя изначально это программное средство создавалось для Интернет-технологий, оно (точно так же, как и Netscape Communicator) успешно используется и для работы с любыми электронными изданиями, для представления которых использован формат HTML. В частности, в издательских технологиях широко используются интра- и экстрасети для организации совместной работы сотрудников, корпоративной организации труда. Основное средство просмотра на базе этих технологий - это браузеры.

Последняя версия 5.5 Explorer'a характеризуется общим объемом около 49 Мб. Начиная с версии 5.0 браузер содержит удобное дополнение- кнопку на панели инструментов, которая позволяет «на лету» включать и выключать режим отображения графики (Images on/off). Кнопка формируется с помощью специального программного фрагмента, информационный объем которого около 260 Кб. В версии 5.5 улучшена поддержка новых стандартов: динамического HTML, каскадных стилевых листов, XML.

Netscape Communicator, в отличие от предыдущего браузера, не русифицирован, что для многих отечественных пользователей составляет главный его недостаток. Автору, однако, интерфейс этого браузера представляется более привлекательным. К достоинствам можно отнести то, что специальная секция меню Communicator позволяет перейти к другим программам пакета, например, к Netscape Composer'y- мощному WYZIWYG-редактору HTML-документов.

Браузер фирмы Netscape является на протяжении ряда лет главным конкурентом Internet Explorer. Он работает на различных платформах, причем за рубежом его позиции не слабее, чем у Explorer'a. Информационный объем пакета Netscape Communicator для версии 4.75 составляет около 20 Мб, а для недавно появившейся версии 6.0 - 25 Мб.

Отметим, что версия 6.0 коренным образом изменилась по сравнению с 4.75. Браузер приобрел сходство с популярным на платформе UNIX браузером Mozilla. Впрочем, его внешний вид может изменяться с помощью так называемых «оболочек» (skins) точно так, как это делается в популярном МР-3 проигрывателе Winamp. В версии 6.0 используется механизм визуализации Gecko, также заимствованный из браузера Mozilla. Пока можно только заметить, что этот механизм работает быстрее.

В пакете реализована тесная интеграция программ AOL Instant Messenger и Net2Phone с собственно браузером. Первая позволяет обмениваться мгновенными сообщениями, а вторая - звонить в любую точку мира через службу Интернет-телефон. Однако такая интеграция приводит к увеличению на 20% требуемого объема оперативной памяти.

В последние годы заметно расширилось использование браузера Opera от компании Opera Software, хотя пока он заметно уступает двум пакетам, рассмотренным выше. Сайт фирмы-распространителя данного браузера представлен на рис. 5.2.

По сравнению с браузерами, рассмотренными выше, Opera 4.0 выглядит просто малюткой, так как дистрибутив ее занимает всего 1,6 Мб. Однако он мало в чем уступает своим признанным старшим товарищам. В нем имеется адресная книга, список закладок и модуль работы с электронной почтой, причем все они оформлены в виде одной панели со вкладками, что представляет определенное удобство для пользователя, так как позволяет быстро переходить от одной операции к другой. К достоинствам этого браузера следует отнести и реализацию концепции многодокументного интерфейса, что уменьшает потребность в системных ресурсах и увеличивает производительность. Полезной особенностью браузера является автоматическая загрузка последней просмотренной Web-страницы при повторном запуске программы.

Однако в дистрибутиве отсутствуют функции, связанные с обработкой мультимедиа и поддержкой технологии Java. Можно, однако, загрузить соответствующие Plag-in'bi, например, Sun Java 1.1.3. Кстати, размер последнего составляет около 5 Мб. Недостаток браузера - также плохая поддержка кодировки KOI-8. Разработчики браузера распространяют бесплатно 30-дневную демонстрационную версию, а за рабочую версию требуют небольшую плату.

В настоящее время распространяется версия 5.01 этого браузера, информационный объем которой 9,3 Мб. В ней устранены основные из перечисленных недостатков. Браузер работает практически на всех известных платформах.

Выше уже говорилось о сходстве браузера Mozilla с Communicator 6.0. Это неудивительно, так как Mozilla был разработан фирмой Netscape, а в 1998 г. был опубликован его исходный код, причем фирма Mozilla взяла на себя сопровождение этого браузера. Для установки браузера используется архивный ZIP-файл, который распаковывается в отдельный каталог и сразу готов к работе. Mozilla распространяется без средств поддержки технологии Java. Реализация этой возможности требует включения дополнительных Plag-in'os в его состав. Браузер распространяется и поддерживается на сайтеwww.mozilla.org.

Последний из браузеров общего назначения по нашей классификации, о котором хотелось бы сказать несколько слов - это AMAYA 3.0, который был создан группой разработки стандартов консорциума W3C и используется ею для демонстрации и отработки новых Web-технологий. В данной версии реализована полномасштабная поддержка HTML, DHTML, MathML и CSS. Вероятно, это единственный браузер, который на основе MathML позволяет формировать сложные математические выражения и сразу помещать их на Web-страницу. Браузер поддерживает редактирование каскадных таблиц стилей (CSS) и их связывание с конкретными документами, причем результат активации стиля сразу отображается на экране. Однако даже этот браузер не полностью поддерживает стандарт CSS.

К браузерам второй группы относится гораздо менее распространенный по сравнению с предыдущими WebSpace Navigator фирмы SiliconGraphics. Это специализированный трехмерный браузер для просмотра VRML-документов, который открывает абсолютно новые возможности для взаимодействия с Web. VRML (Virtual Reality Modeling Language) - это разработанный той же фирмой SiliconGraphics и лицензированный практически всеми ведущими компьютерными компаниями язык моделирования виртуальной реальности. Он широко используется при описании трехмерных миров, передаваемых по Internet и имеющих гиперсвязи с WorldWideWeb.

Некоторые виртуальные объемные объекты поражают воображение. Например, используя VirtualSOMA Planet9, можно с высокой степенью достоверности имитировать прогулку по приморским торговым кварталам Сан-Франциско. Одновременно с выбором в Web-браузере связи с VRML-документом, запускается Web Space Navigator, который позволяет интерактивно перемещаться в трехмерном пространстве. Простое нажатие клавиши мыши, установленной на одном из объектов, обеспечивает Web связь с другими виртуальными мирами, HTML страницами и мультимедийными файлами.

COSMOPIayer - это VRML 2.0 браузер фирмы SiliconGraphics, который делает мир еще более динамичным и насыщенным, чем это мог сделать его предшественник -WebSpace Navigator. В сочетании с Java, COSMO достигает высокого динамизма и интерактивности. В дальнейшем процессе развития COSMOPIayer будет включать все большее количество функций языка VRML 2.0, в том числе - COSMO Motion Engine, равномерный поток аудио- и видеоданных, а также операции в режиме разделенного времени. Только представьте себе музей, в котором двигаются трехмерные объекты и видеофильм на одной из стен, в котором объясняется суть происходящего. Кстати, CosmoPlayer, как и WebSpace интегрирован с Netscape Navigator.

Информация, в зависимости от содержания, автоматически направляется на соответствующий браузер. HTML-страницы, получившие запрос в COSMO Player поступают в NetscapeNavigator, а виртуальные VRML миры, запрошенные из NetscapeNavigator, без всякого вмешательства пользователя, попадают в COSMO Player. Это многоплатформное решение, которое SiliconGraphics намерен сделать доступным для широкого лицензирования, включая и платформы персональных компьютеров.

Еще один VRML браузер GLView версия 3.4 с информационным объемом около 1,5 Мб также предназначен для просмотра трехмерных изображений. Работаете любыми версиями Windows включая NT. Взаимодействует с браузером общего назначения MS Internet Explorer.

Специализированный Web-браузер Premo Web Talkster умеет вслух читать текст на английском языке на открытой и активной в данный момент Web-странице (либо всю страницу целиком, либо только выделенный текст). Версия 1.0.f характеризуется информационным объемом около 8,5 Мб. Такие браузеры нравятся детям и школьникам, полезны для слабовидящих и изучающих иностранные языки. В будущем браузер, вероятно, сможет читать тексты и на русском языке.

К специализированным браузерам можно отнести и Lynx for Win32. Это классический текстовый Web-браузер, не воспроизводящий ни изображений, ни Java-скриптов, но зато быстрый и надежный. Ранее он работал только на платформе Unix, а теперь новая его версия пригодна для использования под Windows. Версия 2.8.3 имеет объем около 700 Кб.

Далее остановимся на группе офф-лайн браузеров. Teleport Pro - известный и популярный офф-лайн браузер. Скачивает сайты целиком, сохраняя структуру каталогов. Ведет поиск по сайтам. При скачивании информации может следовать не только по внутренним ссылкам, но и по внешним (ведущим на другие сайты). Множество других возможностей, продуманный интерфейс, подробная справочная система. Версия 1.29 занимает на жестком диске около 850 Кб, модуль русификации - дополнительно еще 60 Кб. Ограничения незарегистрированной версии незначительны, а ее дистрибутив можно «скачать» на нескольких сайтах.

WebZIP3.71 - один из лучших в миреоф-лайн-браузеров. Создает копию выбранного Web-сайта или страницы Интернета на вашем жестком диске для последующего просмотра в автономном режиме, т. е. не подключаясь к Сети. Это очень удобно, так как дает возможность использовать ночные тарифы Интернет, как правило, гораздо более экономные и с лучшим качеством связи. В браузер вводятся данные, что именно требуется скопировать и сохранить: одну страницу или весь сайт; на какую глубину следует прорабатывать ссылки; копировать только текстовую информацию или файлы определенного формата (например, изображения в формате GIF, архивы, аудио- и видеоклипы и т. д.). WebZIP имеет хорошие настройки параметров скачивания информации.

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

Беспрецедентная возможность, предусмотренная в этом оф-лайн-браузере - сохранение скопированного сайта в виде одного единого файла в формате compressed HTML- Help f lies (.CHM). В этот формат (.СНМ) встроена справка (Help) браузера Internet Explorer 5, MS Office 2000, Windows 98 и т. д. Немаловажно и то, что на сайте производителя к программе прилагаются дополнительные языковые модули, в том числе и русский.

Далее кратко остановимся на нескольких программах, специализирующихся только на «скачивании» информации из сети Интернет, т. е. переносе ее с определенных серверов и сайтов (в том числе ftp-серверов) на ваш компьютер. Одна из таких программ - это ReGet. Он позволяет легко и быстро копировать файлы с FTP- и HTTP- серверов на ваш компьютер. ReGet полностью использует всю полосу канала Интернет-соединения. Если качество связи низкое (что характерно для старых отечественных телефонных линий), ReGet позволит свести неудобства к минимуму и безошибочно перенести все файлы на Ваш компьютер. Русифицированная версия ReGet 1.7 rus занимает700 Кб, а новый выпуск ReGet Junior 2.0 - около 1,3 Мб.

Пакет FlashGet может переносить файлы и сайты по частям (причем показывает графическую карту процесса и заголовки переносимых файлов), включаться в заданное время, добавлять комментарии, упорядочивать файлы по категориям. Автоматически находит зеркала (т. е. отображения данного сайта на других серверах, см. также главу 9) и определяет наиболее быстрые из них. Поддерживает режим работы drag&drop (тяни и бросай, в буквальном переводе, т. е. перетаскивание файлов и папок с помощью указателя мыши). Предусмотрена возможность записи последовательности работы в специальный Log-файл в формате HTML. Информационный объем русифицированной версии 0.94 - около 1,3 Мб.

GolZilla от Aureate Media - еще один менеджер для переноса файлов из Интернет-сайтов на Ваш компьютер. Имеет простой и дружественный интерфейс пользователя. Все действия по оптимизации загрузки - поиск альтернативных ftp-серверов, выбор самого быстрого канала и переключения между ними - осуществляются в фоновом режиме незаметно от пользователя. Он позволяет производить дозвон до провайдера, разрывать соединение и выключать компьютеры по окончании сеанса, начинать загрузку в определенное время и регулировать скорость передачи данных для отдельных файлов. GolZilla производит мониторинг буфера обмена и операций в браузерах, а также проверяет полученные файлы на вирусы. Пакет очень популярен среди молодежи. Информационный объем - около 1,8 Мб.

К четвертой группе мы отнесли средства расширения и улучшения параметров браузеров. В частности, можно указать программу Naviscope (информационный объем около 400 Кб) - набор инструментальных средств для расширения браузера. Он ускоряет процесс поиска в Интернете путем загрузки многих страниц, а также отображает информацию о загрузке используя соответствующий индикатор загрузки в специальном небольшом окне. Быстро переходит к последней из просмотренных страниц, создает карты передвижения по сайтам и точно синхронизирует часы вашего PC с атомными часами, а также сохраняет адреса просмотренных сайтов на жестком диске компьютера пользователя. Есть утилита, блокирующая загрузку рекламных объявлений (баннеров), фоновых изображений, фоновых звуков, ми тающего те кета и пр.

Как многие пользователи огорчаются, сталкиваясь с невозможностью сохранения HTML страниц с включенной в них графикой Утилита Netrieve v1.04 (объем около 600 Кб) позволяет сохранять страницы с графикой для последующего автономного просмотра. Программа OnTrack! (размер около 800 Кб) позволяет блокировать различные всплывающие и выскакивающие окна при посещении некоторых сайтов. Работает в фоновом режиме со многими популярными браузерами, (например, Internet Explorer, Netscape Navigator, Opera) и пресекает любую попытку загрузки дополнительных окон с рекламой и прочей ненужной информацией. Аналогичные функции выполняет утилита PopOff 32-bit, которая запускается одновременно с браузером. Ее объем чуть больше 800 Кб.

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

Он входит составной частью в интегрированный пакет для работы в Интернете PROMT Internet 2000. Обеспечивает перевод с английского, немецкого, французского языков на русский и обратно. Это эффективное средство просмотра иноязычных сайтов. Пользователь, по существу, использует два браузера, в одном отображается оригинал страницы, а в другом - ее перевод. При переводе полностью сохраняется форматирование, включая фреймовую структуру и иллюстрации. Переход по ссылкам осуществляется как в окне оригинала, так и в окне перевода. Как оригинал, так и перевод сохраняется в виде файлов. В программе предусмотрены полностью настраиваемые меню и панели инструментов в стиле Microsoft Word 2000, доступны все основные функции Microsoft Internet Explorer, в том числе сохранение ссылок в Favorites.

studfiles.net

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

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

Для чего нужен браузер?

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

Функции браузера

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

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

Кроме того, браузер имеет функцию управления информацией, получаемой пользователем.

Строение браузера

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

Зачастую пользователю виден лишь его пользовательский интерфейс, который включает:

  • адресную строку;
  • кнопки «Назад» и «Вперед»;
  • меню закладок.

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

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

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

elhow.ru

Что такое браузер? Описание, назначение, конфигурации

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

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

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

Первые браузеры появились сразу с момента зарождения интернета, что объясняется весьма просто – необходим был такой программный продукт, который бы позволял просматривать содержимое удаленного сервера, управлять передачей данных. Первопроходцем в этой сфере стала программа с открытым кодом Mosaic, которая впервые показала на практике, что такое браузер, и послужила основой для таких известных современных мощных систем, как Internet Explorer и Navigator Netscape.

Сегодня браузеры входят во все конфигурации операционных систем, начиная с самых минимальных комплексов, причем каждый производитель систем для компьютеров сделал свой выбор в пользу того или иного браузера. Наиболее известный браузер – Internet Explorer – входит во все версии Windows, начиная с 1995 г. Именно с данной программы новый пользователь узнает, что такое браузер, какие у него основные функции и возможности. Для ОС Linux базовый браузер – Google Chrome, для Mac OS – Safari.

Подбирая для себя определенную модель браузера, стоит помнить, что все нынешние программы данной сферы обязательно выполняют базовый набор функций: отображение страницы сайта, управление страницами, запись истории просмотра, возможность сохранения паролей и автоматической авторизации на определенных ресурсах, где необходима данная процедура. Во многом браузеры отличаются своим внешним видом и дополнительным набором опций и расширений, а потому каждый пользователь подбирает под себя, с какой моделью ему будет наиболее комфортно работать в интернете. Сегодня в России наибольшей популярностью пользуется Opera, после которой следуют Chrome, FireFox и Internet Explorer. Если же рассматривать мировые тенденции, то здесь бессменным лидером остается детище корпорации Microsoft, которое пользуется колоссальной популярностью на своей родине – в США, а также в европейских странах и в Латинской Америке.

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

fb.ru


 

..:::Новинки:::..

Windows Commander 5.11 Свежая версия.

Новая версия
IrfanView 3.75 (рус)

Обновление текстового редактора TextEd, уже 1.75a

System mechanic 3.7f
Новая версия

Обновление плагинов для WC, смотрим :-)

Весь Winamp
Посетите новый сайт.

WinRaR 3.00
Релиз уже здесь

PowerDesk 4.0 free
Просто - напросто сильный upgrade проводника.

..:::Счетчики:::..