how browser works?
DESCRIPTION
Browser. Webkit core: DOM three, syntax analyzers, render three, etc.TRANSCRIPT
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 и их содержание выводится на экран. Для отрисовки используется компонент инфраструктуры пользовательского интерфейса.