how browser works?

Browser

Основное предназначение браузераОтображать веб-ресурсы

Client

Server

Request

Response

URI

URI=URL+URN OR URI=URL OR URI=URNURI (Uniform Resource Identifier)- это символьная

строка, позволяющая идентифицировать какой-либо ресурc

URL (Uniform Resource Locator)- это URI, который, предоставляет информацию о местонахождении ресурсамашина: город N/ улица М/ квартира LURN (Uniform Resource Name)- это URI, который

только идентифицирует ресурс в определённом пространстве имён (и, соответственно, в определённом контексте), но не указывает его местонахождения

Паспорт УА: Иванов Иван Иванович, паспорт серия КМ номер 123456

По каким правилам показываются странички?Существует Консорциум W3C:

Спецификации: HTML CSS и т.д.

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

Исторически сложились основные элементы пользовательского интерфейса браузераАдресная строка для ввода URIКнопки навигации "Назад" и "Вперед"ЗакладкиКнопки обновления и остановки загрузки

страницыКнопка "Домой" для перехода на главную

страницу

Разумеется, существуют и специфические функции

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

User interface

Browser engine

Rendering engine

Networking

JS Interpret

er

UI Backend

Data

Persista

nce

Назад, вперед и т.д. кроме окна

Управляет взаимодействием UI &

Rendering

Отвечает за вывод на экран (СА кода

и вывод)

Сетевые вызовы. http

Анализ и выполнение JS

Отрисовка окон, полей со списками

и т.д.

Cookie, favicon, cache,…

Модуль отображения

По умолчанию HTML, XML-документы, а также картинки.

Plugins:Специальные подключаемые модули (расширения для браузеров) делают возможным отображение другого содержания, например PDF-файлов. 

WEBKIT

DOM (Document Object Model)

HTMLHtmlElement

HTMLBodyElement

HTMLButtonElement HTMLDivElement

ButtonText HTMLImageElement

Модуль отображения

Основная схема работы

WEBKIT

Parsing HTML to construct the DOM

tree

Render tree

construction

Layout of the render

tree

Painting the render

tree

Kb fragme

nt

СА HTML + CSS

Прямоугольники

Цвет, размер в порядке вывода

КомпоновкаКоордина

тыX Y

ОтрисовкаBackend UI

DOM

HTML

HTMLStyle Sheets

HTML parser

CSS parser

DOM Tree

Style Rules

RenderTree

Layout

Painting

Display

Attachment

Лексический анализРазделяет информацию на токены или лексемы.Токены образуют словарь языка = элемент для создания документа

В естественном языке токенами бы были все слова, которые можно найти в словарях.

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

грамматические правила = словарь и синтаксис

бесконтекстная грамматика

Синтаксический анализ - итеративен

ЛА

СА

Синтаксическое дерево

ТокенТокены не соответствуют правилам

В WebKit используется два известных генератора: Flex для создания лексического и Bison для создания синтаксического анализатора (они также встречаются под названиями Lex и Yacc). Во Flex загружается файл с определениями токенов в регулярных выражениях, а в Bison – синтаксические правила языка

Синтаксический анализатор HTMLСловарь и синтаксис определены в W3C

DTD (Document Type Definition) – контекстная грамматика

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

HTML(контекстная грамматика):Язык имеет "щадящий" характер.В браузерах заложены механизмы обработки

некоторых частых ошибок в коде HTML.Цикл синтаксического анализа характеризуется

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

Большая часть кода синтаксического анализатора служит для исправления ошибок разработчиков.

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

Webkit сам фиксит ошибки«Синтаксический анализатор обрабатывает входящие токены и создает дерево документа. Если документ написан без ошибок, выполняется его стандартный анализ.»

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

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

2. Элемент нельзя добавить напрямую. Возможно, автор документа забыл вставить тег между элементами (или такой тег необязателен). Это касается тегов HTML, HEAD, BODY, TBODY, TR, TD, LI

3. Блочный элемент добавлен внутрь строчного. Необходимо закрыть все строчные элементы вплоть до следующего в иерархии блочного элемента.

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

Тег </br> вместо <br>

<table> <table> <tr><td>inner table</td></tr> </table> <tr><td>outer table</td></tr> </table>

НО не все конечноЦитата из комментариев к коду WebKit«Поддержка по-настоящему неграмотных документов HTML: никогда не закрываем тег body, так как некоторые особо талантливые разработчики пытаются закрыть его раньше, чем кончается документ. Чтобы закрыть теги, используем метод end().»

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

ScriptsВеб-документы придерживаются синхронной моделиПредполагается, что скрипты будут анализироваться и исполняться сразу же, как только анализатор обнаружит тег <script>.

НО: тег defer, async in HTML5

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

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

Дерево отображения служит для того, чтобы отрисовка содержания выполнялась в правильном

порядке.

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

Как дерево отображения связано с деревом DOMОбъекты обработки соответствуют элементам DOM, но не идентичны им. Невизуальные элементы DOM не включаются в дерево отображения (примером может служить элемент head). Кроме того, в дерево не включаются элементы, у которых для свойства display задан атрибут none (элементы с атрибутом hidden включаются).

Дерево отображения и соответствующее ему дерево DOM

attachment

КомпоновкаКогда только что созданный объект отображения включается в дерево, он не имеет ни размера, ни положения. Расчет этих значений называется компоновкой (layout или reflow).

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

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