Браузер (от англ. browse - просматривать, листать) - это специальная программа, позволяющая просматривать содержимое сети Интернет. Она позволяет получить доступ ко всем информационным ресурсам сети. С помощью браузера можно просматривать и загружать изображения, звуковые и видео файлы, различную текстовую информацию (электронные книги, новости, журналы, анекдоты) и т.д.
Существует несколько видов браузеров:
браузер режима командной строки. К этому типу относятся самые ранние браузеры. Они не дают возможности просматривать текст и графику. Такие браузеры поддерживают перемещение только с использованием цифровых адресов (IP). В настоящее время практически не используются, поэтому подробно рассматривать их я не буду.
полноэкранный браузер. Текстовый браузер без поддержки мультимедийных (картинки, анимация и т.п.) ресурсов сети Интернет. С помощью него можно просматривать только текст и ссылки. Так как большинство пользователей привыкло путешествовать по Интернету с помощью браузеров поддерживающих мультимедиа, не стоит окончательно забывать и те, которые отображают только текст. Конечно, браузеры такого вида используются довольно редко, но скорость загрузки страниц у них впечатляет. Без графических и оформительных элементов, а также без таблиц, многие страницы загружаются практически мгновенно. Один из самых популярных полноэкранных браузеров является Lynx, который входит в состав операционной системы Lynix.
браузер с поддержкой мультимедиа. Самые распространенные и популярные браузеры сегодня. Позволяют работать практически со всеми видами информации, представленной в Интернете.99% пользователей глобальной сети Интернет интенсивно и каждодневно используют возможности этих браузеров. Наиболее часто используемые: Internet Explorer, Opera, Mozilla, Netscape Navigator.
Существует еще так называемые браузеры-дополнения. Они являются надстройками над полнофункциональными браузерами. Чаще всего разработчиками дополнений используется Internet Explorer. Надстройки используют для отображения сайтов "движок” этого браузера. Поэтому их возможности в этой области полностью идентичны с Internet Explorer. Дополнения всего лишь изменяют интерфейс и добавляют некоторые функции, которые разработчики из Microsoft обошли своим вниманием.
Декоративное оформление визиток художественными элементами
Визитная карточка - одна из составляющих имиджа делового человека. Она является выражением не только индивидуального стиля и вкуса, но и фирменного, корпоративного стиля. Поэтому лучше...
Изучение и анализ программного обеспечения, используемого в организации ООО "Крепость-Абакан" для решения профессиональных задач
Одно из наиболее вредных часто встречаемых высказываний состоит в том, что некто «пишет программное обеспечение». Получается так, будто программное обеспечение это что-то вроде письма. Можно писать программу, но не программное обеспечение...
Информационная система ГИБДД
Слово «Алгоритм» происходит от algorithmi - латинского написания имени аль-Хорезми, под которым в средневековой Европе знали величайшего математика из Хорезма (город в современном Узбекистане) Мухаммеда бен Мусу, жившего в 783-850 гг...
Информационная система гостиничного комплекса
Алгоритм - это последовательность команд управления, каким - либо исполнителем. Любой алгоритм составляется для конкретного исполнителя в рамках его системы команд. Алгоритм должен быть представлен таким образом, чтобы исполнитель...
Информационное оружие
Информационные данные как основа формирования экономических информационных систем
Носитель информации - это физическая среда, непосредственно хранящая информацию. Основным носителем информации для человека является его собственная биологическая память (мозг человека)...
Использование современных информационных технологий в администрации Центрального округа города Омска
Использование современных информационных технологий в работе муниципального образования на примере администрации Карасунского внутригородского округа города Краснодара
Современный мир окружен достаточно широким спектром информационных технологий. Каждый человек соприкасается с информационными технологиями несколько раз за день, будь то факс, компьютер или телефон...
Компьютерная графика. Спецэффекты
Компьютерная графика - это область информатики, занимающаяся проблемами получения различных изображений (рисунков, чертежей, мультипликации) на компьютере...
Модуль "Финансово-расчетные операции" ERP-системы "Галактика"
Проектирование и разработка тестирующего приложения
Возможности применения компьютеров в учебном процессе, весьма многообразны. Он может служить для моделирования изучаемых явлений или систем, для реализации учебных игр, применяться для выполнения вычислений, для редактирования текстов...
Разработка базы данных для методического кабинета ГБОУ СПО СО "Каменск-Уральский радиотехникум"
В литературе предлагается множество определений понятия "база данных", отражающих скорее субъективное мнение тех или иных авторов, однако общепризнанная единая формулировка отсутствует...
Создание комплекса компоновки, структурирования, автоматической генерации и проверки тестовых работ
Тест представляет собой стандартизованный метод диагностики уровня и структуры подготовленности. В таком тесте все испытуемые отвечают на одни и те же задания, в одинаковое время...
Технология работы с графической информацией. Системы компьютерной графики
компьютерный графика растровый векторный Компьютерная графика - раздел информатики, занимающийся проблемами создания и обработки на компьютере графических изображений...
Характеристика информационного оружия
Информационное оружие, согласно одному из существующих определений - это комплекс программных и технических средств...
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 , который внедряет стандарты для Интернета.
Многие годы браузеры отвечали лишь части спецификаций, и для них создавались отдельные расширения. Для веб-разработчиков это означало серьезные проблемы с совместимостью. Сегодня большинство браузеров в большей или меньшей степени отвечает всем спецификациям.
Пользовательские интерфейсы разных браузеров имеют много общего. Основные элементы интерфейса браузера перечислены ниже.
Как ни странно, спецификации, которая бы определяла стандарты пользовательского интерфейса браузера, не существует. Современные интерфейсы являются результатом многолетней эволюции, а также того, что разработчики частично копируют друг друга. В спецификации 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. Одни части документа анализируются и выводятся на экран, в то время как другие только передаются по сети.
Примеры работы Рисунок . Схема работы модуля отображения 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 практически идентична разметке. Рассмотрим пример разметки:
Дерево DOM для этой разметки выглядит так:
Рисунок
. Дерево DOM для разметки из примера.
Под словами "дерево содержит узлы DOM" подразумевается, что дерево состоит из элементов, которые реализуют один из интерфейсов DOM. В браузерах применяются специфические реализации, обладающие дополнительными атрибутами для внутреннего использования.
Алгоритм синтаксического анализаКак уже говорилось в предыдущих разделах, синтаксический анализ кода HTML невозможно выполнить с помощью стандартных нисходящих или восходящих анализаторов.
Ниже перечислены причины этого.
Так как стандартные анализаторы не подходят для 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, которым соответствует сразу несколько визуальных объектов. Обычно это элементы со сложной структурой, которые невозможно описать одним-единственным прямоугольником. Например, элементу 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 описанным ниже образом.
Основание системы счисления определяется самым большим числом в любой из категорий.
Например, если 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).
Эти данные хранятся в кэше на случай, если потребуется перекомпоновка без изменения ширины.
Перенос строкЕсли в процессе компоновки объект отображения обнаруживает, что необходим перенос строки, компоновка останавливается, а родительскому элементу передается запрос на перенос строки. Родительский элемент создает дополнительные объекты отображения и выполняет их компоновку.
ОтрисовкаНа этапе отрисовки для каждого объекта отображения по очереди вызывается метод paint и их содержание выводится на экран. Для отрисовки используется компонент инфраструктуры пользовательского интерфейса.
Глобальная и инкрементная отрисовка При глобальной отрисовке все дерево отрисовывается целиком, а при инкрементной – только отдельные объекты отображения, не влияющие на остальные части дерева. Измененный объект отображения помечает свой прямоугольник как недействительный. Операционная система расценивает его как "грязную" область и вызывает событие paint. Области при этом объединяются, чтобы отрисовку можно было выполнить сразу для всех. В браузере Chrome отрисовка выполняется несколько сложнее, так как объект отображения находится вне главного процесса: Chrome в некоторой степени имитирует поведение операционной системы. Компонент визуального представления прослушивает эти события и делегирует сообщение корневому объекту отображения. Все объекты дерева по очереди проверяются, пока не будет найден нужный. Затем выполняется отрисовка его самого и, как правило, его дочерних элементов. Порядок отрисовки Порядок отрисовки определен в спецификации CSS2 . Фактически он соответствует порядку помещения элементов в . Порядок отрисовки играет важную роль, так как стеки отрисовываются задом наперед. Порядок добавления блочных объектов в стек таков:В Firefox процесс оптимизирован за счет того, что элементы, которые будут скрыты (например, под непрозрачными элементами), не добавляются.
Хранилище прямоугольников в WebKit Перед повторной отрисовкой старый прямоугольник сохраняется в WebKit как растровое изображение, а затем отрисовываются только различия между старым и новым прямоугольником. Динамические изменения При наступлении изменений браузеры стараются не выполнять лишних операций. Например, при изменении цвета одного элемента остальные не отрисовываются заново. При изменении положения элемента выполняется повторная компоновка и отрисовка его самого, его дочерних элементов и, возможно, других объектов того же уровня. При добавлении узла DOM выполняется его повторная компоновка и отрисовка. Серьезные изменения, такие как увеличение размера шрифта элемента html, ведут к очистке кэша и повторной компоновке и отрисовке целого дерева. Потоки модуля отображения Модуль отображения работает с одним потоком: в нем выполняется почти все, кроме сетевых операций. В Firefox и Safari это основной поток браузера, в Chrome – основной процесс вкладки.Эта страница переведена на японский. Дважды!
Компьютера и интернета – это браузер. Что такое браузер? Дадим сразу определение:
Что такое браузерБраузер (или интернет-браузер)– это программа на компьютере, с помощью которой можно просматривать страницы сайтов в интернете, переходить между страницами сайтов и самими сайтами, искать информацию, скачивать файлы, просматривать видео, слушать музыку, общаться на форумах и социальных сетях и т.д.
Таким образом, браузер – это серьезная программа, которая позволяет пользователю обеспечить любое взаимодействие с интернет сайтами и является одной из самых часто используемых программ на компьютере.
Браузер – это не конкретное название одной программы, а общее название приложения, предназначенного, как было сказано выше, для просмотра сайтов и взаимодействия с ними. Например, программа Internet Explorer, входящая в состав Windows, является браузером под названием Internet Explorer.
Как и большинство компьютерных терминов, слово «браузер» имеет англоязычные корни и происходит от английского «web-browser», что в переводе означает – просмотрщик интернета, что достаточно ясно говорит о его назначении.
Браузер, в том или ином виде установлен на любом устройстве, которое дает возможность просматривать сайты в интернете, например смартфон или обыкновенный сотовый телефон. Даже современный телевизор, имеющий возможность подключения к интернету, имеет браузер.
Наиболее популярные браузерыПрограмм браузеров существует большое количество, но самыми популярными со временем стали лишь несколько: Google Ghrome, Mozilla Firefox, Internet Explorer, Opera, Apple Safari.
Нужно заметить, что нет смысла иметь на компьютере все 5 браузеров. Если вы только осваиваете интернет, то можно посоветовать установить рассмотренные программы (кроме имеющегося уже Internet Explorer или Edge), поработать в них, сравнить преимущества и недостатки, и с учетом сложившегося мнения оставить какой-нибудь один.
Думаю, в сегодняшнее время, подавляющая масса персональных компьютеров имеют подключение к глобальной сети интернет, а количество пользователей всемирной паутины неумолимо ежегодно растет. По данным некоторых агентств, сейчас в России, число пользователей глобальной сети превышает 60% всего населения страны. Поэтому, совсем не удивительно, что многие пользователи, все свое основное время за компьютером, проводят в сети Интернет.
Что бы попасть в глобальную сеть, помимо собственно физического подключения к ней, необходима специальная программа (программы), которая позволит вам комфортно просматривать любимые веб-сайты и содержащиеся на них веб-страницы. Называются такие программы браузерами (иногда их еще называют обозревателями), от английского слова «browse», что можно перевести, как «просматривать».
Не смотря на то, что практически все современные браузеры являются бесплатными - это довольно сложные программы, наделенные большим количеством функций, а разработкой наиболее популярных решений занимаются множество специалистов. Основной их задачей является сделать серфинг в сети не только комфортным, но и безопасным.
НЕМНОГО ИСТОРИИ
На сегодняшний момент существует достаточно большое количество различных браузеров от разных разработчиков, но из их общей массы можно выделить пять наиболее популярных продуктов - Internet Explorer, Mozilla Firefox, Google Chrome, Opera и Safari.
В конце 90-х годов основным браузером для большинства был Netscape Navigator. Но политика компании Microsoft, кардинально изменила расклад сил в этой сфере на долги годы. Именно в это время было принято решение поставлять InternetExplorer вместе с системой Windows, что буквально выдавило всех конкурентов с браузерного рынка.
Интернет в то время не был так сильно развит, а сами вэб-страницы выглядели достаточно просто. Потому рядовым пользователям не было никакой необходимости задумываться об удобстве серфинга, скорости работы в сети и поддерживаемых стандартах, а для просмотра текстовых страничек «за глаза» хватало встроенного решения.
Захватив львиную часть рынка обозревателей, софтверный гигант не успокоился и продолжал усовершенствовать IE (Internet Explorer). В 2001 году вместе с Windows XP вышла его 6-ая версия, которая целых 5,5 лет была основным интернет-инструментом у подавляющего большинства пользователей, а сама Microsoft почивала на лаврах, не помышляя о выпуске новых версий своего браузера.
Именно столь долгий застой дал возможность конкурентам представить пользователям альтернативные решения, вместо порядком надоевшего Internet Explorer. Норвежская компания Opera, разработав новый движок Presto, представила браузер Opera 7.0, который многим понравился и стал стремительно набирать популярность. Но самым большим «сюрпризом» для Microsoft, стало возрождение вроде бы уничтоженного Netscape. Его движок был положен в основу продукта Mozilla Suite, из которого в 2004 году появился Firefox, отвоевавший впоследствии у IE четверть рынка обозревателей.
На этом беды для Explorer не закончились. В 2003 году Apple на своих компьютерах заменила продукт от Microsoft на собственное детище под названием Safari. А не так давно, в 2008-ом, поисковый гигант Google выпустил свою версию браузера - Google Chrome.
Проворонив такую активность на рынке, Microsoft начала в спешке выпускать новые версии Internet Explorer, вместе с Windows Vista вышла его 7-ая версия, а с Windows 7 - 8-ая. Но было уже поздно, эти версии оказались не способны составить достойную конкуренцию своим соперникам, ведь их функциональность лишь копировала ту, которую уже давно использовали в своих продуктах другие разработчики. Не смотря на то, что последнюю 9-ую версию IE можно назвать действительно современным решением, монополия на этом поприще была безвозвратно утеряна.
На современном рынке браузеров среди вышеупомянутых продуктов развернулась нешуточная борьба за симпатии пользователей, которым порой из-за агрессивной рекламы не так-то просто сделать правильный выбор в пользу того или иного решения. Как вы уже, наверное, догадались, в этом материале, мы познакомимся с основными возможностями браузеров большой пятерки, а так же поговорим об их преимуществах и недостатках.
ОСНОВНЫЕ КРИТЕРИИ ОЦЕНКИ БРАУЗЕРОВ
На что же стоить обращать внимание в первую очередь при выборе браузера?
Поддержка веб-стандартов
За общие принципы работы глобальной сети Интернет отвечает всемирная организация The World Wide Web Consortium (W3C). Именно она разрабатывает и утверждает все существующие веб-стандарты, которым должны соответствовать все веб-страницы, размещенные в интернете. Поэтому для корректного отображения сайтов и веб-страниц, браузер обязан поддерживать утвержденные веб-стандарты и чем больше он их знает, тем лучше.
Для проверки совместимости обозревателей с теми или иными стандартами наиболее часто используется тестовая программа ACID 3, в которой набранные 100 баллов соответствуют полной совместимости со всеми существующими веб-стандартами.
Пользовательский интерфейс
Наличие продуманного и понятного пользовательского интерфейса - залог успеха и популярности любого браузера. Ведь именно для предоставления пользователям удобного серфинга в сети и есть основное назначение этих продуктов. Разработчикам и дизайнерам приходится серьезно ломать головы над тем, как же наиболее правильно разместить всевозможные элементы управления функциями обозревателя. Сильно загромождённый интерфейс может быть так же неудобен, как и сверхлаконичный, так что целью производителей, является найти оптимальный баланс компоновки элементов в окне браузера. При этом не стоит забывать, что пользовательский интерфейс должен быть не только удобным, но и внешне привлекательным.
Функциональность
Современные обозреватели стали похожи на небольшую операционную систему - через них мы просматриваем страницы со сложным интерактивным интерфейсом, смотрим кино и слушаем музыку, используем их в качестве средств разработки, скачиваем файлы из сети, используем как FTP-клиенты и многое другое. Поэтому, большинство пользователей стало относиться к браузеру уже не просто как к банальному «просмотрщику страниц», а как к серьезному рабочему инструменту, который должен обладать широкими возможностями и быть удобен в повседневной работе.
Безопасность
В современных браузерах вопросам безопасности уделяется самое пристальное внимание, но, тем не менее, полностью защищенных обозревателей не существует. К сожалению, злоумышленники постоянно находят все новые уязвимости в браузерах, позволяющие инфицировать компьютеры пользователей или получать доступ к их личным данным. Разработчикам же остается заделывать обнаруженные дыры с помощью регулярного выпуска обновлений, и чем оперативнее это происходит, тем выше безопасность их продукта.
INTERNET EXPLORER
Начнем мы с самого популярного браузера, который остается таковым уже многие годы. Правда, в последнее время этот продукт растерял более половины своих поклонников, а доля его использования снизилась до 40% по всему миру.
Текущей версией обозревателя от компании Microsoft является Internet Explorer 9. За два года его разработки, производителем была сделана серьезная работа над ошибками, что вылилось в поддержку практически всех современных стандартов, включая новомодные HTML 5 и CSS 3. В специализированном тесте ACID 3, 9-ая версия Explorer набрала 95 баллов из 100 возможных. К слову, IE 8 имел в этом же тесте 20 баллов.
Для обработки мультимедийного контента веб-страниц, Internet Explorer активно использует аппаратные возможности центрального и графического процессоров компьютера, что существенно повышает его быстродействие.
Интерфейс последней версии этого браузера подвергся коренной переработке. Сама Microsoft называет его «компактным», потому как в его основе лежит всего одна панель, где расположены все необходимые элементы управления:
Аскетичная панель Internet Explorer 9
Не смотря на столь аскетичный дизайн, новый IE получился достаточно стильным с запоминающимся оформлением.
Адресная строка браузера, соответствует всем современным требованиям, автоматически подставляя варианты из журнала посещений или из списка ранее посещенных сайтов, при вводе самого адреса.
Вследствие того, что весь пользовательский интерфейс уместили в одну строку, места для вкладок осталось не так уж и много, что серьезно затрудняет навигацию при их большом количестве. Правда существует возможность переноса панели вкладок в отдельную строку. Так же возможно перемещение любой вкладки в собственное окно, путем перетаскивания ее в любое место рабочего стола.
Еще одним интересным моментом, можно назвать возможность закрепления вкладок в панели задач Windows7, что впоследствии позволит запускать любимые страницы, как обычные приложения.
В нижней части экрана браузера существует всплывающая строка подсказок, возникающая при определенных действиях пользователя. Первое время ее легко не заметить и долго думать, почему же обозреватель не предпринимает никаких действий на ваши команды.
Последняя версия браузера получила новый менеджер закачек файлов и систему отслеживания эффективности работы установленных плагинов.
Не смотря на улучшенную защиту от вредоносных сайтов, именно в детище Microsoft находят больше всего уязвимостей, а их исправление, к сожалению, происходит недостаточно оперативно.
Еще одним недостатком IE являются очень скудные возможности расширения его функциональных возможностей с помощью плагинов, так как код этого браузера недоступен для сторонних разработчиков.
MOZILLA FIREFOX
Довольно долгое время обозреватель Mozilla Firefox занимал второе место по популярности среди первой пятерки браузеров. На сегодняшний день текущая версия имеет индекс 9. Правда стоит учесть, что последние пять релизов разделяет лишь 7,5 месяцев.
По истине, революционным среди них стал Firefox 4.0, получивший новый дизайн и новое ядро. Все же последующие версии содержат в себе лишь доработки, улучающие производительность, отказоустойчивость и безопасность браузера.
С поддержкой всевозможных современных веб-стандартов у этого обозревателя нет, в вышеупомянутом тесте ACID 3 он набирает 100 балов из 100 возможных.
Благодаря современному движку, общая скорость работы новой версии Firefox существенно ускорилась, включая скорость загрузки страниц и сам запуск приложения. При этом аппаратное ускорение графики позволяет без проблем просматривать сложное интерактивное содержимое мультимедийных сайтов.
После определенной критики пользователей, которую учли разработчики, начиная с 4-ой версии, Firefox получил новый современный интерфейс. В левом верхнем углу разместилась кнопка вызова меню с различными настройками, а панель для вкладок страниц переместилась наверх. Под ней разместилась панель навигации, которая включает в себя:
Еще ниже располагается панель закладок, в которой можно держать ссылки на наиболее посещаемые страницы.
Браузер наделен умной адресной строкой, которая при начале ввода адреса выдает окно с подсказками, где выделенным шрифтом отмечаются все совпадения. Так же с помощью нее можно перейти на любую открытую вкладку.
Для наиболее часто посещаемых сайтов в Firefox существует очень полезная функция закрепления вкладок, прописывающая их на постоянное место жительство в левой части панели вкладок. После нового открытия браузера, такого типа вкладки, всегда будут находиться на своем месте.
И все же основным преимуществом Mozilla Firefox можно назвать его богатые функциональные возможности. Код этого продукта является открытым, поэтому браузер имеет огромное количество всевозможных дополнений, позволяющих сделать из него настоящий мощный рабочий инструмент, позволяющий решать любые задачи. Более того, с помощью специальных обоев и тем, плагинов настройки интерфейса, вкладок и закладок, можно преобразить внешний вид браузера под любые ваши капризы. Все эти радости находятся на специальном сайте, посвященному дополнениям для этого обозревателя.
Не смотря на то, что Firefox - второй браузер по числу найденных уязвимостей, исправляются они разработчиками достаточно быстро, что существенно повышает защищенность данных пользователей.
GOOGLE CHROME
Несмотря на свою молодость, на сегодняшний день Chrome вырвался на вторую строчку популярности в мире, обогнав Mozilla Firefox. В принципе, в этом нет ничего удивительного, так как этот браузер является детищем поискового гиганта Google, имеющим в своем арсенале мощную техническую базу и большие финансовые возможности.
На сегодняшний момент, актуальной версией является Google Chrome 17. Столь высокий индекс продукта объясняется выбором несколько иной политики его присвоения - браузер получает его сразу после внесения сколь-нибудь значимых изменений разработчиками.
За поддержку веб-стандартов в случае с этим интернет-обозревателем можно не беспокоиться, в тесте ACID 3, Chrome показывает 100-процентный результат.
Претензий к скорости работы Google Chrome нет. Более того, по мнение многих специалистов - это вообще самый быстрый браузер в мире. Благодаря современной технологии визуализации WebKit, обозреватель открывает страницы буквально мгновенно. Так же быстро в нем запускаются сложные веб-приложения и 3D-графика, обработка которой осуществляется на аппаратном уровне.
Что касается дизайна пользовательского интерфейса этого браузера, то его можно назвать строгим и лаконичным. Именно Chrome задал новомодную тенденцию размещения вкладок в самом верху окна. Под панелью вкладок находится панель инструментов, называемая разработчиками омнибаром, на которой располагаются:
Еще ниже можно включить отображения панели закладок.
Так же как и в Firefox, в Google Chrome существует возможность закреплять вкладки с наиболее часто посещаемыми страницами, после чего они перемещаются в левую часть экрана, принимая более компактный размер.
Так же как и в Internet Explorer, здесь имеется всплывающая вспомогательная строка, возникающая внизу экрана при определенных действиях пользователя, например, при скачивании файлов из сети.
Изначально в Chrome встроено достаточно большое количество полезных функций, например автоматический переводчик веб-страниц или вывод миниатюрных изображений часто посещаемых сайтов и запускаемых приложений на специальной вкладке, называемой страницей быстрого доступа. Но если вам покажется мало стартового функционала браузера или захочется преобразовать его внешний вид, то к вашим услугам доступ к множеству приложений, расширений и дополнительных тем, которые можно скачать из интернет-магазина Chrome.
Еще одним несомненным достоинством продукта компании Google является отношение разработчиков к его системе безопасности. Встроенная защита от фишинга и вредоносного ПО - хорошее подспорье в борьбе со злоумышленниками, пытающимися использовать уязвимости браузера в своих целях. Так же система автоматического обновления, обеспечивает своевременную установку заплаток и различных исправлений, повышающих общую надежность системы безопасности.
Несмотря на то, что норвежский браузер в мировом рейтинге занимает четвертую строчку, сильно отставая от первой тройки, в России это очень популярный обозреватель. На протяжении нескольких лет Opera является фаворитом у отечественных пользователей, и надо сказать, вполне заслужено.
Текущая версия браузера - 11.6. В тесте ACID 3, Opera показывает стопроцентный результат, так что с поддержкой всех современных веб-стандартов у этого обозревателя проблем нет.
Ядро Opera постоянно совершенствуется разработчиками, что служит залогом быстрой и стабильной работы браузера в Интернете. Скорость открытия веб-страниц не вызывает никаких нареканий, а для многих специалистов, считается эталонной. За вывод на экран сложной анимации в Opera, отвечает специализированная высокоскоростная графическая библиотека под названием Vega, которая позволяет добиться быстрой и плавной обработки изображений.
Пользовательский интерфейс Opera несколько схож с Mozilla Firefox, правда, не в плане дизайна, а в плане расположения функциональных элементов. В левом верхнем углу располагается кнопка основного меню, включающего всевозможные настройки браузера. Вкладки веб-страниц традиционно располагаются сверху. Справа, на панели вкладок, разместилась кнопка, отражающая историю закрытых вкладок. Панель инструментов, разместившаяся ниже, имеет следующие элементы:
По умолчанию в Opera включено отображение боковой панели, которая размещается слева по вертикали и содержит кнопки: Закладки, Виджеты, Unite, Заметки, Загрузки, История и настройки боковых панелей. Так же возможно включение панели закладок.
Браузер Opera имеет одну интересную особенность - возможность группировать вкладки. Для этого достаточно просто перетащить одну вкладку в другую, а рядом с ними появляется значок раскрытия/закрытия группы в виде треугольника. При наведении курсора мыши на шапку группы вкладок, обозреватель покажет миниатюры всех сгруппированных веб-страниц.
Если говорить о начальной функциональности норвежского браузера, т. е. о тех возможностях, которыми браузер обладает сразу же после установки, пожалуй, у Opera они самые богатые. Разработчики наделили его столь разнообразными опциями, что такой джентельменский набор вполне способен удовлетворить практически все основные потребности пользователей. К вашим услугам менеджер загрузок, поддержка BitTorrent, проверка правописания и прочее. Приятным бонусом для пользователей может послужить существование экспресс-панели - специальной страницы с отображающимися миниатюрами наиболее часто посещаемых сайтов.
При этом, норвежские разработчики пошли еще дальше, и добавили возможность дополнительно расширять функциональность своего продукта с помощью специальных мини-приложений, которые размещаются на сайте Opera.
Система безопасности Opera находится на самом высоком уровне. При посещении сайтов, браузер в реальном времени проверяет их данные и выдает сообщение пользователям в случае опасности. Существует возможность использования приватных вкладок, например, при работе в интернет-банкинге.
Последним браузером нашего обзора станет обозреватель от компании Apple. Стоит отметить, что этот продукт в большей мере ориентирован на рынок компьютеров, произведенных самой компанией и использующих операционную систему Mac OS. Несмотря на это его доля на мировом рынке составляет около 5%.
Текущая версия этого браузера имеет индекс 5. Поддержка веб-стандартов организована на самом высоком уровне и тест ACID 3 проходится Safari на сто процентов.
Возможно на родных системах, производительность браузера компании Apple является самой высокой, но в ОС Windowsв различных тестах, показываются средние результаты, относительно конкурентов, что с другой стороны, совсем неплохо. Обозреватель поддерживает аппаратное ускорение графики, ускоряющую прорисовку интерактивных веб-страниц и имеет оптимизированный алгоритм кэширования, позволяющий загружать ранее посещенные страницы с очень высокой скоростью. Примечательно, что Apple использует в своем браузере такой же движок (WebKit), что и Google в Chrome.
Интерфейс пользователей в этом браузере несколько отличается от четырех предыдущих, что, в общем-то, неудивительно. Вид классической панели управления для некоторых пользователей может показаться слегка старомодным, так имеет шапку, а вкладки страниц располагаются под всеми панелями. Сверху, в шапке браузера, отражается название просматриваемой страницы. Ниже размещается панель инструментов, содержащая в основном уже привычные элементы:
Далее, ниже, находится панель закладок и только под ней - панель вкладок, которая при просмотре единственной страницы, не видна вовсе. Для того, чтобы добавить первую вкладку, необходимо обратиться к соответствующему пункту меню текущей страницы, что для многих пользователей неочевидно. Правда, после появления панели вкладок на экране, их добавление осуществляется с помощью кнопки «+» расположенной в правой ее части.
Одной из интересных функций Safari, можно назвать режим Reader, позволяющий выделять материал отдельной статьи в самостоятельное всплывающее окно, имеющее собственные настройки размера шрифта и других элементов форматирования текста. Все остальные элемента сайта в этом режиме затемняются, позволяя пользователю сосредоточиться только на чтении конкретного материала.
Весьма оригинально в Safari выглядит страница часто посещаемых сайтов, называемая TopSites. Разработчики наделили ее трехмерным дизайном, что выглядит достаточно стильно и красиво, впрочем, как и вся продукция компании Apple.
Общие функциональные возможности браузера от компании Apple, можно значительно обогатить с помощью расширений, находящихся на сайте разработчика. Причем, если еще недавно, их основная масса была доступна только пользователям Mac OS, то теперь плагины для Safari доступны и на платформе Windows.
О безопасности этого обозревателя однозначно говорить достаточно сложно. Как уже отмечалось, большинство пользователей этого браузера - владельцы устройств с операционной системой Mac OS, которая не пользуются у злоумышленников столь бешеной популярностью, как Windows, а значит и сами взломы системы через Safari фиксируются гораздо реже. Да и сами разработчики неохотно раскрывают информацию о проблемах безопасности своего продукта, мотивируя это целями защиты данных пользователей. Компания считает, что не разглашая и не подтверждая данных о тех или иных уязвимостях своего браузера, она сохранит конфиденциальную информацию, которой могли бы воспользоваться злоумышленники для обхода системы защиты.
ВЫВОДЫ
Разработчики современных браузерных решений тратят немало усилий и средств, что бы угодить пользователям. Ведь необходимо позаботиться о многих факторах, способствующих удачному продвижению собственного продукта на рынке. Среди них:
Еще несколько лет назад, позиции браузера Internet Explorer казались незыблемыми, и лишь кучка энтузиастов прибегала к использованию альтернативных решений. Сегодня, ситуация кардинально изменилась. Обозреватель от Microsoft растерял все свое преимущество, а его популярность продолжает стремительно таять. Правда можно сказать, что 9-ая версия Internet Explorer получилась достойной, он быстрее и удобнее предыдущих версий, а так же содержит ряд важных улучшений. Правда ничего революционного, по сравнению с конкурирующими решениями он предложить не может, что вряд ли вызовет к нему массовый приток пользователей, использующих сейчас другие браузеры. Хотя, остановить миграцию на продукты конкурентов эта версия вполне способна.
Google Chrome, несмотря на свою молодость, в последнее время стремительно набирает популярность. Уже сейчас многие рейтинговые агентства ставят его на второе место по популярности, которое долгие годы принадлежало обозревателю Firefox. Разработчики вкладывают немало денег и усилий в свое детище, что окупается сторицей. По мнению многих аналитиков, в своем арсенале, Chrom имеет самый быстрый движок и лучшую систему безопасности. При этом браузер выступил законодателем моды в размещении вкладок страниц сверху, а так же совмещения адресной и поисковой строк.
Несмотря на то, что Mozilla Firefox несколько уступил свои позиции в мировом рейтинге конкуренту из Google, этот браузер пользуется огромной популярностью среди пользователей, а в России и вовсе является лидером по использованию в настольных компьютерах. Самое главное преимущество Firefox перед конкурентами - это существование огромного количества бесплатных дополнений, с помощью которых возможно кардинально изменить функциональность браузера, его интерфейс и внешний вид. Правда иногда, за столь гибкую расширяемость, приходится платить повышенными требованиями к оперативной памяти, более медленной работой пользовательского интерфейса и вылетами браузера. В последних версиях этого обозревателя, разработчики всячески стараются повысить стабильность его работы, не только устраняя утечки памяти, но и совершенствуя сам механизм ее использования.
Норвежский браузер Opera уже многие годы является одним из самых популярных решений среди российских пользователей. Изначально, этот обозреватель имеет очень богатые функциональные возможности и набор полезных сервисов, что делает его привлекательным решением для тех людей, которые хотят получить все самое необходимое прямо «из коробки», не прибегая к установке дополнений. Не имея особых недостатков, снижение популярности Opera можно объяснить лишь активностью конкурентов, которые постоянно совершенствуют свои продукты, предлагая не менее привлекательные решения в этой области.
Браузеру Safari, будучи разработанным компанией Apple и изначально ориентированным на использование в собственных операционных системах Mac OS, довольно сложно бороться за место под солнцем в нише Windows-систем. Многие специалисты сходятся во мнении, что производительность этого браузера на платформе Windows, гораздо скромнее, чем при использовании в «родной» ОС. Тем не менее, он имеет быстрый движок, способный справиться с задачами любой сложности и свой уникальный пользовательский интерфейс, имеющий своих почитателей.
Для всех тех, кто хочет увидеть браузеры в деле, на нашем портале производятся регулярные масштабные тестирования самых свежих и популярных версий интернет-обозревателей с последним из которых вы можете ознакомиться .
Не смотря на то, что браузер - это продукт, над созданием которого трудится множество людей, а в его разработку вкладываются немалые деньги, он остается бесплатным, что дает возможность пользователям при наличии желания и времени самостоятельно познакомиться со всеми основными решениями в этой сфере.
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Подобные документыПрограммы, позволяющие просматривать содержимое сети Интернет. Браузер режима командной строки, браузер с поддержкой мультимедиа, полноэкранный браузер. Основные возможности различных браузеров. Возможность быстрого перехода к другим страницам.
презентация , добавлен 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
