Олег Мохов: Модель Отображения. Браузеры

Разработчик интерфейсов

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

Олег Мохов

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

:3

1. Поток, контексты, позиционирование, браузерная математика

2. Особенности реализаций модели отображения в разных браузерах

3. Браузеры

Принципы работы современных веб-браузеров

:4

Принципы работы современных веб-браузеров

http://clck.ru/8aCyc

:4

http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/

Механизм работы браузера

Общая схема



Networking



Networking

Rendering



Networking

Rendering

JavaScript



Архитектура браузера

:7

Архитектура браузера

:7

Networking

Networking

:9

Networking

:10

Rendering

Построение дерева

рендеринга

Схема работы модуля отображения

:12

Парсим HTML для построения

DOM дерева

Расстановка элементов дерева

Отрисовка дерева

рендеринга

Пример работы (Webkit)

:13

Пример работы (Firefox)

:14

Rendering

:15

Анализ документа

:16

Лексический анализДокумент Синтаксический

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

деревотокен

Лексический анализ

:17

Сеть Токенизация Конструктор деревьев DOM

Скрипт

document.write

Особенности обработки скриптов

:18

<html>!<body>!Hello world!

</body>!</html>

HTML Example

:19

Алгоритм построения дерева

:20

Синтаксический анализ (особенности)

:21

1. Язык имеет "щадящий" характер. 2. В браузерах заложены механизмы обработки некоторых частых ошибок в коде HTML.

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

Ошибки синтаксиса

:22

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

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

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

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

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

HTML Example

:23

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

HTML Example

:24

if (m_inStrayTableContent && localName == tableTag)! popBlock(tableTag);!

HTML Example

:25

Деревья

<!doctype html>!<html>! <title>Example</title>! <style>! p:last-child { display: none; }! </style>! <div>! <h1>Женское окончание потенциально.</h1> ! <p>Добавлю, что гидродинамический удар конвенционален.</p>! <p>Плазма, в отличие от классического случая, дает комплекс.</p>! </div>!</html>

HTML Example

:27

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

:28

DOM

:29

HTMLHtmlElement

HTMLBodyElement

HTMLDivElement

HTMLHeader1Element HTMLParagraphElement

HTMLParagraphElement

Render tree

:30

Render tree vs DOM

:31

Render tree vs DOM

:31

Render tree vs DOM

:31

• не все блоки из DOM попадают в дерево отображения;

Render tree vs DOM

:31

• не все блоки из DOM попадают в дерево отображения;• в некоторых случаях в render tree будет создаваться

Render tree vs DOM

:31

• не все блоки из DOM попадают в дерево отображения;• в некоторых случаях в render tree будет создаватьсябольше блоков, чем есть в DOM;

CSS

.foo {!width: 10em!height: 10em;!background: red;!

}!?.bar {!width: 10bem;!height: 10em;!background: red;!?

.baz {!width: 10em;!height: 10em;!background: red;!

}

CSS Example

:33




}

CSS Example

:34




}

CSS Example

:35




}

CSS Example

:36

.foo {!background: red;!

}!?.bar {!height: 10em;!background: red;!

}

CSS Example

:37

Reflow и Repaint

Компоновка и отрисовка

Reflow

:40

Reflow

:40

Глобальный Reflow

Reflow

:40



:41


:41

• Первоначальное отображение страницы


:41

• Первоначальное отображение страницы• изменение размеров окна бразуера


:41

• Первоначальное отображение страницы• изменение размеров окна бразуера• изменение размеров шрифта в браузере


:41

• Первоначальное отображение страницы• изменение размеров окна бразуера• изменение размеров шрифта в браузере• и т.п

Инкрементеный Reflow

:42


:42

• вставка новых элементов в DOM


:42

• вставка новых элементов в DOM• изменение атрибутов (например, смена класса)


:42


• смена состояния


:42


• смена состояния• наведение курсора


:42


• смена состояния• наведение курсора• выбор чекбокса


:42


• смена состояния• наведение курсора• выбор чекбокса• фокус в поле текстового ввода


:42


• смена состояния• наведение курсора• выбор чекбокса• фокус в поле текстового ввода

• и т.д

:43

:43

Порядок отрисовки

:44


:44

• Цвет фона


:44

• Цвет фона• Фоновое изображение


:44

• Цвет фона• Фоновое изображение• Рамка


:44

• Цвет фона• Фоновое изображение• Рамка• Дочерние объекты


:44

• Цвет фона• Фоновое изображение• Рамка• Дочерние объекты• Внешние границы

JavaScript

JavaScript

:46

abstract syntax tree

Оптимизации в JIT

:47


Hidden Classes

:47


Hidden ClassesInline Cache

:47


Hidden ClassesInline CacheInlining

:47


Hidden ClassesInline CacheInliningDead Code Elimination, DCE

:47


Hidden ClassesInline CacheInliningDead Code Elimination, DCEGlobal Code Motion / Global Value Numbering

:47

Заключение

Домашка

Домашка

:50

Домашка

1. Три колонки

:50

Домашка

1. Три колонки2. Блок по середине

:50

Домашка

1. Три колонки2. Блок по середине3. Прибытый подвал

:50

Домашка

1. Три колонки2. Блок по середине3. Прибытый подвал4*. Сдвигающаяся менюшка

:50

Домашка

1. Три колонки2. Блок по середине3. Прибытый подвал4*. Сдвигающаяся менюшка5*. Три кнопки всегда одинаковой длины

:50

Разработчик интерфейсов

[email protected]

Спасибо

Олег Мохов

mailto:[email protected]

Documents

Олег Мохов: Модель Отображения. Браузеры