Post on 11-Nov-2014
description
Разработчик интерфейсов
Модель отображения
Олег Мохов
Модель отображения
:3
1. Поток, контексты, позиционирование, браузерная математика
2. Особенности реализаций модели отображения в разных браузерах
3. Браузеры
Принципы работы современных веб-браузеров
:4
Принципы работы современных веб-браузеров
http://clck.ru/8aCyc
:4
Механизм работы браузера
Общая схема
Механизм работы браузера
Общая схема
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
.foo {!width: 10em!height: 10em;!background: red;!
}!?.bar {!width: 10bem;!height: 10em;!background: red;!?
.baz {!width: 10em;!height: 10em;!background: red;!
}
CSS Example
:34
.foo {!width: 10em!height: 10em;!background: red;!
}!?.bar {!width: 10bem;!height: 10em;!background: red;!?
.baz {!width: 10em;!height: 10em;!background: red;!
}
CSS Example
:35
.foo {!width: 10em!height: 10em;!background: red;!
}!?.bar {!width: 10bem;!height: 10em;!background: red;!?
.baz {!width: 10em;!height: 10em;!background: red;!
}
CSS Example
:36
.foo {!background: red;!
}!?.bar {!height: 10em;!background: red;!
}
CSS Example
:37
Reflow и Repaint
Компоновка и отрисовка
Reflow
:40
Reflow
:40
Глобальный Reflow
Reflow
:40
Глобальный Reflow
Глобальный Reflow
:41
Глобальный Reflow
:41
• Первоначальное отображение страницы
Глобальный Reflow
:41
• Первоначальное отображение страницы• изменение размеров окна бразуера
Глобальный Reflow
:41
• Первоначальное отображение страницы• изменение размеров окна бразуера• изменение размеров шрифта в браузере
Глобальный Reflow
:41
• Первоначальное отображение страницы• изменение размеров окна бразуера• изменение размеров шрифта в браузере• и т.п
Инкрементеный Reflow
:42
Инкрементеный Reflow
:42
• вставка новых элементов в DOM
Инкрементеный Reflow
:42
• вставка новых элементов в DOM• изменение атрибутов (например, смена класса)
Инкрементеный Reflow
:42
• вставка новых элементов в DOM• изменение атрибутов (например, смена класса)
• смена состояния
Инкрементеный Reflow
:42
• вставка новых элементов в DOM• изменение атрибутов (например, смена класса)
• смена состояния• наведение курсора
Инкрементеный Reflow
:42
• вставка новых элементов в DOM• изменение атрибутов (например, смена класса)
• смена состояния• наведение курсора• выбор чекбокса
Инкрементеный Reflow
:42
• вставка новых элементов в DOM• изменение атрибутов (например, смена класса)
• смена состояния• наведение курсора• выбор чекбокса• фокус в поле текстового ввода
Инкрементеный Reflow
:42
• вставка новых элементов в DOM• изменение атрибутов (например, смена класса)
• смена состояния• наведение курсора• выбор чекбокса• фокус в поле текстового ввода
• и т.д
:43
:43
Порядок отрисовки
:44
Порядок отрисовки
:44
• Цвет фона
Порядок отрисовки
:44
• Цвет фона• Фоновое изображение
Порядок отрисовки
:44
• Цвет фона• Фоновое изображение• Рамка
Порядок отрисовки
:44
• Цвет фона• Фоновое изображение• Рамка• Дочерние объекты
Порядок отрисовки
:44
• Цвет фона• Фоновое изображение• Рамка• Дочерние объекты• Внешние границы
JavaScript
JavaScript
:46
abstract syntax tree
Оптимизации в JIT
:47
Оптимизации в JIT
Hidden Classes
:47
Оптимизации в JIT
Hidden ClassesInline Cache
:47
Оптимизации в JIT
Hidden ClassesInline CacheInlining
:47
Оптимизации в JIT
Hidden ClassesInline CacheInliningDead Code Elimination, DCE
:47
Оптимизации в JIT
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