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

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

Олег Мохов
Разработчик интерфейсов

Модель отображения
1. Поток, контексты, позиционирование, браузерная
математика
2. Особенности реализаций модели отображения в
разных браузерах
3. Браузеры

:3

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

:4

Принципы работы
современных веб-браузеров
http://clck.ru/8aCyc

:4

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


Общая схема


Networking


Networking
Rendering


Networking
Rendering
JavaScript

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

:7

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

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

:12

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

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

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

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

:13

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

:14

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

Документ

:16

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

токен

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

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

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

Скрипт
document.write

Сеть

:17

Токенизация

Конструктор
деревьев

DOM

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

:18

HTML Example
<html>!
<body>!
Hello world!
</body>!
</html>

:19

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

:20

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

:21

Ошибки синтаксиса
1. Использование добавляемого элемента явно запрещено
одним из внешних тегов. В этом случае необходимо
закрыть все теги, кроме того, который запрещает
использование данного элемента, и добавить этот элемент
в самом конце.?
2. Элемент нельзя добавить напрямую. Возможно, автор
документа забыл вставить тег между элементами (или
такой тег необязателен). Это касается тегов HTML, HEAD,
BODY, TBODY, TR, TD, LI.?
3. Блочный элемент добавлен внутрь строчного. Необходимо
закрыть все строчные элементы вплоть до следующего в
иерархии блочного элемента.?
4. Если это не помогает, необходимо закрывать элементы,
пока не появится возможность добавить нужный элемент
или проигнорировать тег.?
:22

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

:23

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

:24

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

:25

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

:27

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

:28

DOM
HTMLHtmlElement

HTMLBodyElement

HTMLDivElement

HTMLHeader1Element

:29

HTMLParagraph
Element

HTMLParagraph
Element

Render tree vs DOM

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

:31

Render tree vs DOM

• в некоторых случаях в render tree будет
создаваться

:31

Render tree vs DOM

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

:31

CSS Example
.foo {!
width: 10em!
height: 10em;!
background: red;!
}!
?
.bar {!
width: 10bem;!
height: 10em;!
background: red;!
?
.baz {!
width: 10em;!
height: 10em;!
background: red;!
}

:33

CSS Example
.foo {!
width: 10em!
height: 10em;!
background: red;!
}!
?
.bar {!
width: 10bem;!
height: 10em;!
background: red;!
?
.baz {!
width: 10em;!
height: 10em;!
background: red;!
}

:34

CSS Example
.foo {!
width: 10em!
height: 10em;!
background: red;!
}!
?
.bar {!
width: 10bem;!
height: 10em;!
background: red;!
?
.baz {!
width: 10em;!
height: 10em;!
background: red;!
}

:35

CSS Example
.foo {!
width: 10em!
height: 10em;!
background: red;!
}!
?
.bar {!
width: 10bem;!
height: 10em;!
background: red;!
?
.baz {!
width: 10em;!
height: 10em;!
background: red;!
}

:36

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

:37

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

Reflow

Глобальный Reflow

:40


:41


•

:41

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


•
•

:41

изменение размеров окна бразуера


•
•
•

:41

изменение размеров шрифта в браузере


•
•
•
•

:41

изменение размеров шрифта в браузере
и т.п

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

:42


•

:42

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


•
•

:42

изменение атрибутов (например, смена
класса)


•
•
•

:42

класса)
смена состояния


•
•

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

:42


•
•

класса)
• выбор чекбокса

:42


•
•

класса)
• фокус в поле текстового ввода

:42


•
•

класса)
• фокус в поле текстового ввода
• и т.д
:42

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

:44


•

:44

Цвет фона


•
•

:44

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


•
•
•

:44

Цвет фона
Рамка


•
•
•
•

:44

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


•
•
•
•
•

:44

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

JavaScript

abstract syntax tree

:46

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

:47


Hidden Classes

:47


Hidden Classes
Inline Cache

:47


Hidden Classes
Inline Cache
Inlining

:47


Hidden Classes
Inline Cache
Inlining
Dead Code Elimination, DCE

:47


Hidden Classes
Inline Cache
Inlining
Dead Code Elimination, DCE
Global Code Motion / Global Value Numbering

:47

Домашка

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

:50

Домашка

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

:50

Домашка

3. Прибытый подвал

:50

Домашка

4*. Сдвигающаяся менюшка

:50

Домашка

4*. Сдвигающаяся менюшка
5*. Три кнопки всегда одинаковой длины

:50

Олег Мохов
Разработчик интерфейсов

mokhov@yandex-team.ru

Спасибо

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

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (18)

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

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

More from Yandex

More from Yandex (20)

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