Ростелеком ТВ 

Что такое браузер. Браузер — что это такое простыми словами и какой из них самый лучший

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

Для компьютеров с предустановленными системами Windows разных поколений встроенным браузером является Internet Explorer, на всех устройствах от компании Apple автоматически работает Safari. Планшеты и телефоны на операционной системе Android продаются с предустановленным браузером Google Chrome. Все остальное ПО такого вида распространяется в интернете.

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

Браузеры от разных разработчиков

Самым известным браузером, ставшим таким благодаря своей привязке в Windows, является Internet Explorer. К сожалению, несмотря на появление новых версий, IE остается довольно медленной в работе и неудобной программой, через которую обычно скачивают другие браузеры, а после удаляют с компьютера.

Google Chrome от поисковой системы Google – легкая и удобная программа, наиболее универсальная из всех существующих. Можно устанавливать на любое устройство, кроме продукции Apple. «Хром» надежен и фактически не зависает при довольно большом количестве открытых страниц, кроме того, он не мешает при работе в графических редакторах и других «тяжелых» программах. Российским аналогом Chrome является «Яндекс-браузер», скачать который можно с официального сайта поисковой системы «Яндекс».

Mozilla Firefox – удобный браузер с множеством плагинов и дополнений, а также возможностью установить сопутствующие программы (например, почтовый клиент Mozilla Thunderbird). К сожалению, на данный момент очень уступает по быстроте работу таким программам как Chrome и Yandex Browser, однако все еще довольно популярен.

Единственной платной (до 2005 года) программой для выхода в интернет, была Opera. На данный момент, этим браузером почти не пользуются по причине довольно медленной загрузки сайтов, однако до появления Mozilla она считалась самым лучшим ПО такого типа.

Раз вы читаете данную статью, то вас, как и многих, интересует вопрос, что такое браузер? Как бы странно это ни звучало, но ответ на него вы по сути уже знаете, просто, наверное, еще не догадываетесь. Я постараюсь объяснить. Если сказать вкратце, то браузер — это программа для просмотра интернет-страниц. То есть вы, чтобы прочитать изложенную на данной странице информацию, как минимум, должны были запустить браузер, щелкнув по его ярлыку на рабочем столе или в другом месте на вашем компьютере, набрать в поисковой системе (яндекс, гугл и другие) запрос «что такое браузер » или какой-либо другой похожий на этот, найти в выдаче мой сайт и перейти на него. Видите, сколько самостоятельных действий вы уже совершили? Разве вы смогли бы все это проделать, не имея ни малейшего представления о том, что такое браузер и как им пользоваться? Конечно, нет.

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

Основные функции браузера

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

Вы запускаете браузер, щелкнув по его ярлыку мышкой, и попадаете на вашу домашнюю страницу. В моем случае ей является поисковая система Яндекс (yandex.ru). Данная страница всегда открывается при запуске браузера. На нее также можно попасть в любой момент, просто щелкнув по значку домика в правом верхнем углу (на рисунке обведен красным цветом) или же нажав одновременно клавиши Alt и Home. , думаю, понятно.

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

Перед вам появится окошко, в котором в поле «Домашняя страница» нужно вписать адрес необходимого сайта, к примеру http://www.yandex.ru или http://vk.com. Вы можете вбить адрес совершенно любого сайта. Как изменить домашнюю страницу и что это такое, разобрались. Переходим дальше.

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

Адрес сайта очень часто начинается с «www», но эту часть можно и опустить. Далее через точку идет название сайта, к примеру, все тот же любимый «yandex». Ставим еще одну точку и пишем окончание адреса: ru, com, net. org и другие. В нашем случае мы получили адрес поисковой системы Яндекс «www.yandex.ru». Чтобы попасть на сайт по его адресу, достаточно ввести его в адресной строке вашего браузера.

Для более быстрого доступа к любимым сайтам были придуманы закладки . Достаточно щелкнуть по значку звездочки справа от адресной строки или же нажать комбинацию клавиш Ctrl+D, как появится окошко, в котором нужно вбить имя закладки, выбрать необходимую для нее папку и нажать «готово». В закладки можно заносить абсолютно любые понравившиеся вам сайты, для удобства их также можно разбивать на папки. Чтобы просмотреть закладки, нужно нажать на соответствующий значок в правом верхнем углу в случае с Firefox, или же немного иным способом в зависимости от браузера.

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

Чаще всего интернет используют для поиска информации . Сделать это без браузера естественно невозможно. Раз вы читаете сейчас данную статью, то скорее всего уже знаете, как искать информацию в интернете. Рекомендую использовать для этих целей такие поисковые системы, как yandex.ru и google.ru. В запросе наиболее точно указывайте то, что хотите найти. К примеру, если вы живете в Москве и хотите купить себе автомобиль, так и напишите в поисковой строке «продажа авто в москве» .

Виды браузеров

Браузеров существует достаточно много, но завоевали популярность из них лишь единицы. О них и поговорим.

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

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

— впервые появился в 2002 году, регулярно обновляется, поддерживает все современные стандарты, максимально правильно отображает сайты, имеет множество дополнительных расширений и плагинов, которые легко устанавливаются и обновляются. У Firefox есть также и недостатки: иногда браузер зависает на некоторое время, порой даже на несколько минут, после чего его работа может и вовсе прекратиться, сославшись на какую-либо ошибку. Бывает и такое, что браузер, говоря простым языком, глючит. К примеру, сейчас на некоторых сайтах приходится каждый раз вручную вводить логины и пароли несмотря на то, что они сохранены в браузере и должны выводиться в автоматическом режиме. Также мной был замечен такой глюк, как периодическая потеря проверки на орфографию: иногда она сама пропадает и потом сама же появляется, я при этом ничего не делаю. Стоит отметить, что Firefox имеет очень хорошую поддержку, поэтому все проблемы зачастую решаются в новых версиях либо другими способами, найти которые можно на форуме программы.

— появился относительно недавно, в 2008 году, но уже успел завоевать популярность во всем мире. Гугл Хром можно описать в трех словах: быстрый, простой и удобный. Несмотря на свою визуальную простоту браузер обладает всеми необходимыми возможностями и поддерживает все современные стандарты. Его освоит в считанные минуты даже новичок. Доказательством удобства Google Chrome является тот факт, что многие технические детали, впервые использованные в нем, были впоследствии позаимствованы у него другими браузерами. К примеру, вкладки в браузерах долгое время находились под адресной строкой, над которой также было расположено меню в виде выпадающих списков, в результате чего шапка браузера получалась довольно-таки громоздкой. Если мне не изменяет память, то впервые именно в Хроме вкладки переместились под адресную строку, а меню совершенно в другое место.

— является самым молодым браузером в данном списке и в мире в целом, на момент написания статьи его возраст составляет всего лишь месяц, но несмотря на это он активно набирает популярность, как правило, среди русскоговорящего населения. На мой взгляд, у него большое будущее, особенно в России и СНГ. Но если компания Яндекс приложит больше усилий, то браузер, возможно, выйдет и далеко за пределы нашей страны, хотя в это верится слабо, поживем-увидим. Он сочетает в себе все достоинства современных браузеров, а также имеет и свои индивидуальные особенности. К примеру, только в данном браузере я увидел то, что заголовки интернет-страниц отображаются не только во вкладке, но и в адресной строке. По своему внешнему виду и интерфейсу Яндекс Браузер очень сильно напоминает Google Chrome, сделаны они также на одном движке. Браузер работает очень плавно, быстро и без тормозов, по крайней мере, именно так он проявил себя в моем случае. Отдельно стоит сказать о системе безопасности Яндекс Браузера, которая была разработана в Лаборатории Касперского, а также о технологии Turbo, ускоряющей загрузку сайтов, которая создана компанией Opera и появится уже в ближайших версиях программы. Сам я эти разработки не тестировал и не проверял, так как не имею ни возможности, ни желания.

В список можно было включить также браузер от Apple , но, на сколько мне известно, его разработка и поддержка под Windows недавно прекратилась. Скажу лишь, что браузер действительно выполнен очень качественно и красиво, как и любая другая продукция от Эппл. Если есть желание, можете скачать Safari и пользоваться именно им, вряд ли вы разочаруетесь.

Какой браузер лучше?

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

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

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

Пожалуй, объективно, ну или почти объективно, я могу высказаться лишь про Internet Explorer. Именно этот браузер чаще других неправильно отображает сайты, слышал также, что у него хромает система безопасности. Несмотря на то что IE является старейшим браузером из данного списка, в последнее время ему приходится лишь догонять своих молодых конкурентов, и это у него получается далеко не лучшим образом.

При выборе браузера можете взглянуть также на рейтинги популярности , но полагаться на них я вам не советую. Каждый человек должен выбрать сам то, что ему по душе. К примеру, в мире по-прежнему очень много пользователей отдают свое предпочтение IE, но, на мой взгляд, это лишь потому, что он устанавливается на компьютер вместе с Windows. Большинство людей не любят ничего менять и искать лучшее, а пользуются тем, что у них уже есть. Я раньше тоже использовал именно Internet Explorer, но это было давно. Я тогда не был таким активным пользователем интернета, как сейчас, не знал всех тонкостей, думал, что сайты должны отображаться именно так, как в Эксплорере, я просто не знал лучшего. Если на каком-либо сайте что-либо съезжало или же было слишком крупным или, наоборот, мелким, я считал, что ошибка кроется в самом сайте, но, как выяснилось, я ошибался. В первоначальном варианте данной статьи я привел рейтинг популярности браузеров в России и в мире в целом, но потом понял, что это не нужно, так как он постоянно меняется да и сделать правильный выбор точно не поможет.

При выборе браузера нужно обращать внимание на несколько основных моментов :

  • Удобство — с данным пунктом каждый пользователь должен определиться сам. Для этого скачайте браузер, поработайте на нем в течение нескольких часов, и, если почувствуете какие-либо неудобства или что-то вам не понравится, скачайте и протестируйте следующий. И так далее, пока не поймете, какой именно браузер максимально удобен для вас. В принципе, список небольшой, так что тестировать придется недолго.
  • Функциональность — по большому счету все вышеперечисленные браузеры обладают достаточным функционалом практически для любого интернет-пользователя. В случае если не хватает той или иной функции, всегда можно скачать и установить дополнение или плагин.
  • Скорость — лично я никакими сервисами и тем более секундомерами не проверял скорость работы того или иного браузера. Могу сказать, что последние версии каждого из них работают довольно-таки шустро. Где-то видел результаты исследования, согласно которым быстрее всего загружает веб-страницы Chrome, а выводит видимую часть страницы на экран Firefox. На сколько это правда, не знаю. Не думаю, что Яндекс Браузер или Opera сильно отстают от них по данному показателю.
  • Правильность отображения сайтов — казалось бы, ну почему бы не обновить разработчикам свои браузеры и не сделать так, чтобы они корректно отображали сайты. Представьте, как было бы классно, если бы во всех браузерах каждый сайт выглядел бы абсолютно одинаково, на сколько проблем стало бы меньше у верстальщиков (специалисты, «натягивающие» дизайн на сайт), но вот нет, не могут пока разработчики довести свои браузеры до совершенства, а жаль. Сразу хочу заметить, что максимально правильно отображают сайты такие браузеры, как Google Chrome, Mozilla Firefox и Яндекс Браузер. Opera также поддерживает почти все современные стандарты, но все же бывают моменты, когда она неправильно отображает тот или иной стиль. Недавно именно из-за нее мне пришлось переделывать размеры шрифта на одном из своих сайтов, так как она их очень сильно увеличивала. Также зайдите, к примеру, на Яндекс Маркет и посмотрите, как он отображается в Опере и в любом другом вышеперечисленном браузере, уверен, что вы увидите различия. Про Internet Explorer и говорить не особо хочется, но все же я скажу: это один из самых отсталых браузеров в вопросе правильности отображения сайтов. Он очень плохо дружит с тенями и другими эффектами. Очень часто именно под IE пишут отдельный файл стилей, чтобы он хоть как-то справлялся со своей задачей.
  • Безопасность — скажу честно, какими-либо специальными способами данный пункт я не проверял. Знаю, что у Chrome и Firefox с этим все, вроде как, в порядке, на Яндекс Браузер также можно делать большие ставки благодаря сотрудничеству с Лабораторией Касперского, про Оперу ничего конкретного сказать не могу, про IE слышал, что система безопасности так себе. В любом случае ставьте на свои компьютеры антивирусники, и все будет в порядке.

В вопросе выбора браузера не в коем случае полностью не доверяйте чьему-либо мнению. То что другому кажется удобным и идеальным, вам может абсолютно не понравиться и наоборот. Самое главное в браузере для рядовых пользователей интернета, на мой взгляд, удобство . Если вас устраивает работа браузера, приятен его интерфейс и им просто удобно пользоваться, то вряд ли вы обратите особое внимание на другие моменты. Но в любом случае постарайтесь оценить браузер и по другим вышеперечисленным пунктам и уже тогда сделайте окончательный выбор. Тем более теперь, я надеюсь, вы понимаете, что такое браузер, зачем он нужен и как им правильно пользоваться. Лично я посоветовал бы вам приглядеться к Google Chrome и Mozilla Firefox , также неплохо себя показал Яндекс Браузер, но, повторяю еще раз, это лишь мое субъективное мнение.

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

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

Более точное определение я взял из Википедии. Собственно, вот оно: «Интернет-обозреватель, обозреватель, браузер (от английского Web browser) - программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети), их обработки, вывода и перехода от одной страницы к другой. Многие современные браузеры также могут загружать файлы с FTP-серверов».

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

История рождения браузера

NCSA Mosaic считается первым в мире браузером с графическим интерфейсом пользователя, вышедший весной 1993 года. Он был ориентирован под операционную систему Windows. Его разработчиками стали Эрик Бина и Марк Андерссен. Поскольку NCSA Mosaic имел открытый исходный код, на его основе был построен другой успешный браузер Netscape Navigator, который обладал куда более простым интерфейсом и был избавлен от недостатков, коими был наделен Mosaic. Коммерческий успех к Netscape Navigator пришел очень быстро, поэтому на этой же платформе специалисты Microsoft создали Internet Explorer. Поскольку Microsoft практически сразу начала добавлять Internet Explorer в операционную систему Windows, она в короткий срок буквально покорила рынок браузеров, став чуть ли не монополистом.

Так как популярность Netscape сильно упала, как и доходы, компания была продана провайдеру AOL, которая выпустила код обозревателя под свободной лицензией как Mozilla Public License. Однако Netscape 6 был написан с использованием нового кода и обладал массой достоинств и возможностей, которых не было в других обозревателях. Спустя некоторое время браузер получает название и начинает привлекать новых пользователей.

А что же Microsoft? Поскольку компания чуть ли монополизировала рынок, то решила практически не заморачиваться с обновлением Internet Explorer, поэтому конкуренты получили фору и постепенно начали отвоевывать рынок.

Стоит отметить, что в далеком 1995 году вышел другой, ныне очень популярный браузер Opera. Но «Опера» изначально отличалась тем, что выпускалась как условно-бесплатное ПО. В те времена платные браузеры были обыденностью, а сегодня они сплошь бесплатные, лишь бы пользователи их скачивали.

Позже всех к этой, так сказать, битве присоединилась компания Google. Она достаточно поздно «опомнилась», показав свой браузер Chrome лишь в 2008 году. Это, впрочем, ничуть не помешало интернет-гиганту навязать борьбу конкурентам. Более того, если верить последним данным, Chrome является самым популярным обозревателем в мире, причем этого компания смогла добиться всего за несколько лет. Поскольку Chrome имеет открытый исходный код, на его основе часто создаются другие обозреватели типа того же Яндекс.Браузер.

Виды браузеров

Теперь настала пора рассказать о каждом из обозревателей по отдельности.

Internet Explorer

Начать стоит, без сомнения, с Internet Explorer, ведь это некогда самый популярный браузер в мире. Был выпущен компанией Microsoft в 1995 году. Пик популярности пришелся на 2002 год, когда интернет начал входить в массы. Последние годы очень быстро теряет долю на рынке.

Специалисты часто жалуются, что Internet Explorer плохо защищен от влияния из вне, то есть от троянов и вирусов. Более того, правительство некоторых европейских стран советовало своим жителем отказаться от использования Internet Explorer. Но несмотря на все проблемы, IE по-прежнему успешен в некоторых странах. Например, в Корее несколько лет назад его доля достигала 99% от всего рынка.

Microsoft продолжает обновлять браузер. На сегодняшний момент выпущена версия Internet Explorer 11.

Opera

Вышедший на рынок в 1995 году браузер, разработанный норвежской компанией Telenor. Почему-то именно Opera полюбилась российским пользователям, хотя в остальном мире она занимает лишь пятое место по популярности.

До 2009 года находилась в погоне за IE, затем обогнала его и стала популярнее. Примечательно и то, что огромным успехом пользуется версия Opera Mini для мобильных устройств. Данный браузер встраивается в несколько игровых платформ.

Mozilla Firefox

Третий по популярности браузер в мире и первый среди свободного ПО. Согласно данным за 2013 год, его доля на рынке достигает почти 20%. Особенно популярен в Германии, Польше и в России. Согласно многочисленным отзывам специалистов, это единственный браузер, где практически не возникает ошибок при тестировании приложений.

Логотипом Firefox является малая панда — одно из самых милейших животных на планете.

В Mozilla встроены так называемые пасхальные яйца. Например, при вводе в адресную строку слов about:robots можно увидеть послание роботов людям.

Google Chrome

Как было сказано выше, «Хром» вышел на рынок лишь в 2008 году. Был разработан компанией Google и считается . Насчет последнего многие специалисты все еще сомневаются, однако если верить собственным ощущениям, то это действительно так.

Интересно, что исполнительный директор Google Эрик Шмидт долгое время считал, что компании не нужен собственный браузер, однако затем поменял свое мнение не без помощи основателей компании. Так на свет появился Chrome.

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

Safari

Браузер от Apple. Изначально был ориентирован на компьютеры компании Apple, однако затем появилась версия для операционной системы Windows. Пользуется неплохим успехом в мире (рыночная доля — более 8%), а вот в России им пользуется лишь каждый третий интернет-пользователь.

Web-браузер - это программа, которую современный пользователь ПК или мобильного устройства задействует практически каждый день. Между тем, подобные решения когда-то были в диковинку даже для IT-профессионалов. В это трудно поверить, но были времена, когда сети уже вовсю окутывала планету, но ни одного браузера не существовало. Сегодня, конечно же, web-браузер - это обязательный компонент ПО практически любого компьютера. Решений подобного типа - десятки. Чем же они различаются между собой? Каковы наиболее примечательные исторические факты, отражающие появление браузеров? Какие IT-бренды лидируют в разработке таких решений?

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

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

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

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

Как считает большинство экспертов IT-сферы, первый в мире веб-браузер появился в декабре 1990 года. Тогда программист Тим Бернерс-Ли выпустил приложение, позволявшее распознавать команды, написанные на языке HTML, и транслировать их в отображаемый на экране текст и дополнительные графические элементы. Эта программа получила название "браузер".

Тим Бернерс-Ли долгое время работал в CERN - одной из самых известных в мире лабораторий, занимающихся проблемами физики атомных частиц. Он выяснил, что расположенные в разных частях организации компьютеры работают в рамках не самой совершенной модели обмена документами. Ученым CERN не хватало ресурса, который бы позволял быстро находить нужную информацию посредством логического перехода между текстовыми данными двух разных файлов. Тогда Тим предложил решение: организовать документооборот по принципам "гипертекста", появившимся еще в 70-х годах.

К моменту, когда программист начал реализовывать придуманную им концепцию (это был 1989 год), сеть Интернет уже начала распространяться по миру. Тим решил, что создаст технологию, которая позволит обмениваться данными через гипертекст не только в пределах сети CERN, а в более глобальном формате - между компьютерами "всемирной паутины".

В 1990 году Тим Бернерс-Ли создал особый язык разметки гипертекста (названный HTML - Hyper Text Markup Language). Вскоре он написал программу, позволявшую "переводить" HTML-документы в обычный текст. Браузер, созданный Тимом и названный Nexus, был очень простым: его возможности ограничивались отображением только лишь букв и цифр. Работу над программой продолжил коллега Тима, Роберт Каиллиагу, создавший несколько новых версий решения. Программы-браузеры стали появляться под самыми разными платформами, включая набиравшую популярность ОС Windows.

Браузеры под Windows

Первые в мире браузеры появились, таким образом, в начале 90-х, на заре глобальной экспансии ОС Windows (впоследствии самой популярной операционной системы на планете). Долгое время программы для обмена гипертекстовой информацией в интернете через Windows не было. Но осенью 1992 года команда программистов из американской корпорации NCSA создает браузер Mosaic, способный функционировать под управлением ОС от Microsoft. Вскоре разработчики этого приложения основывают отдельную компанию и выпускают на рынок новый продукт - Netscape. Этот браузер (равно как и предшествующий) обладал, в принципе, всеми функциями, которыми оснащены его аналоги в нашем времени: просмотр текста, отформатированного определенным образом, картинок и прочих элементов веб-страниц. Также в нем были практически те же основные элементы управления, что и в современных браузерах: кнопки "вперед", "назад" и т. д. Исходный код одной из версий Mosaic купила Microsoft и к середине 90-х создала свою программу для просмотра веб-страниц - Internet Explorer (или IE). Которая, в силу распространенности ОС Windows, в течение многих лет была самым популярным в мире решением. Но в конце 90-х - начале 2000-х стали появляться новые браузеры, составившие успешную конкуренцию программе от Microsoft. Сегодня IE - уже не безусловный лидер в своем сегменте (хотя его популярность, конечно, до сих пор очень велика).

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

Речь идет об антивирусном модуле Dr. Web для браузера. Этот инструмент позволял пользователям проверять файлы на предмет заражения посредством онлайн-формы. Российская программа, как считают многие эксперты, стала прообразом "облачных" антивирусных технологий, набирающих популярность только сегодня.

Конкуренты IE

В числе самых успешных решений, ставших альтернативой Internet Explorer - Opera, Google Chrome (если говорить о мировых брендах), Yandex-браузер (из российских программ). В силу того что вслед за персональными компьютерами мировую популярность стали обретать мобильные гаджеты, появились различные браузеры также и для них. В частности, для iOS-платформы - это программа Puffin. О том, как появились все эти браузеры и об их основных особенностях мы сейчас и поговорим.

Google Chrome

Браузер Google Chrome - один из самых популярных в мире сегодня. Впрочем, его глобальное лидерство не удивляет современных IT-экспертов. Этот браузер создала Google, которая уже успела к моменту вывода программы на рынок (осень 2008 года) получить статус одного из мировых IT-гигантов. Будущий успех решения был, полагают эксперты, лишь вопросом времени. Вместе с тем выпущенный предложил миру много чего оригинального. Он смог стать непохожим на существующие на тот момент аналоги (такие как, например, Opera и

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

Однако, в стане корпорации нашлись энтузиасты, которые решили - "Гугл"-браузер будет создан. Для разработки продукта компания наняла лучших специалистов отрасли. И не откуда-нибудь, а из компании Mozilla, разработавшей один из лучших на тот момент браузеров. В результате, получилось решение, имевшее все шансы на глобальный успех. Браузер Google Chrome вышел на загляденье: легкий, удобный в пользовании, быстрый и очень симпатичный с точки зрения дизайна был воспринят мировым IT-сообществом и, что немаловажно, многими пользователями на ура. Первые версии "Хром" были для Windows. Но уже в 2009 году появились сборки браузера, способные работать под Linux и MacOS.

Chrome: инвестиции в качество

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

Достаточно лишь вспомнить, каким образом корпорация организовывала кампании по выявлению уязвимостей в своей программе. В рамках одной из таковых Google гарантировала выплату значительных денежных сумм тем IT-специалистам, который найдут значимые с точки зрения безопасности браузера бреши в его системе защиты. В некоторых случаях речь шла о выделении нескольких миллионов долларов на подобные кампании. Другие компании-разработчики аналогичных решений такого себе позволить, как считают эксперты, не могли. Конечно, кандидатами на "приз" пожелали стать хакеры со всего мира. Они взламывали систему защиты, которой оснащался Google-браузер в самой современной версии и рассказывали, взамен на денежную компенсацию, компании-разработчику о том, как им это удалось. Разумеется, никакого преследования по закону при этом не было (хотя хакерство, как известно, наказуемое деяние). Соответственно, в следующей версии браузер "Хром" выпускался с учетом "залатанных" уязвимостей. Это не могло не нравиться пользователям, полагают эксперты. Отчего программа от Google появлялась на все большем числе компьютеров по всему миру.

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

Факты о Chromium

Компания Google порадовала IT-разработчиков мира не только собственным браузером, но также и тем, что выпустила на рынок достаточно уникальный продукт - Chromium. Это тоже программа для просмотра веб-страниц. Она, как это можно понять, исходя из созвучия с основным браузером, очень к нему технологически близка. Но отличие есть, и оно значимо. Браузер Chrome - основной продукт Google в числе подобных решений. Он призван обеспечивать коммерческие потребности компании. Значительная часть информация, связанная с его разработкой, как считают эксперты, закрыта. Chromium, в свою очередь, - обладающий открытым исходным кодом web-браузер. Это значит, что им могут воспользоваться практически все желающие программисты со всего мира.

Chromium как отдельный браузер, по мнению некоторых экспертов, уступает в функциональности своему "собрату". Однако, как считают специалисты, в этом нет ничего удивительного. Минимум "штатных" функций - больше свободы для творчества сторонних разработчиков. Но базовый пользовательский инструментарий в обоих браузерах от Google (а также тех, что созданы другими программистами на основе Chromium) одинаковый. Основные технологические преимущества, характерные для Chrome, есть и в Chromium - быстрота работы, простота интерфейса и управления.

Открытый код, который подарили миру разработчики из Google, предопределил появление большого количества браузеров, выпущенных на основе Chromium. Они могут отличаться названиями (более того, позиционироваться как ярые конкуренты друг друга), но, по сути, являть собой одну и ту же платформу. В частности, такие известные российские компании, как Mail и Yandex создали свои браузеры именно на базе Chromium.

Браузер Opera: скандинавский вызов мировым лидерам

В начале 90-х два норвежских программиста, Йон Стефенсон фон Течнер и его коллера Гейр Иварсей работали в одной из крупных телекоммуникационных корпораций. В 1993-м перед ними встала задача - создать сайт своей компании. Они сделали это, однако вскоре убедились, что самый популярное решение на тот момент - Mosaic - не очень подходит для отображения веб-страниц. Несмотря на то что уже тогда в мире появлялись новые браузеры, призванные стать альтернативой Mosaic, Йон и Гейр решили, что создадут свою программу, которая сможет работать с веб-документами более корректно. Первая версия приложения появилась в том же 1993 году. Программа называлась MultiTorg Opera и использовалась исключительно для нужд фирмы-работодателя Йона и Гейра. Но уже через год появился браузер, призванный стать узнаваемым в уже в планетарном масштабе. Название было полностью заимствовано из предыдущего решения. Новый браузер характеризовался, как считают специалисты, минимальным потреблением системных ресурсов. Многие IT-эксперты тех лет предрекли программе мировую популярность.

В 1995 году Йон и Гейр основали собственную компанию - Opera Software AS. Уже в 1996-м появилась программа, созданная под новым брендом и названием - Opera 2.0. По оценке экспертов тех лет, браузер отлично справлялся с возложенной на него задачей по быстрому запуску веб-страниц. Вскоре появилась третья "Опера".Интернет-браузер стал, по признанию многих IT-специалистов, и вовсе революционным - в нем, в частности, стало можно работать в режиме нескольких окон. Также в программе была внедрена функция автоматического заполнения веб-форм, реализован надежный протокол безопасности. В четвертой версии браузера появился отдельный

В 2000 году увидела свет версия "Оперы" на русском языке. С течением лет норвежский браузер постоянно совершенствовался. В нем то и дело появлялись новые возможности и функции. В частности, в версии 8.0, вышедшей в 2005 году, появилось голосовое управление. В различных модификациях программы были реализованы оригинальные элементы управления (такие как, например, "перелистывание мышью"). Подходящая версия браузера Opera была создана для Linux, MacOS. Очень популярной стала мобильная версия программы.

Браузер "Опера", как полагают эксперты, прекрасно отражал потребности того времени, когда интернет был достаточно медленным (а если и быстрым, то очень дорогим), компьютеры большинства пользователей - не слишком производительными. Постепенно скорость онлайн-каналов возрастала, доступ к нему удешевлялся. Компьютеры стали несоизмеримо мощнее. И потому главное историческое преимущество браузера - быстрота обработки веб-страниц - перестало быть столь важным. Этим эксперты объясняют то, что сегодняшние рыночные позиции Opera далеки от лидирующих. Но, надо отметить, в России этот браузер - в числе самых популярных (по некоторым данным, порядка 15% интернет-пользователей из РФ отдают предпочтение именно норвежской программе).

Браузер от "Яндекса"

Компания "Яндекс" - один из самых узнаваемых в мире российских IT-брендов. Сейчас это крупнейший в РФ поисковик, один из популярнейших почтовых и новостных сервисов. На компьютерах очень многих российских пользователей страница "Яндекс" - главная. В 2010 году компания выпустила свой собственный веб-браузер. Специфика решения, появившегося на рынке, была в тесной интеграции с брендированными сервисами "Яндекса" - поисковой системой, почтой, спутниковыми картами и т. д. Yandex-браузер удивил многих пользователей умением выдавать различные подсказки, ускоряющие нахождение требуемых данных. Многим показался симпатичным другие оценили удобство управления.

Можно ли сказать, что созданный компанией "Яндекс" web-браузер - это на 100% российская разработка? Конечно же нет. В основе программы - исходный код Chromium, полностью открытый для IT-специалистов всего мира. Как мы уже сказали выше, любой человек может создать свой браузер на его основе (собственно, так и происходит - сейчас на основе Chromium созданы сотни, если не тысячи, известных и не очень программ для просмотра веб-страниц). Поэтому, стоит признать (никоим образом не принижая заслуг компании "Яндекс") - главная роль в появлении популярного российского браузера принадлежит Google.

Puffin: браузер для iOS

Во второй половине 2000 годов в мире стали набирать популярность мобильные гаджеты. Одним из технологических законодателей мод в этом сегменте стала компания Apple, выпустившая несколько линеек устройств под управлением брендированной операционной системы - iOS. Под эту платформу (равно как и под конкурирующие - Android, Windows Mobile и т. д.) стали выпускаться новые браузеры от ведущих мировых компаний-разработчиков. Opera, Google и другие известные корпорации создали решения, совместимые с гаджетами от Apple. Вместе с тем наряду с этими решениями очень популярным стал браузер Puffin Web Browser. Каковы особенности этой программы?

Особенность платформы iOS в том, что она не поддерживает одну из самых популярных в мире мультимедийных технологий - Flash. По этой причине многие из сайтов, контент которых выстроен на базе этого стандарта, могут отображаться в устройствах от Apple не очень корректно. Браузер Puffin стал решением, которое призвано облегчить пользователям iOS-девайсов задачу, связанную с просмотром сайтов, где есть Flash-контент. Эксперты и пользователи, которые тестировали эту программу, отзываются о ней в целом очень положительно. Главная задача, возложенная на браузер - проигрывание flash-файлов, выполняется хорошо.

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 Холст Другие языки

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