Браузер загружает веб страницу и отображает ее в соответствии с тегами html

Обновлено: 08.01.2025

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

Много идей основано на фантастическом (и БЕСПЛАТНОН!) курсе по оптимизации производительности веб-сайта Website Performance Optimization Ilya Grigorik и Cameron Pittman на Udacity. Я очень рекомендую это посмотреть.

Также очень полезной оказалась статья Пола Айриша и Тали Гарсиэль How Browsers Work: Behind the scenes of modern web browsers. Хотя эта статья 2011 года, но многие основы работы браузеров остаются актуальными до сих пор.

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

Начало разбора HTML
Получение внешних ресурсов
Разбор CSS и создание CSSOM
Выполнение JavaScript
Объединение DOM и CSSOM, для построения дерево рендеринга
Расчет макета и отрисовка результата

1. Начало разбора HTML

Когда браузер начинает получать данные HTML страницы по сети, он немедленно запускает свой синтаксический анализатор parser для преобразования HTML в объектную модель документа (DOM) Document Object Model (DOM).

2. Получение внешних ресурсов

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

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

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

Предварительная загрузка ресурсов

3. Разбор CSS и создание CSSOM

Возможно, вы слышали о DOM, но слышали ли вы о CSSOM (CSS Object Model) (объектной модели CSS)? До того, как я начал исследовать эту тему, я об этом ни чего не знал!

Чем CSSOM отличается от DOM, так это тем, что он не может быть построен постепенно, поскольку правила CSS могут перезаписывать друг друга в разных точках из-за specificity (порядка применения свойства). Вот почему загрузка CSS блокирует рендеринг, поскольку до тех пор, пока весь CSS не будет проанализирован и не будет построен CSSOM, браузер не может знать, где и как разместить каждый элемент на экране.

4. Выполнение JavaScript

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

События загрузки

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

После того, как все остальное, например асинхронный JavaScript, изображения и т. д., завершили загрузку, запускается событие window.load.

5. Объединение DOM и CSSOM, для построения дерево рендеринга

Дерево рендеринга представляет собой комбинацию DOM и CSSOM и представляет все, что будет отображаться на странице. Это не обязательно означает, что все узлы в дереве рендеринга будут визуально присутствовать, например узлы со стилями opacity: 0 или visibility: hidden будут включены и могут быть прочитаны программой чтения с экрана и т. д., тогда как те, которые настроены на display: none будет исключены. Кроме того, такие теги, как <head>, не содержащие визуальной информации, всегда будут пропущены.

Как и в случае с движками JavaScript, разные браузеры имеют разные механизмы рендеринга.

6. Расчет макета и отрисовка результата

Теперь, когда у нас есть полное дерево рендеринга, браузер знает, что рендерить, но не знает, где рендерить. Следовательно, необходимо рассчитать макет страницы (то есть положение и размер каждого узла). Механизм рендеринга проходит дерево рендеринга, начиная с вершины и идя вниз, вычисляет координаты, в которых должен отображаться каждый узел.

И вуаля! В конце концов, у нас есть полностью отрисованная веб-страница!

Запустить браузер можно различными способами (из Главного меню , с Панели задач , с Рабочего стола ).

Окно Адрес позволяет выбрать из списка или ввести с клавиатуры URL нужной Web-страницы.

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

Адрес начальной страницы, загружаемой в Обозреватель, можно изменить.

После загрузки домашней страницы можно поступать различными способами:

o воспользоваться ссылками загруженной Web-страницы браузера ;

o в строку Адрес ввести адрес (URL) интересующей Web-страницы;

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

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

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

Для этого в меню Сервис выберите пункт Свойства обозревателя . Откроется диалоговое окно Свойства обозревателя .

Установка правильной кодировки при просмотре Web-страниц

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

Для ускорения загрузки в браузер Web-страниц можно использовать несколько различных методов. При малой скорости соединения с Интернетом (менее 14 400 бит/с) целесообразно отключить в настройках браузера загрузку мультимедийных объектов Web-страниц (графических, анимационных, видео и звука). В результате Web-страницы будут загружаться значительно быстрее, однако информация на них будет представлена только в текстовом виде, без графики и звука.

Пусть нас интересует информация о процессоре Pentium IV фирмы Intel.

Получение информации разных видов с Web-страниц и ее сохранение

Важные и интересные Web-страницы полезно сохранять на локальном компьютере. Можно выбрать различные варианты сохранения Web-страниц:

сохранение страницы в формате HTML приведет к сохранению самой страницы, но при этом не сохранятся связанные с ней рисунки, звуковые и прочие файлы;

сохранение страницы в формате ТХТ приведет к сохранению самой страницы в текстовом формате;

сохранение страницы в формате Web-страница полностью (доступно в Internet Explorer 5.0 и выше) приведет к сохранению не только самой страницы, но и связанных с ней рисунков, звуковых и прочих файлов в отдельной папке.

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

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

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

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

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

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

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

Все поисковые указатели реализуют четыре основных алгоритма поиска простой поиск, расширенный поиск, контекстный поиск и специальный поиск.

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

Расширенный поиск всегда подразумевает запрос из группы слов. При расширенном поиске в большинстве случаев разрешается связывать ключевые слова логическими операторами AND (И), OR (ИЛИ), NOT (HE) и другими. Правила записи образца поиска из ключевых слов и логических операторов в разных системах не одинаковы, но очень похожи. На сайте поисковой системы всегда можно найти описания этих правил.

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

С учетом вышесказанного можно сделать несколько рекомендаций.

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

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

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

Но как сделать, чтобы разыскивались документы, содержащие одно из заданных ключевых слов, то есть как задать соотношение ИЛИ? Попробуйте ввести одно из следующих словосочетаний: Microsoft ИЛИ Windows; Microsoft OR Windows; Microsoft | Windows.

Загрузка файлов из файловых архивов с помощью браузера

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

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

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

Вы здесь: Главная страница Информатика 10 класс Угринович 10 класс 38 2.4. Всемирная паутина

Учебники

Как пользоваться:

Счетчики

Сайт участвует

2.4. Всемирная па у тина

Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки — это то, что мы видим на 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 -сайтов? Интернет-порталов?

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

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

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

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

Эти специфические элементы, называются тегами. Их премняют для определения способа представления веб-старницы. Они практически всегда используются парами, окружая определяемый компонент. Теги разработаны консорциумом W3C (World Wide Web Consortium), который занимается разработкой и продвижением единых стандартов и протоколов, повышающих функциональность всемирной паутины. В настоящее время членами данного консорциума являются более 180 коммерческих, образовательных и правительственны организаций.

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

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

Во всех последующих уроках вы будете находить рекомендации о том, как обеспечить корректное воспроизведение 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>. 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). Так браузер распознаёт теги <html>, <head> и проч., а также понимает, какие правила к какому тегу применять (например, поддерживаемые атрибуты).

Далее токены собираются в узлы (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.

Читайте также: