Разработчик Интерфейсов
Механизм работы браузераРоман Комаров
Основная задача браузера: запросить и отобразить данные
3
“How browsers work”
Tali Garsiel
4
• Парсинг HTML — построение DOM-дерева.• Построение render tree (дерева отображения).• Reflow / Layout (Компоновка).• Repaint (Отрисовка).
Движок отображения
Парсинг HTML и CSS
Основа популярности HTML&CSS — прощающая обработка ошибок
7
Парсинг HTML и CSS
• браузеры всеядны;• последствия ошибок часто не очевидны;• валидатор — инструмент, не более.
8
<p>Параграф не закрылся, но это нормально
<blah> Не описанный в спецификациях тег — тоже ок.</blah>
<ul> <li>Элементы списка не обязаны закрываться <li>и иногда это может быть даже удобно: <ul> <li>Простой вложенный список </ul> <li>А это исходный список </ul></ul>
Можно писать невалидный HTML — браузеры это поймут:
9
Валидатор — не «закон». Но с валидным кодом легче искать свои ошибки.
10
Парсинг HTML и CSS
• неверный HTML может заметно изменить структуру конечного DOM;
• неверный CSS может или не отобразиться или «съесть» половину стилей.
11
Было:
<table> <td>Ячейка таблицы</td> <div>Внезапно, див</div></table>
Ошибочный HTML может заметно изменить структуру конечного DOM
12
Стало:
<div>Внезапно, див</div><table> <tbody> <tr> <td>Ячейка таблицы</td> </tr> </tbody></table>
.foo { width: 10em height: 10em; background: red;}.bar { width: 10bem; height: 10em; background: red;
.baz { width: 10em; height: 10em; background: red;}
Неверный CSS не отобразится или «съест» половину стилей
13
.foo { width: 10em height: 10em; background: red;}.bar { width: 10bem; height: 10em; background: red;
.baz { width: 10em; height: 10em; background: red;}
Неверный CSS не отобразится или «съест» половину стилей
14
.foo { background: red;}.bar { height: 10em; background: red;}
Неверный CSS не отобразится или «съест» половину стилей
15
• Синхронность скриптов• Параллельная загрузка остальных данных• Таблицы стилей
Порядок обработки
Render tree
Render tree
Render tree может отличаться от DOM-дерева:
• не все блоки из DOM попадают в дерево отображения;
• в некоторых случаях в render tree будет создаваться больше блоков, чем есть в DOM;
• CSS уже начинает оказывать влияние.
18
<head> <title>Шапка не отобразится</title></head>
<body> <noscript> Если JS работает — noscript не отобразится </noscript></body>
<div style="display: none;"> Некоторые стили «выключают» блоки из дерева отображения</div>
Не все блоки из DOM попадают в дерево отображения
19
<div> Какой-то текстовый контент <div>Блочный элемент</div> Продолжение текстового контента</div>
В некоторых случаях в render tree будет создаваться больше блоков, чем есть в DOM
20
<div> <блок>Какой-то текстовый контент</блок> <div>Блочный элемент</div> <блок>Продолжение текстового контента</блок></div>
Применение стилей
Порядок применения стилей
• стили браузера• стили пользователя• стили автора• важные стили автора• важные стили пользователя
22
Специфичность
• * 0,0,0,0,0• div, :first-line 0,0,0,0,1• .some-class, [rel] 0,0,0,1,0• #SomeID 0,0,1,0,0• style="" 0,1,0,0,0• div + !important 1,0,0,0,1• style="" + !important 1,1,0,0,0
23
Reflow
Reflow
• глобальный reflow
• инкрементный reflow
25
Глобальный Reflow
• первоначальное отображение страницы• изменение размеров окна браузера• изменение размеров шрифта в браузере• и т.п.
26
Инкрементный Reflow
• вставка новых элементов в DOM• изменение атрибутов (например, смена класса)• смена состояния
– наведение курсора на элемент– выбор чекбокса– фокус в поле текстового ввода
• и т.д.
27
Рассчёт ширины
• Для auto и процентных величин нужно знать доступную ширину родителя.
• Есть несколько блочных моделей: в стандартной в ширину не входят маджины, паддинги и бордеры.
28
Потоки
• Абсолютное позиционирование • Стандартный поток• «Плавающий» поток• …и нельзя забывать про inline-block
29
Стандартный поток
30
Абсолютное позиционирование
31
Плавающие блоки
32
Инлайновые блоки
33
Repaint
Порядок repaint
• цвет фона• фоновое изображение• граница• тень• вложенные элементы• outline
35
Стековый контекст
z-index и всё такое.
Подробнее:
http://dev.opera.com/articles/view/37-css-absolute-and-fixed-positioning/
36
Чем меньше область reflow или repaint и чем реже происходит их пересчёт — тем лучше.
37
Ссылки
• How browsers work и перевод: как работают браузеры• Статья про позиционирование и стековый контекст• How Browsers Lay Out Web Pages
38
Recommended
