Браузер и его функции. Браузер — что это такое простыми словами и какой из них самый лучший. Синхронная и асинхронная компоновка

Браузер (web-browser, графический обозреватель) – это программа, с помощью которой Интернет-пользователь может посещать и смотреть веб-сайты на компьютерах и гаджетах. По сути, он является переводчиком стилевой разметки CSS, Java скриптов и языка HTML, обрабатывает http запросы пользователей, получает данные от сервера и выдает им запрашиваемые страницы. Проще говоря, браузер – программа, посредством которой вы загрузили наш сайт и читаете данную статью.

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

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

Первым браузером, получившим графический интерфейс для отображения не только текстов, таблиц и списков, но и картинок, стал Mosaic, созданный в 1993 году компанией NCSA для ОС Windows. В принципе, его можно считать «первопроходцем» среди всех современных браузеров. Тогда Mosaic был чрезвычайно популярен, но спустя 4 года после создания, в связи с потерей рынка, проект был закрыт.

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

Подобный успех не мог остаться незамеченным, и вскоре “подсуетилась” уже известная тогда компания Microsoft. Они понимали, что от них уплывает крупная рыба. Однако вскоре гении Майкрософт переделали исходный код первого браузера, создав собственный – Internet Explorer.

Именно IE, будучи интегрированным с ОС Windows и доступным пользователям совершенно бесплатно, отодвинул лидеров рынка на второй план. Он стал неотъемлемой частью обновления для ОС Windows, и люди лишились выбора. Но никто не возмущался, ведь мало кто знал про альтернативные варианты.

Благодаря монополии Internet Explorer быстро захватил 95% рынка и заставил Netscape прекратить свою деятельность, но лишь ненадолго. Вскоре в свободном доступе появился код под названием Mozilla public License, на основе которого был создан абсолютно новый браузер Mozilla Firefox, ставший сегодня одним из лидеров на рынке. Из-за отсутствия конкуренции, проект Майкрософта никак не развивался, так как поначалу юзеры не знали о более лучших альтернативах, коим стал Mozilla Firefox.

Та же Opera появилась уже в далеком 95 году прошлого века, но популярна она была только в странах СНГ. А все потому, что в бесплатном доступе на зарубежном рынке она появилась уже в 2005 году.

Какие функции выполняет браузер?

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

Для просмотра кодировки сайта нужно нажать на его странице правой кнопкой мыши и выбрать пункт «Посмотреть код». Нормальная работа и загрузка страниц веб-ресурсов во многом зависит именно от правильного исходного кода.

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

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

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

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

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

Темы. Меняют визуальное оформление фоновых картинок и прочих элементов обозревателя.

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

7 популярных браузеров

Самый старый из современных браузеров, входит в ОС Windows. В прошлом веке на него пришлась практически вся доля рынка. Но затяжное и безоговорочное лидерство привело к регрессии веб-обозревателя, чем быстро воспользовались его конкуренты. IE от 6 до 8 версии включительно – это ужас для вебмастеров. Они не отвечают никаким современным требованиям для создания сайтов. Последняя 11-я версия доступна исключительно для Windows 7 и 8. Внимания заслуживает лишь Internet Explorer 9 – более-менее стабильная, быстрая и неплохо защищенная версия. Хотя и она не сравнится с другими продвинутыми аналогами.

Один из самых новых популярных браузеров. В 2015 году с выходом Windows 10, компания Microsoft представила свой новый и современный браузер Edge. В отличие от IE, он постоянно обновляется и стал стандартным браузером для Windows 10 заменив полностью устаревший Internet Explorer.

Нынешний лидер, разработанный самой мощной компанией в мире – поисковиком Google. Для отображения страниц интернет-ресурсов используется движок WebKit. Хром достиг вершин немыслимыми темпами, так как появился лишь в 2008 году – значительно позже своих конкурентов. Сейчас он занимает около 50% всего рынка. Обозреватель радует пользователей своей скоростью, надежной защитой, простым и стильным оформлением.

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

5. Opera

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

6. Яндекс.Браузер

Разработка от Яндекса, появился в 2012 году. Первые версии приложения расстраивали рядом недостатков. Однако в новых версиях они были исправлены, и сейчас современный многофункциональный веб-обозреватель составляет более чем достойную конкуренцию Хрому. Его основное отличие: быстрота работы (турбо режим), чтение статей без загрузки графики, встроенная защищенная технология protect.

Из названия можно догадаться, что это детище Apple. Он содержится в ОС iOS и Mac OS. В данный момент этот браузер нельзя скачать для Windows - компания Apple убрала такую возможность со своего сайта.

Заключение

Мы перечислили самые популярные современные браузеры. Но на рынке существует и другие мелкие браузеры:

• Chromium;
• Нихром;
• Comodo Dragon;
• Интернет@mail.ru;
• CoolNovo (Chrome Plus);
• SRWare Iron.

Раньше Internet Explorer почивал на лаврах, ведь Microsoft буквально заставлял пользователей ОС Windows пользоваться своим браузером, в то время как были достойные аналоги. Однако светлый ум и интересные нововведения талантливых разработчиков различных компаний, облегчающие пользователем использование Интернета, взяли верх, и сегодня доля монополиста на мировом рынке резко сокращается. На сегодняшний день самым успешным является Google Chrome, но конкуренция порождает прогресс, и никому неизвестно, кто уже завтра сможет предложить нам более крутой браузер.

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

Нет похожих статей.

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

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

Веб-разработчик, знакомый с внутренним механизмом работы браузеров, принимает более квалифицированные решения и понимает, почему следует выбрать те или иные средства . Это достаточно объемный документ, однако мы рекомендуем читать его как можно внимательнее и гарантируем, что вы не пожалеете об этом. Пол Айриш, 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.

Структура верхнего уровня

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

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

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

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

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

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

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

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

Рисунок . Основные компоненты браузера.

Следует отметить, что 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. Одни части документа анализируются и выводятся на экран, в то время как другие только передаются по сети.

Примеры работы Рисунок . Схема работы модуля отображения WebKit. Рисунок . Схема работы модуля отображения Mozilla Gecko ().

Как видно из рисунков 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 и узлов атрибутов. DOM – объектная модель документа (Document Object Model) – служит для представления HTML-документа и интерфейса элементов HTML таким внешним объектам, как код JavaScript.
В корне дерева находится объект Document .

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

Hello World

Дерево DOM для этой разметки выглядит так: Рисунок . Дерево DOM для разметки из примера.

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

Алгоритм синтаксического анализа

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

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

Язык имеет "щадящий" характер.

В браузерах заложены механизмы обработки некоторых частых ошибок в коде HTML.

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

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

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

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

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

Рисунок . Этапы синтаксического анализа кода HTML (источник: спецификация HTML5). Алгоритм лексического анализа

Результатом работы алгоритма является токен 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" . При получении токена конца файла анализ завершается.

Рисунок . Построение дерева для кода HTML из примера. Действия после синтаксического анализа

На этом этапе браузер помечает документ как интерактивный и начинает анализ отложенных скриптов, которые необходимо выполнить после завершения анализа документа. Состояние документа затем меняется на "готово", и вызывается событие 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 означает пробел). Набор правил содержит одно или несколько объявлений, разделенных точкой с запятой. Они заключены в фигурные скобки. Определения понятий "объявление" и "селектор" будут даны ниже.

Синтаксический анализатор CSS в WebKit

В WebKit для автоматического создания синтаксических анализаторов CSS используются генераторы . Как уже говорилось, Bison служит для создания восходящих анализаторов, при работе которых входная последовательность символов сдвигается вправо. В Firefox используется нисходящий анализатор, разработанный организацией Mozilla. В обоих случаях файл CSS разбирается на объекты StyleSheet, содержащие правила CSS. Объект правил 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 Объекты обработки соответствуют элементам DOM, но не идентичны им. Невизуальные элементы DOM не включаются в дерево отображения (примером может служить элемент head). Кроме того, в дерево не включаются элементы, у которых для свойства display задан атрибут none (элементы с атрибутом hidden включаются).

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

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

Рисунок . Дерево отображения и соответствующее ему дерево DOM (). Viewport (область просмотра) – это главный контейнер. В WebKit он представлен объектом RenderView. Процесс построения дерева

В 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

this is a message

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

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

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

Применение правил в порядке приоритета

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

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

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

Объявления браузера

Обычные объявления пользователя

Обычные объявления автора

Важные объявления автора

Важные объявления пользователя

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

Специфичность

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

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

Объединение этих значений в последовательность a-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 команды инкрементной компоновки помещаются в очередь, а затем планировщик вызывает их все вместе. В WebKit выполнение инкрементной компоновки также откладывается, чтобы обработать целое дерево за один цикл и перекомпоновать все "грязные" объекты отображения.
Скрипты, запрашивающие данные о стилях, такие как offsetHeight, могут привести к синхронному выполнению инкрементной компоновки.
Глобальная компоновка обычно выполняется синхронно.
Иногда компоновка выполняется в обратном вызове после исходной компоновки, потому что меняются значения некоторых атрибутов, таких как положение прокрутки. Оптимизация Если компоновка вызвана событием resize или изменением положения (но не размера) объекта отображения, размеры объекта извлекаются из кэша и не рассчитываются заново.
Если меняется только часть дерева, перекомпоновка всего дерева не выполняется. Это происходит, если изменение носит локальный характер и не влияет на окружающие объекты, например при вводе текста в текстовые поля (в остальных случаях ввод каждого символа вызывает перекомпоновку всего дерева). Процесс компоновки

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

Родительский объект отображения определяет собственную ширину.

Родительский объект отображения обрабатывает дочерние элементы:

определяет положение дочернего объекта отображения (задает его координаты x и y);

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

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

Биты больше не помечаются как "грязные".

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

Расчет ширины

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

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

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

До этого момента мы занимались расчетом предпочтительной ширины. Теперь рассчитаем ее минимальное и максимальное значение.
Если предпочтительная ширина превышает максимальную, то используется значение максимальной, а если она меньше минимальной (самого маленького неделимого объекта) – значение минимальной ширины.

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

Перенос строк

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

Отрисовка

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

Глобальная и инкрементная отрисовка При глобальной отрисовке все дерево отрисовывается целиком, а при инкрементной – только отдельные объекты отображения, не влияющие на остальные части дерева. Измененный объект отображения помечает свой прямоугольник как недействительный. Операционная система расценивает его как "грязную" область и вызывает событие paint. Области при этом объединяются, чтобы отрисовку можно было выполнить сразу для всех. В браузере Chrome отрисовка выполняется несколько сложнее, так как объект отображения находится вне главного процесса: Chrome в некоторой степени имитирует поведение операционной системы. Компонент визуального представления прослушивает эти события и делегирует сообщение корневому объекту отображения. Все объекты дерева по очереди проверяются, пока не будет найден нужный. Затем выполняется отрисовка его самого и, как правило, его дочерних элементов. Порядок отрисовки Порядок отрисовки определен в спецификации CSS2 . Фактически он соответствует порядку помещения элементов в . Порядок отрисовки играет важную роль, так как стеки отрисовываются задом наперед. Порядок добавления блочных объектов в стек таков:

Цвет фона

Фоновое изображение

Рамка

Дочерние объекты

Внешние границы

Список отображения Firefox В Firefox на основе анализа дерева отображения создается список отображения для отрисовываемого прямоугольника. В нем содержатся объекты отображения этого прямоугольника, расположенные в нужном порядке (сначала фон, потом рамки и т. д.). Благодаря этому для повторной отрисовки фона, фоновых изображений, рамок и т. д. достаточно пройти дерево все один раз.

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

Хранилище прямоугольников в WebKit Перед повторной отрисовкой старый прямоугольник сохраняется в WebKit как растровое изображение, а затем отрисовываются только различия между старым и новым прямоугольником. Динамические изменения При наступлении изменений браузеры стараются не выполнять лишних операций. Например, при изменении цвета одного элемента остальные не отрисовываются заново. При изменении положения элемента выполняется повторная компоновка и отрисовка его самого, его дочерних элементов и, возможно, других объектов того же уровня. При добавлении узла DOM выполняется его повторная компоновка и отрисовка. Серьезные изменения, такие как увеличение размера шрифта элемента html, ведут к очистке кэша и повторной компоновке и отрисовке целого дерева. Потоки модуля отображения Модуль отображения работает с одним потоком: в нем выполняется почти все, кроме сетевых операций. В Firefox и Safari это основной поток браузера, в Chrome – основной процесс вкладки.
Сетевые операции могут выполняться в нескольких параллельных потоках. Количество параллельных соединений ограничено и обычно составляет от 2 до 6 (например, в Firefox 3 их используется 6). Цикл событий Основной поток браузера представляет собой цикл событий – бесконечный цикл, который поддерживает рабочие процессы. Он ожидает отправки событий (таких как layout и paint), чтобы их обработать. Так выглядит код Firefox для основного цикла событий: while (!mExiting) NS_ProcessNextEvent(thread); Визуальная модель CSS2 Холст Другие языки

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

Первое слово, которые слышит любой новичок при входе в интернет — это браузер. Что же такое браузер? Какие они бывают, как выбрать лучший? Вопросов появляется очень много, а вот ответов на них зачастую в сети нет или их приходится собирать по частям. Я же собираюсь написать полную статью на эту тему, чтобы любой новичок прочтя ее уяснил для себя все от А до Я. Например, вам нужно будет объяснить основы серфинга в интернете своей бабушке, которая далека от компьютера как Земля от Юпитера. Это не проблема! Просто откройте ей мою статью и пусть она просвещается! ;)

Итак, вот небольшой план нашего сегодняшнего урока — лекции — записки, кому как больше нравится.

Вот по этому плану и будем двигаться, чтобы ничего не пропустить. После этого урока у вас не должно остаться белых пятен в данной теме. Для начала я приведу парочку определений и описаний термина «Браузер», так как каждый стремится дать ему свое толкование, но оно зачастую может быть ошибочным или неполным. Если же привести сразу несколько объяснений, то может получиться полная картина. Затем, расскажу краткую историю развития браузеров, чтобы понимать с чего все начиналось и к чему идет. Только зная историю, хотя бы краткую, можно понимать современное положение дел. Это правило работает везде: и в политической сфере и в компьютерной и в правовой и в какой бы то ни было еще. Далее будут приведены ВСЕ современные браузеры, которые имеют какой-то вес на рынке. Ведь зачем вам знать о какой-то экзотической программе, которой пользуется кучка гиков? Я вот думаю, что незачем. Ну все, мы начинаем.

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

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

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

Краткая история браузеров

Самым первым обозревателем с графическим интерфейсом является Mosaic от фирмы NCSA. Но, несмотря на то, что он является пионером в области обозревателей, развитие Мозаика было прекращено в 1997 году из за потери рынка. Сейчас я объясню как это все произошло. Дело в том, что некоторые работники из NCSA перекочевали в Netscape и начали разработку нового, более продвинутого браузера — Netscape Navigator. Он должен был лучше обеспечивать поддержку стандартов и быть гораздо удобнее в использовании. У них это получилось и их продукт имел успех.

На это обратила внимание небезызвестная компания Microsoft. Логично, ведь такой огромный кусок пирога практически уплывал у них из рук. Но ситуация быстро поменялась, причем совершенно в противоположную сторону, когда Майкрософт на основе открытого исходного кода первого графического обозревателя Мозаик быстро собрал свой браузер — Interner Explorer. Они включили его в обязательное обновление для своей операционной системы Windows 95 и дело было в шляпе. Теперь каждый пользователь был практически лишен права выбора, в том числе и из за своей неграмотности в этом вопросе. Вот и весь секрет ошеломляющего успеха IE — монополия. Детище компании Мойкрософт быстро захватило нишу и имело порядка 95% рынка. В связи с этим Netscape была вынуждена закрыть свой проект. Но тут они предприняли довольно правильный шаг, а именно опубликовали код под свободной лицензией MPL (что расшифровывается как Mozilla public License). Это был большой вклад в борьбу с монополией.

Именно на основе этого кода в последствии появился совершенно новый проект Mozilla Firefox, который был вынужден развиваться быстрее ИЕ, чтобы отвоевывать рынок. А проект Microsoft’a тем временем был заброшен и практически не совершенствовался. Им это было и не нужно, ведь у пользователей практически не было выбора, вернее подавляющее большинство и не знало об альтернативах в лице той же Мозиллы. В том же 1995 году появился еще один браузер — Opera, которая благодаря своей бесплатности (до 2005 года распространялась условно-бесплатно) набирала популярность в странах СНГ. IE же продолжил свое развитие только к 7й версии.
Таким образом, мы плавно подошли к следующему пункту.

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

Google Chrome . Это браузер, который разрабатывается гигантом Google на основе их же свободного браузера Chromium. Он использует для отображения получаемых веб-страниц движок WebKit (Вебкит). Первая публичная доступная бета-версия хрома для операционной системы Microsoft Windows была выпущена 2 сентября 2008 года. Немногим позже, 11 декабря 2008 года вышла стабильная версия. Если верить данным StatCounter, то браузер находится на данный момент на первом месте по популярности в мире, а его рыночная доля в мае 2012 года составила 32,43 %. Что же касается рунета, то LiveInternet сообщает, что в мае 2012 года Chrome занимает первое место - его доля составляет порядка 20,6 %. На январь 2014 года — 32%.

Распространяется бесплатно под публичной лицензией. Входит в набор программ Mozilla Application Suite, которым занимается Mozilla Corporation. Если верить данным Statcounter, то файрфокс является третьим по популярности в мире, но вторым среди свободного ПО, таким образом в мае 2012 года его рыночная доля составила 25,55 %. Стоит также отметить, что данный обозреватель имеет особенный успех, например, в Германии и Польше. Там он занимает 55 % и 47 % рынка соответственно. Что же касается России, то здесь Firefox занимает третье место по популярности с долей 23,73 % пользователей к июлю 2012 года. А в январе 2014 уже всего 14%.

Internet Explorer . Серия браузеров, разработкой которых занимается корпорация Microsoft с 1995 года. Он входит в комплект операционных систем семейства Windows. IE, по данным сервиса LiveInternet, в России к марту 2012 года занимает уже третье место c 15,6 % пользователей. Как уже было сказано выше, первое место у браузера Google Chrome. Стоит принимать во внимание, что Internet Explorer установлен в практически всех крупных и средних компаниях как единственный браузер в целях политики безопасности организаций. На самом деле, альтернативные обозреватели ничуть не хуже в этом плане, просто стереотип «раз IE разрабатывает Microsoft, значит это серьезный продукт» плотно засел в умы руководства, которое не хочет и слышать о том, что на самом деле ситуация совсем иная. Зачастую на рабочих компьютерах установлены 5 и 6 версии IE, который имеет незакрытые уязвимости трех-четырехлетней давности.

Opera . Веб-браузер и программный пакет для работы в сети Интернет. Выпускается компанией Opera Software. Был разработан в 1994 году группой энтузиастов из маленькой норвежской компании Telenor. Уже с 1995 года это продукт компании Opera Software, которая была основана авторами первой версии. Известно, что суммарная рыночная доля Opera и Opera Mobile в апреле 2012 порядка 2.3 %. В России же процент пользователей обозревателя гораздо выше чем в общем по миру. Так, на март 2012 Opera вместе с мобильной версией Opera Mini занимала первое место в России с 32,1 % пользователей. Но уже к 2013 году все изменилось. Качество мобильной версии браузера упало, а появление десктопной версии Опера 18, где закладки превратились в нечто очень неудобное, Опера стала резко терять своих поклонников. На январь 2014 года — 9%.

Apple Safari . Браузер, который был разработан корпорацией Apple. Входит в состав операционных систем Mac OS X и iOS, естественно. Также абсолютно бесплатно распространяется для операционных систем Windows. Занимает 4 место по числу пользователей (доля на ноябрь 2011 года - 6,66 %). В русскоговорящем сегменте интернета его доля составляет 8% на январь 2014.

Общий график популярности браузеров в мировом Интернете:


Как вы можете видеть — график подтверждает все написанное мной. IE с самого начала был практически монополистом в этой области. Но постепенно его доля сокращалась в связи с низким качеством работы. Он постоянно зависал, не поддерживал вкладки очень долгое время (каждая страница открывалась в новом окне, но зависание 1 окна приводило к падению всех). FireFox с момента своего появления был горячо любим активными пользователями, которые видели в этом браузере основного конкурента Internet Explorer’y. Но с приходом на рынок Chrome все стало резко меняться и на данный момент браузер от Google полностью доминирует на этом рынке.
Вот и все, остальные браузеры, на мой сугубо личный взгляд, не достойны внимания. Я не истина последней инстанции, просто выражаю свои мысли.

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

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

Окно в интернет

Для начала придется изучить само понятие браузера. Виды браузеров и возможности оных - вопрос уже более простой. Для начала важно понимать, о чем именно идет речь. С каким софтом мы имеем дело?

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

Стандартный набор

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

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

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

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

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

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

"Хром"

Начнем с самого популярного, распространенного и успешного варианта. Речь идет о браузере под названием Google Chrome. Собственно, это детище известного "Гугла". Появился подобный интернет-обозреватель не так давно, примерно в 2008 году. Но уже сейчас он завоевал сердца многих пользователей.

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

Если вы много работаете с "Гуглом", то это - идеальный вариант для вас. Здесь есть специальное меню для работы с "Гугл"-аккаунтом. Очень удобно, если задуматься. К слову, подходит "Хром" даже для слабеньких компьютеров. Именно этим он и привлекает многих. браузеров, как правило, требуют в несколько раз больше компьютерных ресурсов, нежели Chrome.

"Мозилла"

Тем не менее конкуренция среди интернет-обозревателей все равно имеется. На втором месте стоит Mozilla Firefox. Данный контент чем-то напоминает "Хром", но существует дольше, чем детище "Гугла". Правда, является "Мозилла" более требовательной к компьютеру. Она загружает систему в большей степени. Тем не менее остается по сей день популярной и востребовнной.

Почему? Все виды оных сейчас мы и изучаем) имеют свои плюсы и минусы. У "Хрома" это низкая требовательность и скорость работы. А у "Мозиллы" - быстродействие и огромные возможности в области настроек. То есть, функционал софта. Именно Mozilla Firefox имеет расширенные настройки, позволяющие максимально точно пользоваться всеми возможностями утилиты. В принципе, если вы не являетесь фанатом "Гугла", а компьютер у вас не слишком старый, можете воспользоваться "Мозиллой".

"Опера"

Какие еще есть браузеры? Виды их разнообразны. Но среди самых популярных еще выделяют "Оперу". Это довольно старый, но не менее распространенный браузер. Основное его преимущество - функционал софта. Он расширен до максимума. После установки приложения пользователь получает целый набор полезных расширений для браузера, который поможет расширить стандартные функции. То есть, не нужно самостоятельно скачивать и устанавливать что-либо. Множество настроек, функций и кнопок - то, что нужно продвинутому пользователю.

Только вот Opera из-за возможностей к компьютеру требовательна. Более того, начинающему трудно разобраться с этим браузером. Ведь в нем, как уже было сказано, очень много разнообразных функций спрятано. В принципе, неплохой вариант для тех, кто с интернетом уже знаком. Разумеется, компьютер требуется помощнее, чем для той же "Мозиллы". Но это не такая уж и проблема.

"Эксплорер"

Мы почти разобрали все популярные виды браузеров. Возможности каждой утилиты - тоже. Теперь стоит обратить внимание на самый популярный, а точнее, на постоянно встречающийся вариант. Он не слишком сильно радует пользователей, но иногда выбора просто нет. Речь идет о программе под названием Internet Explorer.

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

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

"Яндекс"

В последнее время популярность стал обретать еще один вариант. Браузеры (виды их мы почти полностью изучили вместе с возможностями каждого предложения) все бесплатны и доступны. Многие программисты стараются создать и продвинуть свой интернет-обозреватель. Сравнительно недавно появился "Яндекс.Браузер". Это детище Yandex.

Собственно, он схож чем-то с "Хромом". Только вот "Гугл" предлагает более простой и удобный интерфейс. Кроме того, функционал у Chrome побольше, чем у "Яндекса". Хотя быстродействие, безопасность и требовательность к компьютеру почти не отличается.

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

Apple

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

Для таких пользователей имеет место свой собственный, "фирменный" браузер - Apple Safari. Никакими особенностями не наделен. Это просто интернет-обозреватель от компании "Эппл" для MacOS. Что-то вроде "Эксплорера". Только работает он лучше, быстрее и не раздражает пользователей.

Обычно те, кто пользуется Apple, именно с "Сафари" работают в интернете. Обладает самыми обычными, ничем не обремененными настройками, понятным и неброским интерфейсом. Так что обратить внимание на него можно. Особенно если у вас есть MacOS.

Возможности

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

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

Какими могут быть плагины и расширения? Любыми. Тут можно отыскать и защиту от рекламы, и приложения для скачивания видео/музыки из социальных сетей, и просто какие-нибудь мини-игры, а также развлекательный софт. В общем, список можно продолжать бесконечно долго. А значит, возможности браузеров ничем не ограничены. Разве что ресурсами вашего компьютера и креативностью разработчиков.

Что выбрать

Какой браузер выбирать для работы? Это решает каждый пользователь для себя сам. Во всяком случае, предпочтение отдается безопасным и быстрым вариантам. Если вы пользуетесь "Гугл"-аккаунтом или просто одноименным поисковиком, и вам нужен быстрый софт, который гарантирует безопасность работы в сети - выбор за Chrome. На втором месте - "Яндекс.Браузер" (разумеется, если вы пользуетесь возможностями данного хостинга). Также рекомендуется остановить выбор на "Мозилле".

"Опера" - это браузер для продвинутых пользователей. Новичкам с ним связываться не рекомендуется. А вот от "Эксплорера" предпочтительнее отказаться. Именно этот софт, как правило, очень много проблем пользователям приносит. Учитывайте данный фактор при выборе браузера. Окончательное решение остается только за вами!

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

Подобные документы

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

презентация , добавлен 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