Что такое браузер примеры браузеров. Что такое браузер и какие функции он выполняет

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

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

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

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

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

Существует несколько видов браузеров:

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

полноэкранный браузер. Текстовый браузер без поддержки мультимедийных (картинки, анимация и т.п.) ресурсов сети Интернет. С помощью него можно просматривать только текст и ссылки. Так как большинство пользователей привыкло путешествовать по Интернету с помощью браузеров поддерживающих мультимедиа, не стоит окончательно забывать и те, которые отображают только текст. Конечно, браузеры такого вида используются довольно редко, но скорость загрузки страниц у них впечатляет. Без графических и оформительных элементов, а также без таблиц, многие страницы загружаются практически мгновенно. Один из самых популярных полноэкранных браузеров является Lynx, который входит в состав операционной системы Lynix.

браузер с поддержкой мультимедиа. Самые распространенные и популярные браузеры сегодня. Позволяют работать практически со всеми видами информации, представленной в Интернете.99% пользователей глобальной сети Интернет интенсивно и каждодневно используют возможности этих браузеров. Наиболее часто используемые: Internet Explorer, Opera, Mozilla, Netscape Navigator.

Существует еще так называемые браузеры-дополнения. Они являются надстройками над полнофункциональными браузерами. Чаще всего разработчиками дополнений используется Internet Explorer. Надстройки используют для отображения сайтов "движок” этого браузера. Поэтому их возможности в этой области полностью идентичны с Internet Explorer. Дополнения всего лишь изменяют интерфейс и добавляют некоторые функции, которые разработчики из Microsoft обошли своим вниманием.

05/01/2019 17:33

Каждый человек обладает уникальным вкусом, предпочтениями, а также требованиями. Если одна вещь попадает к сотне людей на тестирование, то каждый озвучит разный результат. Некоторые мнения будут похожи, другие различаются и это естественно. В области программного обеспечения все точно также. Браузер - это программа, которую человек использует для серфинга интернета. Ее мы запускаем ежедневно, потому важно подобрать удобный браузер, который будет отвечать всем требованиям.
При помощи браузера можно искать любую информацию, прослушивать музыку, смотреть фильмы, а также играть в любимые игры. Любой рейтинг получится спорным, но давайте попробуем составить рейтинг наилучших браузеров. В статье вы разберем критерии выбора хорошего браузера для Windows 7, Windows 8 и Windows 10 . Мы подробно изучим достоинства и недостатки каждого из них. На основании нашего рейтинга вы сумеете подобрать для себя хороший браузер.

Достоинства:

Достоинства:


Недостатки:

Достоинства:

Достоинства:

Достоинства:

Сейчас существует множество браузеров, которые мы не упоминали в нашем обзоре. Мы представили свой выбор лучших браузеров, но у каждого может быть другое мнение. В обзоре представлены лишь те обозреватели, с которыми мне приходилось сталкиваться. Их можно загрузить совершенно бесплатно и использовать без каких-либо ограничений. Актуальную версию можно найти на официальном сайте. Если вы можете предложить достойные браузеры, которые должны присутствовать в Топ 5, то указывайте свои варианты в комментариях.

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

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

презентация , добавлен 15.05.2015


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

реферат , добавлен 28.05.2013


Общее понятие про веб-обозреватель, браузер. История создания и развития браузеров. Основные виды браузеров: режима командной строки; полноэкранный; с поддержкой мультимедиа; дополнения. Принцип работы веб-сервера. Построение страницы интернет браузером.

презентация , добавлен 12.01.2011


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

курсовая работа , добавлен 23.04.2013


Достоинства, недостатки браузеров и их виды - полноэкранные и с поддержкой мультимедиа. Обзор наиболее популярных браузеров: Internet Explorer, Mozilla, Netscape Navigator, Opera, Firefox и Safari. Распространенность браузеров и их возможности.

доклад , добавлен 21.05.2013


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

курсовая работа , добавлен 26.05.2009


Обзор существующих браузеров: Windows Internet Explorer, Mozilla Firefox, Safari, Google Chrome, Opera, Flock, Maxthon. Статистика популярности браузеров - программ, представляющих в удобном для восприятия виде информацию, получаемую из Интернета.

презентация , добавлен 14.10.2013


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

дипломная работа , добавлен 18.07.2010

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

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

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

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

Тим Бернес-Ли разработал все технические аспекты (протокол обмена данными http, язык гипертекстовой разметки Html, принципы формирования и многое другое). Но все это ничего бы не дало без программы, которая бы интерпретировала язык разметки страниц в их отображение на экране монитора.

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

Первым графическим браузером (он уже мог отображать не только текст, списки и таблицы, но и картинки!) был знаменитый Mosaic. Фактически он стал родоначальником всех современных обозревателей и его популярность в то время была очень велика. С использованием его кода были разработаны такие известные в свое время шедевры, как Netscape и первый Internet Explorer, который благодаря своей интегрированности с операционной системой Windows и бесплатности, полностью вытеснил первого игрока с рынка.

Однако, была созданна некоммерческая организация Мазила, которая унаследовала исходные коды Netscape (фактически Mosaic). Но тем не менее эта компания, название которой произошло от вариации английских слов «убить мозаик», полностью переработала код первого браузера и создала одного из сегодняшних лидеров рынка — Мазилу Фаерфокс.

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

Кроме этого, практически все , ибо любая другая модель распространения обрекает разработчиков на провал и безызвестность. Как вы, наверное, помните, очень хороший browser под названием Опера, начиная с даты своего рождения (1995 год), был платным и лишь в 2005 появилась официальная возможность скачать его бесплатно (мы то с вами, уважаемые жители постсоветского пространства, так долго не ждали). К чему это привело?

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

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

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

С 2005 года Opera можно скачать совершенно бесплатно, но именно платность ее до 2005 года сыграла злую шутку:

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

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

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

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

Конечно же, существуют еще десятки разнообразных интернет-обозревателей, судьба которых не столь балует, как обозначенную чуть выше пятерку. Рассмотреть их все в рамках этой статьи не представляется возможным, поэтому я решил остановиться лишь на тех обозревателях, которые решили «сесть на хвост» супер популярному сейчас Хрому. Благо, что сделан он на основе бесплатного движка WebKit.

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

Однако по функциональность Хромиум несколько уступает Chrome, да и по стабильности ему явно проигрывает, ибо по сути все время пребывает на стадии бета-тестирования. Наверное, пользоваться им в качестве основного обозревателя я бы не стал.

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

Удачи вам! До скорых встреч на страницах блога сайт

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

Яндекс Браузер - расширения и темы подходят от Хрома, а функционал его даже превосходит
Опера - как настроить браузер под себя, а так же Opera Link, config, экспресс-панель и почтовый клиент
Закладки в браузере Яндекса, Гугл Хром и Фаерфорс, а так же виртуальные онлайн-закладки
Web Developer для Firefox - установка и возможности плагина для верстальщиков и вебмастеров
Chromium - что это за браузер, как Хромиум связан с Гугл Хромом и какие еще браузеры работают на его основе

Your browser may not support the functionality in this article.

ForEach.call(document.querySelectorAll("header .date a"), function(elem, i) { elem.textContent += " (" + ["author","editor"][i] + ")"; });

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

Веб-разработчик, знакомый с внутренним механизмом работы браузеров, принимает более квалифицированные решения и понимает, почему следует выбрать те или иные средства . Это достаточно объемный документ, однако мы рекомендуем читать его как можно внимательнее и гарантируем, что вы не пожалеете об этом. Пол Айриш, Chrome Developer Relations

Веб-браузеры, пожалуй, являются самыми распространенными приложениями. В этом учебнике я объясняю, как они работают. Мы подробно рассмотрим, что происходит с момента, когда вы набираете в адресной строке google.ru , до появления страницы Google на экране.

На сегодняшний день существует пять основных браузеров: Internet Explorer, Firefox, Safari, Chrome и Opera. В примерах используются браузеры с открытым исходным кодом: Firefox, Chrome и Safari (код открыт частично). Согласно статистике использования браузеров на сайте StatCounter , на август 2011 года браузеры Firefox, Safari и Chrome были установлены в общей сложности на 60% устройств. Таким образом, браузеры с открытым исходным кодом имеют на сегодняшний день весьма сильные позиции.

Основное предназначение браузера – отображать веб-ресурсы. Для этого на сервер отправляется запрос, а результат выводится в окне браузера. Под ресурсами в основном подразумеваются HTML-документы, однако это также может быть PDF-файл, картинка или иное содержание. Расположение ресурса определяется с помощью URI (унифицированного идентификатора ресурсов).

То, каким образом браузер обрабатывает и отображает HTML-файлы, определено спецификациями HTML и CSS. Они разрабатываются Консорциумом W3C , который внедряет стандарты для Интернета.
Многие годы браузеры отвечали лишь части спецификаций, и для них создавались отдельные расширения. Для веб-разработчиков это означало серьезные проблемы с совместимостью. Сегодня большинство браузеров в большей или меньшей степени отвечает всем спецификациям.

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

• Адресная строка для ввода URI
• Кнопки навигации "Назад" и "Вперед"
• Закладки
• Кнопки обновления и остановки загрузки страницы
• Кнопка "Домой" для перехода на главную страницу

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

Ниже перечислены основные компоненты браузера ().

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

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

По умолчанию он способен отображать HTML- и XML-документы, а также картинки. Специальные подключаемые модули (расширения для браузеров) делают возможным отображение другого содержания, например PDF-файлов. Однако эта глава посвящена основным функциям: отображению HTML-документов и картинок, отформатированных с помощью стилей CSS.

В интересующих нас браузерах (Firefox, Chrome и Safari) используются два модуля отображения. В Firefox применяется Gecko – собственная разработка Mozilla, а в Safari и Chrome используется WebKit.

WebKit представляет собой модуль отображения с открытым исходным кодом, который был изначально разработан для платформы Linux и адаптирован компанией Apple для Mac OS и Windows. Подробные сведения можно найти на сайте webkit.org .

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

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

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

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

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

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

Как видно из рисунков 3 и 4, в WebKit и Gecko используется разная терминология, однако схемы их работы практически идентичны.

В Gecko дерево визуально отформатированных элементов называется деревом фреймов (frame tree), в котором каждый элемент является фреймом. В WebKit используется дерево отображения (render tree), состоящие из объектов отображения (render objects). Размещение элементов в WebKit называется компоновкой, или версткой (layout), а в Gecko – обтеканием (reflow). Объединение узлов DOM и визуальных атрибутов для создания дерева отображения называется в WebKit совмещением (attachment). Небольшое отличие Gecko, не имеющее отношения к семантике, состоит в том, что между HTML-файлом и деревом DOM находится еще один уровень. Он называется буфером содержания (content sink) и служит для формирования элементов DOM. Теперь поговорим о каждом этапе работы подробнее.

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

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

Например, в результате синтаксического анализа выражения 2 + 3 – 1 может получиться такое дерево:

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

Вместе с синтаксическим применяется лексический анализ.

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

Смысл синтаксического анализа состоит в применении синтаксических правил языка.

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

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

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

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

На рисунке 5 показано синтаксическое дерево, построенное на основе математического выражения. Определим элементарный математический язык и рассмотрим процесс синтаксического анализа.

Словарь: наш язык может содержать целые числа, знаки "плюс" и "минус".

Синтаксис

Рассмотрим входную последовательность символов 2 + 3 – 1 .
Первый элемент, отвечающий правилу, – 2 (согласно правилу №5, это операнд). Второй такой элемент – 2 + 3 (последовательность, состоящая из операнда, оператора и еще одного операнда, определена правилом №3). Следующее соответствие мы найдем в самом конце: последовательность 2 + 3 – 1 является выражением. Так как 2+3 – это операнд, мы получаем последовательность, состоящую из операнда, оператора и еще одного операнда, что соответствует определению выражения. Строка 2 + + не содержит соответствий правилам, поэтому была бы расценена как недействительная.

Язык из примера выше можно было бы определить так:

INTEGER:0|* PLUS: + MINUS: - Как видите, целые числа определены регулярным выражением.

Синтаксис обычно описывается в формате BNF . Язык из примера выше можно описать так:

Expression:= term operation term operation:= PLUS | MINUS term:= INTEGER | expression

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

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

Теперь посмотрим, как эти два типа анализаторов справились бы с нашим примером.

Нисходящий анализатор начал бы с правила верхнего уровня и определил бы, что 2 + 3 –·это выражение. Затем он определил бы, что 2 + 3 – 1 также является выражением (в процессе определения выражений выявляются и соответствия другим правилам, однако первым всегда рассматривается правило верхнего уровня).

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

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

Полученное синтаксическое дерево состоит из элементов DOM и узлов атрибутов. DOM – объектная модель документа (Document Object Model) – служит для представления HTML-документа и интерфейса элементов HTML таким внешним объектам, как код JavaScript.
В корне дерева находится объект Document .

Модель DOM практически идентична разметке. Рассмотрим пример разметки:

Hello World

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

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

Ниже перечислены причины этого.

Так как стандартные анализаторы не подходят для HTML, браузеры создают собственные анализаторы.

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

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

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

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

Выполним лексический анализ простого кода HTML:

Hello world

Исходное состояние – "данные". Когда анализатор обнаруживает символ < , состояние меняется на "открытый тег" . Если далее обнаруживается буква (a–z), создается токен открывающего тега, а состояние меняется на "название тега" . Оно сохраняется, пока не будет обнаружен символ > . Символы по одному добавляются к названию нового токена. В нашем случае получается токен html .

При обнаружении символа > токен считается готовым и анализатор возвращается в состояние "данные" . Тег обрабатывается точно так же. Таким образом, анализатор уже сгенерировал теги html и body и вернулся в состояние "данные" . Обнаружение буквы H во фразе Hello world ведет к генерации токена символа. То же происходит с остальными буквами, пока анализатор не дойдет до символа < в теге . Для каждого символа фразы Hello world создается свой токен.

Затем анализатор снова возвращается в состояние "открытый тег" . Обнаружение символа / ведет к созданию токена закрывающего тега и переходу в состояние "название тега" . Оно сохраняется, пока не будет обнаружен символ > . В этот момент генерируется токен нового тега, а анализатор снова возвращается в состояние "данные" . Последовательность символов обрабатывается, как описано выше.

При создании синтаксического анализатора формируется объект Document. На этапе построения дерево DOM, в корне которого находится этот объект, изменяется и к нему добавляются новые элементы. Каждый узел, генерируемый лексическим анализатором, обрабатывается конструктором деревьев. Для каждого токена создается свой элемент DOM, определенный спецификацией. Элементы добавляются не только в дерево DOM, но и в стек открытых элементов, который служит для исправления неправильно вложенных или незакрытых тегов. Алгоритм также выражается в виде автомата с конечным числом состояний, которые называются "способами включения" (insertion mode).

Рассмотрим этапы создания дерева для следующего фрагмента кода:

Hello world

В начале этапа построения дерева у нас есть последовательность токенов, полученная в результате лексического анализа. Первое состояние называется исходным . При получении токена html состояние меняется на "до html" , после чего происходит повторная обработка токена в этом состоянии. В результате создается элемент HTMLHtmlElement, который добавляется к корневому объекту Document.

Состояние меняется на "до head" . Анализатор обнаруживает токен body. Хотя в нашем коде нет тега head, элемент HTMLHeadElement будет автоматически создан и добавлен в дерево.

Состояние меняется на "внутри head" , затем на "после head" . Токен body обрабатывается еще раз, создается элемент HTMLBodyElement, который добавляется в дерево, и состояние меняется на "внутри body" .

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

При получении закрывающего токена body состояние меняется на "после body" . Когда анализатор доходит до закрывающего тега html, состояние меняется на "после после body" . При получении токена конца файла анализ завершается.

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

Рассмотрим несколько примеров.
Лексическая грамматика (словарь) определяется регулярными выражениями для каждого токена:

Comment \/\*[^*]*\*+([^/*][^*]*\*+)*\/ num +|*"."+ nonascii [\200-\377] nmstart [_a-z]|{nonascii}|{escape} nmchar [_a-z0-9-]|{nonascii}|{escape} name {nmchar}+ ident {nmstart}{nmchar}*

Ident – это идентификатор, который используется как название класса. Name – это элемент id, для ссылки на него используется символ решетки (#).

Синтаксические правила описаны в формате BNF.

Ruleset: selector [ "," S* selector ]* "{" S* declaration [ ";" S* declaration ]* "}" S* ; selector: simple_selector [ combinator selector | S+ [ combinator? selector ]? ]? ; simple_selector: element_name [ HASH | class | attrib | pseudo ]* | [ HASH | class | attrib | pseudo ]+ ; class: "." IDENT ; element_name: IDENT | "*" ; attrib: "[" S* IDENT S* [ [ "=" | INCLUDES | DASHMATCH ] S* [ IDENT | STRING ] S* ] "]" ; pseudo: ":" [ IDENT | FUNCTION S* ")" ] ; Набор правил (ruleset) представляет собой описанную ниже структуру. div.error , a.error { color:red; font-weight:bold; } Элементы div.error и a.error – это селекторы. Действующие правила данного набора заключены в фигурные скобки. Формально эта структура определяется так: ruleset: selector [ "," S* selector ]* "{" S* declaration [ ";" S* declaration ]* "}" S* ; Это означает, что набор правил действует как селектор или как несколько селекторов, разделенных запятыми и пробелами (S означает пробел). Набор правил содержит одно или несколько объявлений, разделенных точкой с запятой. Они заключены в фигурные скобки. Определения понятий "объявление" и "селектор" будут даны ниже.

В WebKit для автоматического создания синтаксических анализаторов CSS используются генераторы . Как уже говорилось, Bison служит для создания восходящих анализаторов, при работе которых входная последовательность символов сдвигается вправо. В Firefox используется нисходящий анализатор, разработанный организацией Mozilla. В обоих случаях файл CSS разбирается на объекты StyleSheet, содержащие правила CSS. Объект правил CSS содержит селектор и объявление, а также другие объекты, характерные для грамматики CSS.

Веб-документы придерживаются синхронной модели. Предполагается, что скрипты будут анализироваться и исполняться сразу же, как только анализатор обнаружит тег . Синтаксический анализ документа откладывается до завершения выполнения скрипта. Если речь идет о внешнем скрипте, сначала необходимо запросить сетевые ресурсы. Это также делается синхронно, а анализ откладывается до получения ресурсов. Такая модель использовалась много лет и даже занесена в спецификации HTML 4 и 5. Разработчик мог пометить скрипт тегом defer, чтобы синтаксический анализ документа можно было выполнять до завершения выполнения скрипта. В HTML5 появилась возможность пометить скрипт как асинхронный (asynchronous), чтобы он анализировался и выполнялся в другом потоке.

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

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

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

В Firefox элемент дерева отображения называется "фреймом" (frame). В WebKit используется термин "объект отображения" (render object).
Каждый объект отображения располагает данными об отрисовке самого себя и своих дочерних элементов.
Класс RenderObject – основной класс объектов отображения в WebKit – определен следующим образом:

Class RenderObject{ virtual void layout(); virtual void paint(PaintInfo); virtual void rect repaintRect(); Node* node; //the DOM node RenderStyle* style; // the computed style RenderLayer* containgLayer; //the containing z-index layer }

Каждый объект отображения представляет собой прямоугольную область, соответствующую окну CSS узла, как описано в спецификации CSS2. Он содержит геометрические данные, такие как ширина, высота и положение.
Тип окна зависит от атрибута display объекта style, назначенного данному узлу (см. раздел ). Ниже представлен код, который используется в WebKit, чтобы определить, какой тип объекта отображения необходимо создать для узла DOM, на основе атрибута свойства display.

RenderObject* RenderObject::createObject(Node* node, RenderStyle* style) { Document* doc = node->document(); RenderArena* arena = doc->renderArena(); ... RenderObject* o = 0; switch (style->display()) { case NONE: break; case INLINE: o = new (arena) RenderInline(node); break; case BLOCK: o = new (arena) RenderBlock(node); break; case INLINE_BLOCK: o = new (arena) RenderBlock(node); break; case LIST_ITEM: o = new (arena) RenderListItem(node); break; ... } return o; } Учитывается и тип элемента: например, для элементов управления формами и таблиц используются специальные фреймы.
В WebKit, если элемент пытается создать специальный объект отображения, метод createRenderer будет переопределен. Объекты отображения указывают на объекты style, содержащие негеометрическую информацию.

Существуют и такие элементы DOM, которым соответствует сразу несколько визуальных объектов. Обычно это элементы со сложной структурой, которые невозможно описать одним-единственным прямоугольником. Например, элементу select соответствуют три визуальных объекта: один для области отображения, другой для раскрывающегося списка, третий для кнопки. Кроме того, если текст не вмещается на одну строку и разбивается на фрагменты, новые строки добавляются как самостоятельные объекты отображения.
Еще одним примером, где используется несколько объектов отображения, является некорректно написанный код HTML. Согласно спецификации CSS, строчный элемент может содержать либо только блочные, либо только строчные элементы. Если же содержание смешанное, то в качестве оболочки для строчных объектов создаются анонимные блочные объекты.

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

В Firefox визуальное представление регистрируется как слушатель обновлений DOM. Создание фреймов делегируется конструктору FrameConstructor , который определяет стили (см. ) и создает фрейм.

В WebKit процесс определения стиля и создания объекта отображения называется совмещением (attachment). Каждый узел DOM имеет метод attach. Совмещение выполняется синхронно; при добавлении нового узла в дерево DOM для него вызывается метод attach.

В результате обработки тегов html и body создается корневой объект дерева отображения. В спецификации CSS он называется контейнером – блоком верхнего уровня, в котором содержатся все остальные блоки. Его размеры формируют область просмотра, то есть часть окна браузера, в которой будет показано содержание. В Firefox она называется ViewPortFrame , а в WebKit – RenderView . Это объект отображения, на который указывает документ. Остальное дерево строится посредством добавления в него узлов DOM.

Подробные сведения о модели обработки приведены в спецификации CSS2 .

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

Стиль определяется различными таблицами стилей, строчными элементами style и визуальными свойствами в документе HTML (такими как bgcolor). Последние переводятся в свойства CSS.

Таблицы стилей могут быть предоставлены браузером, разработчиком веб-страницы или пользователем, который может выбрать в браузере предпочитаемый стиль (например, в Firefox это можно сделать, поместив таблицу стилей в папку Firefox Profile).

С вычислением стилей связан ряд сложностей.

Рассмотрим пример со следующими правилами стилей:

P.error {color:red} #messageDiv {height:50px} div {margin:5px} Первое правило будет помещено в карту классов, второе – в карту идентификаторов, а третье – в карту тегов.
Рассмотрим следующий код HTML:

an error occurred

Сначала найдем правила для элемента p. В карте классов содержится ключ error, по которому находим правило p.error. Правила, соответствующие элементу div, содержатся в карте идентификаторов (по ключу id) и в карте тегов. Осталось только определить, какие из правил, найденных по ключам, являются подходящими.
Предположим, правило для элемента div таково:

Table div {margin:5px} Мы в любом случае извлекли бы его из карты тегов, так как ключом является крайний правый селектор, однако оно не подошло бы для этого элемента div, потому что для него не существует родительской таблицы.

Такая оптимизация используется и в WebKit, и в Firefox.

Свойства объекта style отвечают всем визуальным атрибутам (всем атрибутам CSS, но на более универсальном уровне). Если свойство не определяется ни одним из подходящих правил, в некоторых случаях оно может быть унаследовано от родительского объекта style. В других случаях используется значение по умолчанию.

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

Объявления браузера имеют самый низкий приоритет, а объявления пользователя важнее объявлений автора, только если имеют пометку!important. Объявления с одинаковым приоритетом сортируются по , а затем по порядку, в котором были определены. Визуальные атрибуты HTML переводятся в соответствующие объявления CSS и обрабатываются как правила автора с низким приоритетом.

Специфичность селектора определена в спецификации CSS2 описанным ниже образом.

• Если объявление содержится в атрибуте style, а не в правиле с селектором, выбирается значение 1, в противном случае – 0 (= a).
• Количество атрибутов ID внутри селектора (= b).
• Количество других атрибутов и псевдоклассов внутри селектора (= c).
• Количество названий элементов и псевдоэлементов внутри селектора (= d).

Основание системы счисления определяется самым большим числом в любой из категорий.
Например, если a=14, можно использовать шестнадцатеричную систему. Если a=17 (что маловероятно), потребуется система счисления по основанию 17. Такая ситуация может возникнуть, если имеется селектор такого типа: html body div div p... Но вряд ли внутри селектора будет 17 тегов.

Ниже приведено несколько примеров.

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

После сопоставления правил они сортируются согласно приоритету. В WebKit для коротких списков используется сортировка простыми обменами, а для длинных – сортировка слиянием. При сортировке WebKit переопределяет для правил оператор >:

Static bool operator >(CSSRuleData& r1, CSSRuleData& r2) { int spec1 = r1.selector()->specificity(); int spec2 = r2.selector()->specificity(); return (spec1 == spec2) : r1.position() > r2.position() : spec1 > spec2; }

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

Когда только что созданный объект отображения включается в дерево, он не имеет ни размера, ни положения. Расчет этих значений называется компоновкой (layout или reflow).

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

Система координат рассчитывается на основе корневого фрейма. Используются верхняя и левая координаты.

Компоновка выполняется в несколько циклов. Она начинается с корневого объекта отображения, соответствующего элементу в HTML-документе. Затем обрабатывается иерархия фреймов (или отдельные ее части), и геометрическая информация рассчитывается для объектов отображения, которым она необходима.

Корневой объект отображения имеет координаты (0; 0), а его размеры соответствуют области просмотра (видимой части окна браузера).

Любой объект отображения может при необходимости вызвать метод layout или reflow для своих дочерних элементов.

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

Используется два флага: dirty и children are dirty. Флаг children are dirty означает, что перекомпоновка требуется не самому объекту отображения, а одному или нескольким из его дочерних объектов.

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

При инкрементной компоновке изменяются только "грязные" объекты отображения (при этом может потребоваться перекомпоновка некоторых других объектов).
Инкрементная компоновка выполняется асинхронно и начинается при обнаружении "грязных" объектов отображения. Пример: после получения содержания из сети и его добавления в дерево DOM в дереве отображения появляется новый объект.

Компоновка обычно выполняется по описанной ниже схеме.

В Firefox в качестве параметра компоновки используется объект nsHTMLReflowState. Помимо прочих значений, он определяет ширину родительского элемента.
В результате компоновки в Firefox создается объект nsHTMLReflowMetrics, содержащий значение высоты объекта отображения.

Ширина объекта отображения рассчитывается на основе ширины контейнера, свойства width объекта отображения, размеров полей и рамок.
Рассмотрим, как вычисляется ширина следующего элемента div:

В WebKit она будет рассчитана так (метод calcWidth класса RenderBox).

• Ширина контейнера представляет собой большее из значений availableWidth и 0. В данном случае значение свойства availableWidth равно значению contentWidth, которое рассчитывается следующим образом: clientWidth() - paddingLeft() - paddingRight() Значения свойств clientWidth и clientHeight соответствуют внутренним размерам объекта, исключая рамку и полосу прокрутки.
• Ширина элементов определяется атрибутом width объекта style. Ее абсолютное значение рассчитывается на основе процентной доли от ширины контейнера.
• Добавляются горизонтальные рамки и отступы.

Эти данные хранятся в кэше на случай, если потребуется перекомпоновка без изменения ширины.

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

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

В Firefox процесс оптимизирован за счет того, что элементы, которые будут скрыты (например, под непрозрачными элементами), не добавляются.

Эта страница переведена на японский. Дважды!