Какие программы являются браузерами www

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

• • программы-клиенты (в том числе мультипротокольные программы-браузеры);
• • программы просмотра документов в форматах, отличных от стандартных форматов Web;
• • программы-серверы протокола обмена гипертекстовой информацией (Web-серверы);
• • программы подготовки публикаций;
• • поисковые машины;
• • программы анализа статистики посещений.

Рассмотрим каждый из этих типов программ более подробно.

Программы-клиенты

Первыми образцами таких изделий были:

• • Line Mode Browser — простейший интерфейс, предназначенный для просмотра Web-страниц в текстовом режиме, который используется на любых устройствах отображения, включая терминалы TTY (телетайп);
• • Mosaic — первый графический интерфейс доступа в WWW, интерпретирующий язык гипертекстовой разметки HTML и позволяющий обмениваться данными по протоколу HTTP 1.0. При использовании гипертекстовых ссылок переход от одного документа к другому происходит после выбора манипулятором соответствующей переходу фразы или слова, которое выделено цветом в тексте и является идентификатором ссылки.

В настоящее время распространение получили мультипрото- кольные браузеры, основная задача которых — интерпретация разметки на языке HTML, выполнение встроенных в HTML программ на одном из командных языков Web (JavaScript или VBScript), интерпретация Java-байт кодов, разбор спецификации ресурсов сети (обработка URI), взаимодействие с серверами по протоколам прикладного уровня стека протоколов TCP/IP. Рассмотрим некоторые из таких программ.

Какой браузер сейчас лучше и быстрее для ПК?

Google Chrome — Web-браузер, выпущенный Google, как открытый исходный проект, озаглавленный «Chro- smsife $»!№ mium», в 2008 г. Это дало возможность сторонним разработчикам переместить браузер на платформы Linux и Mac OS X, и тестовые версии Google Chrome для операционных систем Linux и Mac OS X были выпущены в июне 2009 г.

На рис. 7.7 приводится общий вид интерфейса и иллюстрируются основные функциональные особенности браузера.

Переход на Web-страницу. Если известен адрес Web-страни- цы, на которую нужно перейти, следует ввести его в адресной строке (рис. 7.7, 3), и, чтобы загрузить Web-страницу, нажать значок стрелки или клавишу . При вводе адреса в Google Chrome автоматически выполняется поиск в истории посещенных страниц и показывается количество совпадений в нижней части раскрывающегося меню.

Поиск: Автоматические предложения. Адресная строка выполняет также функцию окна поиска. Кроме того, она позволяет со-

Какой браузер самый лучший? ТОП 7 браузеров для ПК!

Рис. 7.7. Общий вид интерфейса Google Chrome:

/ — строка открытых вкладок; 2 — страница Новая вкладка (изображения часто посещаемых сайтов); 3 — адресная строка и меню поиска; 4 — список закладок;

5 — история вкладок; 6 — вызов страницы настроек

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

В Google Chrome автоматически предлагаются связанные запросы, совпадения из истории посещенных страниц и списка популярных Web-сайтов исходя из текста в адресной строке. Например, при вводе текста new york times в адресной строке может быть предложен адрес http: //www.nytimes .com или поисковый запрос «new york times список бестселлеров». (При этом по умолчанию используется служба Google Suggest, которая предоставляет автоматические предложения).

Управление вкладками. В Google Chrome вкладки расположены в верхней части панели инструментов (рис. 7.7, 7). С их помощью можно переключаться между различными Web-сайтами в одном окне браузера. Поскольку на каждой вкладке расположены значок и название сайта, можно моментально определить открытый в ней сайт.

Кроме приведенных ниже приемов работы с окнами и вкладками браузера Google можно использовать различные сочетания клавиш (см. табл. 7.2).

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

Повторное посещение Web-страниц из истории вкладок. Для перехода на только что посещенные Web-страницы используются стрелки [ ).

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

Создание закладки. Если есть необходимость повторного захода в будущем на интересный Web-сайт, можно создать закладку, нажав значок «звездочки» ? на панели инструментов браузера. Появится окно, подтверждающее добавление закладки. Чтобы изменить название закладки, необходимо отредактировать текст в поле Имя.

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

Таблица 7.2. Управление браузером Google Chrome посредством сочетаний клавиш

Сочетания клавиш в окне и на вкладках

Открыть новое окно

Открыть новую вкладку

Открыть ссылку в новой вкладке с переключением на эту вкладку

Закрыть активное окно

Повторно открыть последнюю закрытую вкладку. В браузере Google Chrome сохраняются данные о 10 последних закрытых вкладках

Перейти на вкладку с указанным номером позиции. Цифра соответствует позиции вкладки в области вкладок

Сочетания клавиш на Web-странице

Печать текущей страницы

Сохранение текущей страницы

Перезагрузка текущей страницы

Остановить загрузку текущей страницы

Открытие окна поиска на странице

Нажатие на среднюю кнопку мыши или колесо прокрутки

Включить автоматическую прокрутку. При перемещении курсора страница будет автоматически прокручиваться в соответствующую сторону

Окончание табл. 7.2

Сочетания клавиш на Web-странице

Перезагрузка текущей страницы без учета кэшированного содержания

Нажатие на ссылку при нажатой клавише

Поиск следующего совпадения с текстом, введенным в окне поиска на странице

Поиск предыдущего совпадения с текстом, введенным в окне поиска на странице

Создание закладки для текущей Web-страницы

или нажатие клавиши с поворотом колеса прокрутки вверх

Увеличить все элементы страницы

или нажатие клавиши с поворотом колеса прокрутки вниз

Уменьшить все элементы страницы

Сочетания клавиш, позволяющие открыть функции Google Chrome

Включить или отключить панели закладок

Открыть Диспетчер закладок

Просмотр страницы История

Просмотр страницы Загрузки

Просмотреть окно Диспетчер задач

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

Мулыпипротоколъный браузер Opera (разработка Opera Software ASA, Hanshaugen, Oslo, Norway). Наиболее важные функции Opera могут быть активизированы посредством панелей инструментов (Toolbars) в форме кнопок, полей ввода и выпадающих меню.

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

Главная панель (Main bar) содержит кнопки для манипулирования документами, такие как открытие и сохранение документа, а также кнопки управления расположением открытых документов («мозаика» или «каскад» — рис. 7.9, /). Кнопка «мусорной корзины» (и «) позволяет возвратиться к списку ранее закрытых страниц. Для переключения между открытыми страницами достаточно щелкнуть кнопкой мыши по требуемой странице или же использовать для циклического обхода открытых страниц. Путем буксировки (Drag and drop) страниц можно изменить порядок их вызова.

Личная панель (Personal bar, рис. 7.9, 2) может содержать наиболее посещаемые ссылки, папки со ссылками и поисковые системы. Список элементов панели может быть пополнен путем буксировки ссылок (с панели ссылок), страниц и пр.

Панель вкладок (рис. 7.9, 3) позволяет создать новые вкладки (bookmarks) для ускорения Web-навигации.

Панель адреса (Address bar, рис. 7.9, 4) содержит кнопки вызова наиболее важных функций браузера (табл. 7.3).

Рис. 7.9. Компоненты интерфейса Opera:

1 — Главная панель; 2 — Личная панель; 3 — Панель вкладок; 4 — Панель адреса; 5 — Панель навигации; 6 — Стартовая панель; 7 — Вызов Панели

Вида; 8 — Панель состояния

Таблица 7.3. Команды, вызываемые из Панели адреса

Переход вперед и назад по траектории навигации

Прервать процесс загрузки страницы Обновить текущую страницу с сервера

Автоматическое подключение к сайтам с использованием Wand

Поле адреса — непосредственный переход по URL

Показывается в поле адреса, если текущая страница использует протокол безопасности

Доступ к списку ранее вызванных адресов

Прямой поиск в Web

Доступ к списку поисковых систем

View bar toggle

Вызов панели вида

Стартовая панель (Start bar, рис. 7.9, 6, табл. 7.3) может быть вызвана из Панели адреса.

Окончание табл. 7.3

Перейти к домашней странице пользователя

Доступ к 10 наиболее посещаемым страницам

Доступ к закладкам пользователя

Панель вида (view bar, табл. 7.4) может быть вызвана нажатием кнопки Вид (бд , рис. 7.9, 7) на правом конце Панели адреса.

Таблица 7.4. Команды Панели вида

Поиск в текущем документе

Найти следующее словопоявление в документе

Инициация голосового управления

Установить страницу по ширине окна

Выбор режима отображения страниц

Выбор режима вывода изображений

Выбор масштаба отображения страницы

Панель состояния (status bar, рис. 7.9, 8). Данная панель также скрыта по умолчанию, и если она активна, то на ней отображаются некоторые опции настройки Web-страниц и/или браузера.

Браузер Mozilla Firefox. Mozilla Firefox является Internet-браузером, предназначенным для просмотра Web-страниц и поиска в Internet, который реализован в различных ОС — Windows, Linux, Mac OS.

Навигация no Web-страницам. Просмотр начальной страницы. При запуске Firefox открывает начальную страницу (рис. 7.10, /). По умолчанию это будет домашняя страница Firefox.

Рис. 7.10. Экран браузера Mozilla Firefox:

1 — окно текущей Web-страницы; 2 — меню; 3 — строка адреса; 4 — панель инструментов; 5 — Журнал посещений; 6 — контекстный поиск

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

Переход на другую страницу. Чтобы перейти на другую Web-страницу, необходимо набрать ее Internet-адрес или URL в панели навигации (рис. 7.10, 3). Адрес страницы обычно начинается с префикса http: //, за которым следует одно или несколько слов, определяющих адрес (например http://www.mozilla.org/).

Остановка загрузки и обновление страницы. Если страница загружается слишком медленно или нет необходимости открыть эту страницу, надо нажать кнопку Стоп Q.

Просмотр страниц во вкладках. При работе сразу с несколькими Web-страницами в одно и то же время можно открывать их во вкладках для более быстрой и удобной работы в Internet.

Поиск в Internet. Можно легко произвести поиск нужной Web-страницы в Internet, набрав несколько слов в панели поиска Firefox.

Поиск выделенных слов на We b — с тр а н и це. Firefox позволяет искать в Internet слова, которые выделены мышью на Web-странице. Firefox откроет новое окно и использует поисковую машину по умолчанию для поиска по выделенным словам.

Поиск на странице. Чтобы найти текст на странице, которую вы просматриваете в данный момент в Firefox, следует выбрать пункт меню ПравкаНайти на этой странице. . ., после чего в нижней части окна Firefox появится новая панель, в которой следует набрать искомый текст (рис. 7.10, 6)

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

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

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

Рис. 7.11. Исходный рисунок на Web-странице (/); просмотр изображения,

сохраненного отдельно (2)

предварительный просмотр (выбрать пункт Файлпредвари- тельный просмотр — рис. 7.12).

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

Рис. 7.12. Предварительный просмотр

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

Установка Firefox как браузера по умолчанию. Чтобы установить Firefox как браузер по умолчанию, следует перейти в меню правкаНастройки, а затем в разделе Основное нажать на кнопку Установить как браузер по умолчанию.

Клавиатурные сокращения и приемы работы с мышью. В табл. 7.5 приведен список наиболее часто используемых клавиатурных сокращений, принятых в Mozilla Firefox, и аналогичных сокращений, используемых в Internet Explorer и Opera.

Таблица 7.5. Список клавиатурных сокращений Web-браузеров

Включить/выклю- чить режим активного курсора

Источник: studref.com

Какие программы являются браузерами www

Гіпермаркет Знань>>Інформатика>>Інформатика 9 клас>> Інформатика: Практична робота № 7. Спільне використання ресурсів локальної мережі.

Практична робота до предмету Інформатика 9 клас.

Розгляд теми: Практична робота № 7. Спільне використання ресурсів локальної мережі.

1. Что не характерно для локальной сети:

1) большая скорость передачи информации;
2) возможность обмена информацией на большие расстояния;
3) наличие связующего для всех абонентов высокоскоростного канала для передачи информации в цифровом виде;
4) наличие канала для передачи информации в графическом виде?

Правильный ответ – 2.

2. Протокол – это…

1) пакет данных;
2) правила организации передачи данных в сети;
3) правила хранения данных в сети;
4) структуризация данных в сети?

Правильный ответ – 2.

3. Локальная сеть – это…

1) группа компьютеров в одном здании;
2) комплекс объединенных компьютеров для совместного решения задач;
3) слаботочные коммуникации;
4) система Internet?

Правильный ответ – 2.

4. Основная функция сервера:

1) выполняет специфические действия по запросам клиента;
2) кодирует информацию, предоставляемую клиентом;
3) хранит информацию;
4) пересылает информацию от клиента к клиенту?

Правильный ответ – 1.

5. Специфические функции ЛС учебного назначения:

1) поддержка файловой системы, защита данных и разграничение доступа;
2) система контроля и ведения урока;
3) определение рабочей системы, декодирование данных, система контроля;
4) разграничение данных, защита данных, система доступа, определение рабочей системы, разграничение доступа, система контроля и ведения урока?

Правильный ответ – 4.

6. Of-line – это…

1) режим информационного пакетного обмена;
2) команда;
3) телекоммуникационная сеть;
4) операционная система?

Правильный ответ – 1.

7. BBS предназначена:

1) для определения маршрута информации;
2) для обмена файлами между пользователями;
3) для просмотра адресов;
4) для управления информацией?

Правильный ответ – 2.

8. Модем – это…

1) устройство преобразования цифровых сигналов в аналоговые и наоборот;
2) транспортная основа сети;
3) хранилище информации;
4) устройство, которое управляет процессом передачи информации?

Правильный ответ – 1.

9. Для связи компьютеров через модемы используются:

1) только телефонные линии;
2) только спутниковые каналы;
3) только радиоволны;
4) телефонные линии, оптоволокно, спутниковые каналы и радиоволны?

Правильный ответ – 4.

10. Функции модема:

1) соединяет компьютер с ближайшим узлом;
2) служит сетевой платой для соединения компьютеров в ло-кальную сеть;
3) осуществляет протоколирование передающей информа-ции;
4) защищает информацию?

Правильный ответ – 1.

11. Транспортная основа глобальных сетей – это…

1) витая пара;
2) коаксиальный кабель;
3) телефонные линии и спутниковые каналы;
4) телеграф?

Правильный ответ – 3.

12. Архив FTP – это…

1) сервер Archie;
2) хранилище файлов;
3) база данных;
4) WEB-сайт?

Правильный ответ – 2.

13. Типичная структура электронного письма:

1) заголовок, тема сообщения, ФИО адресата;
2) заголовок, тема сообщения, тип письма, адрес отправителя;
3) дата отправления, адрес, обратный адрес, тема сообщения и текст;
4) тема сообщения, адресная книга, текст и заголовок?

Правильный ответ – 3.

14. Домен – это…
1) название файла в почтовом ящике;
2) почтовый ящик узловой станции;
3) код страны;
4) короткое имя адресата?
Правильный ответ – 2.

15. Что является более важным для организации сети:

1) наличие большого количества компьютеров;
2) система протоколов;
3) несколько сетевых операционных систем;
4) высокоскоростные модемы?

Правильный ответ – 2.

16. Техническая структура E-mail – это…

1) совокупность узловых станций, связывающихся друг с другом для обмена;
2) совокупность компьютеров локальной сети;
3) компьютеры, хранящие и кодирующие информацию;
4) компьютеры, пересылающие информацию по запросам?

Правильный ответ – 1.

17. Для поддержки E-mail в Internet разработан протокол:

1) STTP; 2)SMTP; 3) SCTP; 4) SSTP?

Правильный ответ – 2.

18. Что является протокольной основой Internet:

1) система IP-адресов;
2) протоколы тестирования сетевого компьютера;
3) последовательность адресов;
4) адресная книга?

Правильный ответ – 1.

19. WWW – это…

1) распределенная информационная система мультимедиа, основанная на гипертексте;
2) электронная книга;
3) протокол размещения информации в Internet;
4) информационная среда обмена файлами?

Правильный ответ – 1.

20. Взаимодействие клиент–сервер при работе на WWW происходит по протоколу:

1) HTTP; 2) URL; 3) Location; 4) Uniform?

Правильный ответ – 1.

21. Какие программы не являются браузерами WWW:

1) Mosaic;
2) Microsoft Internet Explorer;
3) Microsoft Outlook Express;
4) Netscape Navigator?

Правильный ответ – 3.

22. В HTML можно использовать:

1) текст в ASSCII-формате;
2) выделения параграфа, пункта;
3) любые мультимедиа-файлы;
4) любые типы данных?

Правильный ответ – 1.

23. Какими символами в HTML основной текст отделяется от сопроводительного:

Правильный ответ – 3.

24. Как в HTML описывается ссылка на другой документ:

Правильный ответ – 1.

25. HTML – это…

1) программа просмотра WWW-документов;
2) прикладная программа;
3) язык разметки гипертекстов;
4) протокол взаимодействия клиент – сервер?

Правильный ответ – 3.

Надіслала вчитель математики та інформатики Філончук Олена Миколаївна, гімназія № 117 м. Києва Печерського району.

Источник: edufuture.biz

Как работает веб-браузер (с картинками)

Браузеры стали частью нашей повседневной жизни. Но задумывались ли вы когда-нибудь о том, как они на самом деле работают?

Эта статья приоткроет завесу магии, скрывающуюся за кулисами веб-браузеров.

1. Навигация

Навигация — это первый шаг загрузки веб-страницы. Она происходит когда пользователь вводит URL в адресной строке или делает клик по ссылке.

DNS-поиск

Первый шаг — найти IP-адрес, где располагаются ресурсы. Это делается с помощью DNS-поиска.

DNS (Domain Name System)-сервер — это сервер, который главным образом используются для сопоставления имени хоста веб-сайта (пр.: www.example.com) с соответствующим ему IP-адресом. Он содержит базу данных публичных IP-адресов и им соответствующих доменных имен.

Например если вы посетите страницу www.example.com, то DNS-сервер вернет вам ее IP-адрес (93.184.216.34).

Тройное TCP-рукопожатие

Следующий шаг — установить с сервером TCP-соединение. Это делается благодаря тройному TCP-рукопожатию.

Примечание переводчика. Transmission Control Protocol (TCP) — протокол управления передачей. Это стандарт, определяющий порядок установления и поддержания сетевого взаимодействия, с помощью которого приложения могут обмениваться данными.

1. Сперва клиент посылает запрос на открытие соединения с сервером с помощью SYN-пакета (от англ. SYNchronize packet — пакет синхронизации).
2. Затем сервер отвечает SYN-ACK-пакетом (от англ. SYNchronize-ACKnowledge packet — пакет синхронизации и подтверждения) чтобы подтвердить запрос и запросить клиента открыть соединение.
3. В конце клиент посылает ACK-пакет на сервер для подтверждения запроса.

TLS-рукопожатие

Если веб-сайт использует протокол HTTPS (аббр. от англ. Hypertext Transfer Protocol Secure — защищенный протокол передачи гипертекста), то следующий шаг — установить TLS-соединение через TLS-рукопожатие.

Примечание переводчика. TLS (аббр. от англ. Transport Layer Security — защита транспортного уровня) — шифрует данные, передаваемые через Интернет, чтобы подслушивающие устройства и хакеры не могли увидеть то, что вы передаете, что особенно полезно для частной и конфиденциальной информации, такой как пароли, номера кредитных карт и личная переписка.

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

1. Клиент отправляет «привет»: браузер отправляет серверу сообщение с версией TLS и набором шифров, которые он поддерживает, а также строку рандомных байтов именуемую «рандомом клиента» (client random).

Примечание переводчика. «Рандом клиента» (как и далее «рандом сервера») — это строка из 32-ух рандомных байтов. В соответствии со спецификацией TLS 1.2 первые 4 байта являются текущей датой и временем, а остальные 28 байтов — рандомно сгенерированными цифрами.

1. Сервер отправляет «привет» и сертификат: в ответ на «привет» клиента сервер отправляет свое приветствующее сообщение содержащее SSL‑сертификат, набор шифров и строку рандомных байтов именуемую «рандомом сервера» (server random).
2. Аутентификация: браузер проверяет SSL‑сертификат полученный от сервера на подлинность через «центр сертификатов», который его выпустил. Таким образом браузер может понять что сервер действительно является тем за кого он себя выдает.
3. «Секрет премастера» (premaster secret): браузер отправляет еще одну строку рандомно сгенерированных байтов именуемую «секретом премастера», которая зашифрованна публичным ключом (public key) полученным из SSL‑сертификата сервера. «Секрет премастера» может быть расшифрован только с использованием приватного ключа (private key) сервера.
4. Использование приватного ключа: сервер расшифровывает «секрет премастера».
5. Создание ключей сессии: браузер и сервер генерируют ключи сессии на основе «рандома клиента», «рандома сервера» и «секрета премастера».
6. Клиент завершает процесс рукопожатия: браузер отправляет серверу сообщение о завершении процесса.
7. Сервер завершает процесс рукопожатия: сервер также отправляет клиенту сообщение о завершении процесса со своей стороны.
8. Достигнута безопасность симметричного шифрования: рукопожатие выполнено и дальнейшая коммуникация может продолжиться с использованием ключей сессии (session keys).

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

2. Фетчинг ресурсов

После того как установлено TCP-соединение браузер может начать фетчинг (от англ. гл. to fetch — получать, загружать) ресурсов сервера.

HTTP-запрос

Если у вас уже есть опыт в веб-разработке, то вы наверняка встречали понятие HTTP-запросов.

HTTP-запросы используются для фетчинга ресурсов сервера. Для запросов необходимо указать URL и тип запроса (GET, POST, PUT, DELETE). Браузер также добавляет заголовки (headers) к запросу, что бы предоставить дополнительную информацию.

Первый запрос к серверу обычно является GET-запросом на получение HTML-файла.

HTTP-ответ

Затем сервер отвечает соответствующим HTTP-ответом. Ответ содержит код состояния (status code), заголовки (headers) и тело ответа (body).

3. Парсинг HTML

Теперь начинается главная секция. После того как браузер получил HTML-файл он парсит (от англ. гл. to parse — разбирать, анализировать) его для создания DOM (Document Object Model)-дерева.

Это делается при помощи движка браузера, который является его ядром (Пр.: Gecko для Firefox, Webkit для Safari, Blink для Chrome и т.д.).

Вот пример HTML-файла:

Page Title

Hello World!

Токенизация

Первый шаг на пути к отображению веб-страницы — это токенизация HTML-файла. Токенизация — это процесс деления строки символов на значимые чанки (от англ. chunk — кусок) для браузера, именуемые токенами (от англ. token — жетон).

Токены являются базовыми строительными блоками DOM-дерева.

Строительство DOM-дерева

Лексинг (lexing) — это процесс конвертации токенов в древовидную структуру именуемую DOM-деревом.

DOM-дерево — это древовидная структура данных, которая представляет собой ноды(от англ. node — узел) в HTML-документе.

Заметка: если для страницы требуются какие-либо внешние ресурсы, то они будут обработаны следующим образом:

1. Не блокирующие ресурсы загружаются параллельно (Пр.: картинки)
2. Отложенные ресурсы загружаются параллельно, но выполняются после того как будет построено DOM-дерево. Пр.: скрипты с атрибутом defer и CSS-файлы.
3. Блокирующие ресурсы загружаются и выполняются последовательно. Пр.: скрипты БЕЗ атрибута defer.

4. Парсинг CSS

После того как DOM-дерево построено, браузер парсит CSS-файлы для создания CSSOM (CSS Object Model).

Этот процесс аналогичен построению DOM-дерева с использованием токенизации и генерации CSSOM.

5. Выполнение JavaScript

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

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

JIT-компиляция

Предполагая, что вам уже знакома концепция интерпретаторов и компиляторов, поговорим о движке JavaScript.

Движок JavaScript использует гибридный подход компиляции именуемый JIT (от англ. аббревиатуры Just in Time — точно в срок).

JIT-компиляция, в отличие от скомпилированного языка такого как C, где компиляция делается заранее (другими словами ДО выполнения кода), делается ВОВРЕМЯ выполнения.

6. Рендеринг

Наконец-то пришло время рендера (от англ. rendering — визуализация) страницы. Для рендеринга браузер использует DOM-дерево и CSSOM.

Построение дерева рендера

Первый шаг — построить дерево рендера. Дерево рендера — это подмножество DOM-дерева, состоящее только из видимых на странице элементов.

Компоновка (layout)

Следующим этапом является компоновка дерева рендера. Она делается путем расчетов точных размеров и позиции каждого элемента в дереве рендера.

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

Примеры ситуаций, когда позиция элементов перерассчитывается:

1. Добавление или удаление элементов из DOM
2. Изменение размеров окна браузера
3. Изменение ширины, высоты или позиции элемента

Отрисовка (painting)

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

Также как и этап компоновки, этот этап происходит каждый раз когда мы изменяем отображение элемента в DOM, даже частично.

Примеры ситуаций, когда происходит повторная отрисовка:

1. Изменение очертания элемента
2. Изменение прозрачности (opacity) или видимости (visibility) элемента
3. Изменение цвета фона элемента

Наложение слоев и композиция

Финальный этап — композиция слоев. Это делается браузером для оптимизации процесса рендеринга.

Композиция (compositing) — это техника разделения частей страницы на слои, их отрисовки и дальнейшего составления из них страницы в отдельном потоке называемом композиторским потоком (compositor thread). Когда разделы документа рисуются в разных слоях, перекрывая друг-друга, композиция необходима для того что бы удостовериться, что они нарисованы в правильном порядке и их содержимое корректно отображается.

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

Источник: habr.com