Браузер загружает веб страницу и отображает ее в соответствии с тегами html
Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки — это то, что мы видим на Web -страниц е (текст или рисунок), обычно выделенный синим цветом и подчеркиванием. Активизация гиперссылки вызывает переход на другую страницу.
Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Web -страницу, указа н ную в адресной части ссылки.
Адресная часть гиперссылки представл я ет собой URL - а др ес (URL — Universal Recource Locator — универсальный указатель р есурсов) докуме н та, на который у каз ы вает ссылка. URL -адрес документа в Интернете включает в себя протокол доступа, доменное имя или IP -адрес сервера, путь к файлу и имя файла Web -страницы.
Запишем URL -адрес Web -сайта, размещенного на сервере www . h o st. r u , причем начальная страница расположена в каталоге Web-сайт в файле i ndex.htm. Следовательно, универсальный указатель ресурсов принимает вид:
Язык разметки гипертекс т а , Создание Web - с раниц осуществляется с помощью языка разметки гипертекста ( Hyper Text Markup Language — HTML). Основа используемой в HTML технологии состоит в том, что в обычный текстовый документ вставляются управляющ и е символы ' тэги), в результате мы получаем т екстовый документ, который при просмотре в брау з ере мы видим в форме Web -страницы. С помощью тэгов можно изменять размер, начертание и цвет символов, фон, определять положение текста на странице, вставлять гиперссылки и т. д.
Web -страница може т быть мультимеди й ной, т. е. содержать ссылки на различные мультимедийные объекты: графические изображения, анима ц ию, звук и видео.
Интерактивные Web -страницы содержат формы, которые может заполнять посетитель. На форме могут бы т ь размещены элементы управления: текстовые поля, списки, переключатели, флажки и др.
Язык разметки гипертекста рассматривает документ как совокупность объе к тов, свойства которых можно изменять. Это позволяет создавать динамические Web -страницы, т. е. страницы, которые могут меняться уже после загрузки в браузер. Например, текст может менять цвет, когда к нему подв о дится курсор, заголовок — перемещаться и т. д.
F l as n -те х н оло ги я. Fla sli -технология основана на использовании векторной графики и позволяет создавать мультимедийные интерактивные Web -страницы. Flash -страницы отличают с я малым информационным объемом (высокой скоростью загрузки) и высоким качеством графики. Просматриваются Flash -страницы с помощью FlashPlayer, который может быть свободно скачан из Интернета и установлен как дополнение в браузер.
Web-сайт. Публикации во Всемирной паутине реализуются в форме Web -сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информаци ю, п и священную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web -страниц.
Браузеры — средство доступа к информационным ресурсам Всемирной паутины. Для путешествий по Всемирной паутине используются специальные программы — браузеры. Браузер загружает Web -страницу и отображает ее в соответствии с тэгами языка разметки гипертекста (HTML). В настоящее время наиболее распространенными браузерами являются Internet Explorer (его русскоязычная версия часто называется Обозреватель), SeaMonkey (Навигатор) и др.
После загрузки в браузер начальной (домашней) страницы для путешествия по Всемирной паутине можно поступать различными способами:
- воспольз о ваться ссылками загруженной в браузер Web -стран и ц ы;
- в строку Адрес ввести адрес (URL) Web -страницы;
- воспользоваться «зак л адками» Web - с траниц.
Сохранение Web -страниц. В процессе просмотра в браузере Web -страниц их копии и связанные с ними мультимедийные файлы автоматически сохраняются в кэш - памя т и локального компьютер е. Пользователь может установить объем кэш-памяти и место ее размеще н ия в определенной папке на жестком диске. В случае нехватки места на жестком диске кэш-память можно очистить.
Загрузка копий Web -страниц из кэш-памяти локального компьютера существенно ускоряет их просмотр, однако в этом случае может возникну ть ситуация, когда Web -страница в Интернете изменилась, а в браузере мы будем пр о сматривать ее устаревшую копию.
Найти важные и интересные Web -страницы в кэш-памяти довольно трудно, поэтому полезно специально сохранять их в о п ределенной папке на локальном компьютере. Можно выбрать различные варианты сохранения W e b -страниц:
- сохранение страницы в формате Web - страница (т олько HTM L ) приведет к сохранению самой страниц ы но при этом не сохранятся связанные с ней рисунки, звук о вые и прочие файлы;
- сохранение страницы в формате ТХТ приведет к сохранению самой страницы в текстовом форма т е;
- сохранение страницы в формате Web -страница полност ь ю привед е т к сохранению не только самой страницы но и связанных с ней рисунков, звуковых и прочих файлов в отдель н ой п апке.
Можно сохранить не только Web -страницу полностью, но и отд е льные части: текст, изобра ж ения или ссылки.
Контр о льные вопросы
1. Из каких двух частей состоит гиперссылка? Какую функцию выполняет каждая из частей?
2. Какие части включает URL -адрес документа в Интернете?
3. В чем состоит различие между языком разметки гипертекста и языками программирования?
4. Всемирная паутина состоит из Web - с траш п ? Web -сайтов? Интернет-порталов?
Тематически связанные веб-страницы образуют веб-сайты. Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки — это то, что мы видим на веб-странице: текст (обычно выделенный синим цветом и подчёркиванием) или рисунок, выделенный синей рамкой. Активизация гиперссылки — щелчок на ней мышью — вызывает переход на другую страницу.
Гиперссылка на веб-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на вебстраницу, указанную в адресной части ссылки.
Адресная часть гиперссылки представляет собой URL-адрес (URL: Universal Recource Locator — универсальный указатель ресурса) документа, на который указывает ссылка. URL-адрес документа в Интернете включает протокол доступа, доменное имя или IP-адрес сервера, путь к файлу и имя файла веб-страницы.
Следовательно, универсальный указатель ресурсов примет вид:
Он состоит из трёх частей:
Язык разметки гипертекста. Создание веб-страниц осуществляется с помощью языка разметки гипертекста HTML (Hyper Text Markup Language). Основа используемой в HTML технологии состоит в том, что в обычный текстовый документ вставляются управляющие символы — теги. В результате мы получаем текстовый документ, который при просмотре в браузере видим в форме веб-страницы. С помощью тегов можно изменять размер, начертание и цвет символов, выбирать фон, определять положение текста на странице, вставлять гиперссылки и т. д.
Веб-страница может быть мультимедийной, т. е. содержать ссылки на различные мультимедийные объекты: графические изображения, анимацию, звук и видео.
Интерактивные веб-страницы содержат формы, которые может заполнять посетитель. На форме могут быть размещены элементы управления: текстовые поля, списки, переключатели, флажки и др.
Язык разметки гипертекста рассматривает документ как совокупность объектов, свойства которых можно изменять. Это позволяет создавать динамические веб-страницы, т. е. страницы, которые могут меняться уже после загрузки в браузер. Например, текст может менять цвет, когда к нему подводится курсор, заголовок — перемещаться и т. д.
Флеш-технология. Флеш-технология (flash) основана на использовании векторной графики и позволяет создавать мультимедийные интерактивные веб-страницы. Флеш-страницы отличаются малым информационным объёмом (высокой скоростью загрузки) и высоким качеством графики.
Веб-сайт. Публикации во Всемирной паутине реализуются в форме веб-сайтов. Веб-сайт содержит информацию, посвящённую какой-либо теме или проблеме. Веб-сайт состоит из веб-страниц.
Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на основные разделы сайта (веб-страницы). Гиперссылки также имеются на других веб-страницах сайта, что обеспечивает пользователю возможность свободно перемещаться по сайту.
Браузер. Это программное средство для доступа к информационным ресурсам Всемирной паутины. Браузер загружает веб-страницу и отображает её в соответствии с тегами языка разметки гипертекста (HTML). В настоящее время наиболее распространёнными браузерами являются Chrome, Яндекс. Браузер, Opera, Mozilla FireFox, Internet Explorer, Safari.
После загрузки в браузер начальной (домашней) страницы «путешествовать» по Всемирной паутине можно различными способами:
• воспользоваться ссылками загруженной в браузер веб-страницы;
• в строку Адрес ввести адрес (URL) нужной веб-страницы;
• воспользоваться закладками веб-страниц.
Сохранение веб-страниц. В процессе просмотра в браузере вебстраниц их копии и связанные с ними мультимедийные файлы автоматически сохраняются в кэш-памяти локального компьютера. Пользователь может установить максимальный объём кэш-памяти и место её размещения в определённой папке на жёстком диске. В случае нехватки места на жёстком диске кэш-память можно очистить.
Загрузка копий веб-страниц из кэш-памяти локального компьютера существенно ускоряет их просмотр, однако в этом случае может возникнуть ситуация, когда веб-страница в Интернете изменилась, а в браузере мы будем просматривать её устаревшую копию.
Найти важные и интересные веб-страницы в кэш-памяти довольно трудно, поэтому полезно специально сохранять их в определённой папке на локальном компьютере. Можно выбрать различные варианты сохранения веб-страниц:
• сохранение страницы в формате web-страница (только HTML) приведёт к сохранению самой страницы, но при этом не сохранятся связанные с ней рисунки, звуковые и прочие файлы;
• сохранение страницы в формате TXT приведёт к сохранению самой страницы в текстовом формате;
• сохранение страницы в формате web-страница полностью приведёт к сохранению не только самой страницы, но и связанных с ней рисунков, звуковых и прочих файлов в отдельной папке.
Можно сохранить не только веб-страницу полностью, но и отдельные её части: текст, изображения или ссылки.
Off-line браузеры. Для быстрой загрузки веб-сайтов с целью их дальнейшего неспешного просмотра в автономном режиме используются специальные программы — off-line браузеры.
Off-line браузеры (например, Offline Explorer) позволяют загружать на локальный компьютер веб-сайты целиком или отдельные части сайта по выбору. Пользователь может установить необходимую «глубину» загрузки веб-сайта (количество вложенных каталогов), загрузку связанных со страницами мультимедиа файлов, загрузку по гиперссылкам веб-страниц с других веб-серверов и т. д. Имеется возможность продолжения загрузки сайта после разрыва соединения и обновления ранее загруженных сайтов.
Вопросы и задания
1. Из каких двух частей состоит гиперссылка? Какую функцию выполняет каждая из её частей?
2. Из каких частей состоит URL-адрес документа в Интернете?
3. Как вы думаете, в чём главное различие между языком разметки гипертекста и языками программирования?
4. Всемирная паутина состоит из веб-страниц? Веб-сайтов? Интернет- порталов?
Следующая страница Практическая работа 3.2. Настройка браузера
Cкачать материалы урока
Технология WWW
Технология WWW позволяет создавать ссылки (их называют гиперссылками), которые реализуют переходы не только внутри исходного документа, но и на другой документ, находящийся на данном компьютере, и что самое главное, на любой документ любого компьютера, подключенного в данный момент к сети Интернет. Web-страницы с помощью гиперссылок связаны между собой и образуют Всемирную паутину.
- представляет собой множество информационных ресурсов, организованных в единое целое;
- объединяет многочисленные ресурсы, размещённые в компьютерах по всему миру;
- организована так, что в ней информационные ресурсы представлены не в линейной последовательности, а снабжены гиперссылками, явно указывающие возможные переходы, связи между ресурсами.
Для просмотра информации, полученной от веб-сервера, на клиентском компьютере применяется специальная программа — веб-браузер . Основная функция веб-браузера — отображение гипертекста. Всемирная паутина неразрывно связана с понятиями гипертекста и гиперссылки. Большая часть информации в WEb представляет собой именно гипертекст.
Гиперте́кст — термин, введённый Тедом Нельсоном в 1963 году для обозначения текста «ветвящегося или выполняющего действия по запросу».
Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки - это то, что мы видим на Web-странице (текст или рисунок), обычно выделенный синим цветом и подчёркиванием. Активизация гиперссылки вызывает переход на другую страницу.
Адресная часть гиперссылки представляет собой URL-адрес (URL - Universal Recource Locator - универсальный указатель ресурсов) документа, на который указывает ссылка.
URL-адрес = протокол доступа + доменное имя ( IP-адрес сервера) + путь к файлу + имя файла Web-страницы
Язык разметки гипертекста
Создание Web-страниц осуществляется с помощью языка разметки гипертекста (Hyper Text Markup Language - HTML). Основа используемой в HTML технологии состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги), в результате мы получаем текстовый документ, который при просмотре в браузере мы видим в форме Web-страницы. С помощью тэгов можно изменять размер, начертание и цвет символов, фон, определять положение текста на странице, вставлять гиперссылки и т.д.
Web-страница может быть мультимедийной, т.е. содержать ссылки на различные мультимедийные объекты: графические изображения, анимацию, звук и видео.
Интерактивные страницы содержат формы, которые может заполнять посетитель. На форме могут быть различные элементы управления: текстовые поля, списки, переключатели, флажки и др.
Язык разметки гипертекста рассматривает документ как совокупность объектов, свойства которых можно изменять. Это позволяет создавать динамические Web-страницы, т.е. страницы, которые могут меняться уже после загрузки в драузер. Например, текст можно менять цвет, когда к нему подводится курсор, заголовок - перемещаться и т.п.
Flash - технология
Технология Flash основана на использовании векторной графики в формате Shockwave Flash (SWF) разработанная компанией Macromedia®. Это далеко не первый векторный формат, но именно его создателям удалось найти наиболее удачное сочетание между изобразительными возможностями графики, инструментальными средствами для работы с ней, а также механизмом включения результата в Web-страницы. Основным преимуществом Flash технологии является его межплатформенность, то есть этот формат может использоваться на любой аппаратно-программной платформе (в частности, как на компьютерах Macintosh, работающих под управлением операционной системы MacOS, так и на компьютерах IBM с ОС Windows). И еще одна весомая особенность Flash технологии: созданные на его основе изображения могут быть не только анимированы, но еще и дополнены интерактивными элементами и звуковым сопровождением.
Межплатформенность и возможность создания интерактивных мультимедийных приложений, обусловили быстрый рост популярности Flash технологии среди Web-дизайнеров. Поэтому почти одновременно с появлением самого формата фирмой Macromedia® были созданы встраиваемые компоненты (Plug-In) для двух основных браузеров Сети: Internet Explorer и Netscape Communicator. Это и способствовало еще более широкому распространению Flash технологии на просторах всемирной сети Интернет. В результате разработчики этих браузеров, объявили о намерении включить поддержку Flash непосредственно в ядро своих продуктов.
Web - сайт
Изначально веб-сайты представляли из себя совокупности статических документов. В настоящее время большинству из них свойственна динамичность и интерактивность. Для таких случаев специалисты используют термин веб-приложение - готовый программный комплекс для решения задач веб-сайта. Веб-приложение входит в состав веб-сайта, но веб-приложение без данных сайтом является только технически.
Аппаратные сервера для хранения веб-сайтов называются веб-серверами. Сама услуга хранения называется веб-хостингом. Раньше каждый сайт хранился на своём собственном сервере, но с ростом Интернета технологическим улучшением серверов на одном компьютере стало возможно размещение множества сайтов (виртуальный хостинг). Сейчас сервера для хранения только одного сайта называются выделенными (англ. dedicated).
Один и тот же сайт может быть доступен по разным адресам и хранится на разных серверах. Копия оригинального сайта в таком случае называется зеркалом. Существует так же понятие оффлайновая версия сайта - это копия сайта, которая может быть просмотрена на любом компьютере без подключения к компьютерной сети и использования серверного ПО.
Интернет - портал
Что такое портал? В книге о Гарри Потере фигурирует магическое устройство с таким названием – оно позволяет героям современной сказки мгновенно переместиться в нужное место.
В различных интернет-порталах эти части развиты неодинаково. Одни порталы позиционируют себя в основном как поисковые системы, другие – информационные либо сервисные. Но каждый развивает все три направления. Набор предоставляемых порталом услуг зависит от владельца сайта, его возможностей, желания и фантазии. Все это служит одной цели – удовлетворить потребности как можно большего числа потребителей.
Интернет-порталы принято подразделять на горизонтальные и вертикальные.
Горизонтальные порталы, их еще называют универсальные. Ориентированы на максимально широкую аудиторию, предлагают разноплановый контент и имеют большой набор разнообразных сервисов. Как правило, они выстраиваются вокруг поисковых систем.
Вертикальные порталы или порталы-ниши. Это порталы узко тематические. Они направлены на какую-то определенную тематику или сферу деятельности и представляют интерес для пользователей сети по определенным направлениям. Среди таких тематических порталов наиболее распространены финансовые, технологические, развлекательные и религиозные ресурсы, а также это могут быть региональные порталы – сайты какого-нибудь региона, города. Как правило, такие порталы образуют вокруг себя «сообщества» («community») – более-менее постоянную группу людей, систематически общающихся между собой в чате или форуме этого портала.
Существует разновидности интернет-порталов, которые в какой-то степени можно отнести к вертикальным.
Корпоративные порталы - это веб-сайты, которые предназначены для внутреннего пользования сотрудниками какой-либо компании. Они предоставляют доступ сотрудникам к корпоративной информации и к ограниченному количеству внешних веб-сайтов. В отличие от публичных, такие порталы доступны для ограниченного числа пользователей. Примером такого портала может служить сайт про строительство коттеждей.
Можно выделить еще порталы общего назначения – они объединяют несколько тем и ориентированы на широкую аудиторию и смешанные порталы - они сочетают в себе функции электронной торговли и справочных сервисов.
В последнее время происходит некое размывание границы между понятиями портал и сайт. В самом деле, мы говорим, что «портал – это сайт, который…». Давайте попробуем разобраться, чем же отличается интернет-портал от интернет-сайта? Если сайт большой, у него разветвленная внутренняя структура и большое количество ссылок, может ли он называться порталом?
Браузеры
Для путешествий по Всемирной паутине используются специальные программы - браузеры . Браузер загружает Web-страницу и отображает её в соответствии с тэгами языка разметки гипертекста (HTML). В настоящее время известно достаточно большое количество браузеров (Internet Explorer, Mozilla Firefox, Google Chrome, Chromium, Amigo и др.
После загрузки в браузер начальной (домашней) страницы для путешествия по Всемирной паутине можно приступить различными способами:
- воспользоваться ссылками загружённой в браузер Web-страницы;
- в строку Адрес ввести адрес (URL) Web-страницы;
- воспользоваться "закладками" Web-страниц.
Сохранение Web - страниц
В процессе просмотра в браузере Web-страниц их копии и связанные с ними мультимедийные файлы автоматически сохраняются в кэш-памяти локального компьютера. Пользователь может установить объём кэш-памяти и место её размещения в определённой папке на жёстком диске. В случае нехватки места на жёстком диске кэш-память можно очистить.
Загрузка копий Web-страниц из кэш-памяти локального компьютера существенно ускоряет их просмотр, однако в этом случае может возникнуть ситуация, когда Web-страница в Интернете изменилась, а мы будем просматривать её устаревшую копию.
Найти нужные и интересные Web-страницы в кэш-памяти довольно трудно, поэтому полезно специально сохранять их в определённой папке на локальном компьютере. Можно выбрать различные варианты сохранения Web-страниц:
- сохранение страницы в формате Web-страница (только HTML) приведёт к сохранению самой страницы, но при этом не сохраняются связанные с ней рисунки, звуковые и прочие файлы;
- сохранение в формате TXT приведёт к сохранению самой страницы в текстовом формате;
- сохранение страницы в формате Web-страница полностью приведёт к сохранению не только самой страницы, но и связанных с ней рисунков, звуковых и прочих файлов в отдельной папке.
Можно сохранить не только Web-страницу полностью, но и отдельные её части: текст, изображения или ссылки.
На собеседованиях мы часто просим кандидата рассказать настолько подробно, насколько он может, что происходит, когда вводишь в адресной строке браузера адрес сайта и нажимаешь кнопку “Ввод”. В зависимости от того, кого собеседуем — фронтендщика или бекендщика — мы ожидаем разные ответы. А как бы выглядел идеальный ответ на этот вопрос? Ниже мой вариант ответа.
Итак, пользователь вводит в адресной строке браузера адрес сайта и нажимает кнопку “Ввод”.
Браузер состоит из нескольких компонентов, одним из которых является User Interface. Адресная строка как раз является одной из частей этого компонента.
User Interface после ввода URL в адресной строке передаёт управление компоненту Browser Engine, который отвечает за взаимодействие различных компонентов браузера.
Чтобы сделать запрос по указанному URL, браузеру нужно знать IP сервера. Первым делом он смотрим в свой локальный кэш DNS.Компонент Browser Engine как раз имеет доступ к этому кэшу.
Если там нет соответствующей записи, то браузер передаёт управление операционной системе, которая проверяет свой кэш DNS. Если и там отсутствует соответствующая запись, то ОС смотрит в локальные хосты (файл /etc/hosts в Unix-системах). Если запись о хосте отсутствует, то операционная система обращается к интернет провайдеру, у которого тоже есть свой кэш DNS на своих рекурсивных серверах DNS. В случае отсутствия записи в кэше на серверах DNS провайдера, запрос идёт на корневой DNS. У корневого DNS тоже есть кэш. Если соответствующей записи в кэше корневого DNS нет, запрос идёт дальше по цепочке серверов DNS.
Если на любом из этапов находится нужная запись, то она сохраняется во всех кэшах и управление возвращается браузеру, который уже знает IP нужного сервера.
Процесс получения IP адреса называется DNS lookup.
На сервере запрос принимает веб-сервер (например, nginx или apache).
В конфигурационных файлах веб-сервера прописаны обслуживаемые хосты. Веб-сервер достаёт хост из заголовка запроса host и сопоставляет с теми, которые указаны в конфигурации. Если есть совпадение, то веб-сервер находит в конфигурационном файле правила обработки такого запроса и выполняет их. Дальнейшее поведение сервера зависит от технологии и особенностей приложения. Здесь может происходить работа с базами данных, кэшами, запросы к другим серверам и сервисам, выполнение различных скриптов. Для простоты представим, что приложение сгенерировало файл HTML, и веб-сервер отдал его браузеру.
Заголовки ответа сервера можно увидеть в Chrome DevTools на вкладке Networking, выбрав нужный запрос
Если длина контента больше нуля и тип контента поддерживается браузером, то браузер пытается его обработать. В нашем случае браузер получает файл HTML с соответствующим заголовком Content-Type. Браузер начинает разбор (parsing) этого файла с первой инструкции, которой является инструкция . DOCTYPE указывает на версию HTML, чтобы браузер понимал, каким правилам следовать во время разбора (какие теги как обрабатывать).
Если DOCTYPE отсутствует, то браузер переключится в режим quirks mode и попытается разобрать документ HTML, однако многие элементы будут проигнорированы. Если указан корректный DOCTYPE, то браузер будет работать в standards mode и будет разбирать документ в соответствии с правилами той версии, которая указана в DOCTYPE.
Rendering Engine начинает разбор документа HTML.
Создаётся DOM (Document Object Model). В браузере этот объект доступен по ссылке, которая хранится в переменной document. У документа есть несколько состояний. Первое состояние — loading. Оно означает, что документ только начал формироваться.
Состояние документа хранится в переменной document.readyState.
Также создаётся объект styleSheets, который будет хранить все стили.
Все стили на странице доступны по ссылке, которая хранится в переменной document.styleSheets.
Любой файл — это набор байтов. Браузер берёт полученный набор байтов и преобразует их в символы по таблице символов в соответствии с кодировкой, которая была передана в заголовке Content-Type. В нашем примере это кодировка UTF-8.
Следующий процесс —разбивание текста на смысловые блоки (tokenization). Так браузер распознаёт теги , и проч., а также понимает, какие правила к какому тегу применять (например, поддерживаемые атрибуты).
Далее токены собираются в узлы (nodes). Эти узлы и сохраняются в DOM со всеми взаимными связями.
Во время разбора, если Rendering Engine встречает ссылку на внешний ресурс, то он передаёт команду загрузить этот ресурс компоненту Networking Component. Это может быть ссылка на стили, скрипты, картинки и т.п. Networking Component ставит все ресурсы в очередь на загрузку. Каждому ресурсу Networking Component присваивает приоритет.
Приоритеты ресурсов можно посмотреть в Chrome DevTools на вкладке Networking в колонке Priority.
Так, у HTML, CSS и шрифтов самый высокий приоритет. У изображений приоритет изначально низкий, но если Rendering Engine обнаружит, что изображение попадает в поле видимости (view port) пользователя, то повысит приоритет до среднего. Приоритет скрипта зависит от положения на странице и способа загрузки. У асинхронных скриптов (async/defer) низкий приоритет. У скриптов, которые в документе перед изображениями — высокий, у тех, что после хотя бы одного изображение — средний.
По возможности браузер пытается загружать ресурсы параллельно. Однако, он не может загружать параллельно более 6 ресурсов с одного домена.
Кроме того, когда Rendering Engine отдаёт команду компоненту Networking Component на синхронную загрузку стиля или скрипта, он останавливает разбор документа.
С загрузкой стилей происходит подобный процесс преобразования из байтов в Object Model (CSSOM): байты -> символы -> токены -> узлы -> CSSOM.
Немного иначе происходит загрузка скрипта. Вместо того, чтобы вернуть управление Rendering Engine’у, Networking Component . передаёт управление JavaScript Interpreter, который преобразует байты в исполняемый код: байты -> символы -> токены -> Abstract Syntax Tree (evaluating). Далее в работу вступает компилятор, который оптимизирует AST, кэширует некоторые участки кода, компилирует его на лету (JIT compilation) в исполняемый код и исполняет (executing). Однако исполняется скрипт только, когда готова CSSOM. До тех пор скрипт стоит в очереди на исполнение.
Во многих современных браузерах во время исполнения JavaScript в отдельном потоке продолжается сканирование документа на наличие ссылок на другие ресурсы и постановка ресурсов в очередь на скачивание (Speculative parsing).
Каждый этап разбора HTML, CSS и JS можно увидеть в Chrome DevTools во вкладке Performance
Если при загрузке скрипта Rendering Engine видит у скрипта атрибут async, то он не останавливает разбор документа во время загрузки скрипта. Скрипт также станет в очередь на исполнение, дожидаясь, когда CSSOM будет готова.
Если при загрузке скрипта Rendering Engine видит у скрипта атрибут defer, то он не останавливает разбор документа во время загрузки скрипта, но когда скрипт загрузится, он станет в очередь на исполнение, которая заработает при возникновении события DOMContentLoaded. К этому моменту CSSOM будет уже готова.
Когда Rendering Engine заканчивает разбор документа, он вызывает событие DOMContentLoaded, и состояние документа меняется на interactive. При этом ресурсы (например, картинки) могут продолжать загружаться.
Когда все ресурсы загрузились, вызывается событие load, а состояние документа меняется на complete.
После того, как документ полностью разобран и сформированы DOM и CSSOM, Rendering Engine начинает построение Render Tree. В него попадут все элементы, которые нужно отрисовать. Некоторые элементы изначально могут быть невидимыми — их не нужно рисовать. Для каждого элемента, который “выпадает” из потока (например, используется position: absolute), будет создаваться отдельная ветка в Render Tree.
Во время Rendering Tree происходит сопоставление узлов из DOM и узлов CSSOM.
Свойства узла можно получить с помощью функции window.getComputedStyles(узел).
Когда Rendering Tree готов, Rendering Engine запускает процесс layout. Он заключается в вычислении размеров и позиций каждого элемента на странице.
Следующий этап — paint. Rendering Engine вычисляет цвет каждого пикселя.
И, наконец, последний этап — composite. Компонент UI Backend слой за слоем отрисовывает элементы на странице. При этом, если требуется отрисовать изображение, которое ещё не загрузилось, во время процесса layout, Rendering Engine зарезервирует место для изображения, если у него указаны ширина и высота. Rendering Engine вынесет на отдельный слой те элементы, стили которых содержат правила opacity, transform или will-change. Более того, эти слои Rendering Engine передаст для обработки GPU.
Если требуется отобразить текст, для которого используется нестандартный шрифт, то современные браузеры скроют текст до момента загрузки шрифта (flash of invisible text).
В современных браузерах скачивание документа, его разбор и отрисовка происходят по кускам, частями.
В документе HTML могут присутствовать некоторые мета-теги, которые могут менять порядок загрузки ресурсов, а также их приоритет.
К примеру, мета-тег dns-prefetch вынуждает Rendering Engine обратиться к Networking Component и получить IP нужного домена ещё до того, как Rendering Engine встретить его в документе.
Мета-тег prefetch вынудит Networking Component поставить указанный ресурс в очередь на загрузку с низким приоритетом.
Мета-тег preload вынудит Networking Component поставить указанный ресурс в очередь на загрузку с высоким приоритетом.
Мета-тег preconnect вынудит Networking Component заранее подключиться к другом хосту, то есть пройти нужные этапы: DNS lookup, redirects, hand shakes.
Время, которое затрачивается на каждый этап, происходящий во время запроса и разбора документа HTML, хранится в объекте performance.timing.
Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ — это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.). HTML-документ имеет расширение .html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный — где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем элемента: …имя элемента> . Между начальным и закрывающим тегами находится содержимое элемента — контент.
Элементы, представленные одиночными тегами, не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, элемент создаст кнопку с текстом Кнопка внутри.
Элементы могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки»), например, следующая запись будет неверной:Текст
.HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы — заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов — заголовка — содержимое элемента и содержательной части — содержимое .
Структура веб-страницы
1. Структура HTML-документа
Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие элементы, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
Элементы, находящиеся внутри элемента , образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент является корневым элементом.
Рис. 1. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
- Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем элементов: ,
, , и т.д.
- Потомок — элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент
является потомком одновременно для и .
- Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 является родительским только для и . Элемент
является родительским только для .
- Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,
и являются дочерними по отношению к .
- Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и
являются между собой сестринскими.
Является корневым элементом документа. Все остальные элементы содержатся внутри . . Все, что находится за пределами элемента, не воспринимается браузером как HTML-код и никак им не обрабатывается.
Для элемента доступен атрибут, описанный в таблице ниже, а также глобальные атрибуты.
Атрибут | Описание, принимаемое значение |
---|---|
manifest | С помощью значения атрибута указывается путь к документу кэша манифеста, например: |
Раздел
. содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу. 1.2.1. ЭлементОбязательным элементом раздела является . Текст, размещенный внутри элемента , отображается в строке заголовка веб-браузера.
Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. ЭлементНеобязательным элементом раздела является элемент . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных.
Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью элемента можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Индексация и переход по ссылкам разрешены:
Индексация разрешена, переход по ссылкам запрещен:
Индексация и переход по ссылкам запрещены:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh :
Для элемента доступны атрибуты, описанные в таблице ниже, а также глобальные атрибуты.
1.2.3. ЭлементВнутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
Атрибут | Описание, принимаемое значение |
---|---|
media | Определяет, для какого типа устройства предназначены те или иные каскадные таблицы стилей. Внутри таблицы стилей CSS специфичные правила для определенных устройств прописываются с помощью media query. |
nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
type | Определяет MIME-тип подключаемого файла со стилями, в данном случае type="text/css" . |
Элемент может содержать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id ) присвоить элементу соответствующее название:
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:
1.2.4. ЭлементЗадать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css , например, style.css .
Подключить файл со стилями к веб-странице можно двумя способами:
- через директиву @import url
- с использованием элемента . Данный способ является предпочтительным.
Элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
Атрибут | Описание, принимаемое значение |
---|---|
crossorigin | Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта. anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована. use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована. |
href | Основной атрибут элемента, в качестве значения выступает путь к файлу со стилями. |
hreflang | Определяет язык текста в документе, на который идет ссылка. |
media | Определяет тип устройства, к которым должен быть применен ресурс ссылки. |
nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
rel | Атрибут определяет отношения между текущим документом и документом, на который идет ссылка. alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom), . archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов. author ссылка на страницу об авторе документа или на страницу с контактными данными автора. bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка. external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта. first указывает ссылку, ведущую на первый документ из последовательности документов. help ссылка на документ со справкой. icon определяет путь к иконке, которая будет использована для текущего документа. last указывает ссылку, ведущую на последний документ в последовательности документов. license ссылка на сведения об авторских правах для документа. next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии. nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер. noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке. pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него. prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка. prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии. search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок. stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа. tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу. up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре. |
sizes | Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , и может принимать следующий значения: ширина х высота — определяет список размеров, разделенных пробелами, каждый размер должен быть в формате — ширина х высота (размеры иконки задаются в пикселях), например: ; any — иконка может масштабироваться до любого размера. |
title | Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст. |
type | Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css" . |
Элемент позволяет присоединять к документу различные сценарии. Текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
1.3. ЭлементВ разделе располагается все содержимое документа.
Для элемента доступны атрибуты, приведенные в таблице ниже, а также глобальные атрибуты.
Читайте также: