Роман Комаров — «Механизм работы браузера»

Механизм
работы
браузера
Роман Комаров
Разработчик Интерфейсов

Основная задача браузера:
запросить и отобразить
данные

3

“How browsers work”

Tali Garsiel

4

Движок отображения

• Парсинг HTML — построение DOM-дерева.
• Построение render tree (дерева отображения).
• Reflow / Layout (Компоновка).
• Repaint (Отрисовка).

Основа популярности
HTML&CSS — прощающая
обработка ошибок

7

Парсинг HTML и CSS

• браузеры всеядны;
• последствия ошибок часто не очевидны;
• валидатор — инструмент, не более.

8

Можно писать невалидный HTML —
браузеры это поймут:
<p>Параграф не закрылся, но это нормально

<blah>
Не описанный в спецификациях тег — тоже ок.
</blah>

<ul>
<li>Элементы списка не обязаны закрываться
<li>и иногда это может быть даже удобно:
<ul>
<li>Простой вложенный список
</ul>
<li>А это исходный список
</ul>
</ul>

9

Валидатор — не «закон».
Но с валидным кодом
легче искать свои ошибки.

10

Парсинг HTML и CSS

• неверный HTML может заметно изменить структуру
конечного DOM;
• неверный CSS может или не отобразиться или «съесть»
половину стилей.

11

Ошибочный HTML может заметно
изменить структуру конечного DOM
Было:

<table>
<td>Ячейка таблицы</td>
<div>Внезапно, див</div>
</table>

Стало:

<div>Внезапно, див</div>
<table>
<tbody>
<tr>
<td>Ячейка таблицы</td>
</tr>
</tbody>
</table>
12

Неверный CSS не отобразится
или «съест» половину стилей
.foo {
width: 10em
height: 10em;
background: red;
}
.bar {
width: 10bem;
height: 10em;
background: red;

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

13

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

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

14

.foo {
background: red;
}
.bar {
height: 10em;
background: red;
}

15

Порядок обработки

• Синхронность скриптов
• Параллельная загрузка остальных данных
• Таблицы стилей

Render tree

Render tree может отличаться от DOM-дерева:

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

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

• CSS уже начинает оказывать влияние.

18

Не все блоки из DOM попадают в
дерево отображения
<head>
<title>Шапка не отобразится</title>
</head>

<body>
<noscript>
Если JS работает — noscript не отобразится
</noscript>
</body>

<div style="display: none;">
Некоторые стили «выключают» блоки из дерева
отображения
</div>

19

В некоторых случаях в render tree
будет создаваться больше блоков,
чем есть в DOM
<div>
Какой-то текстовый контент
<div>Блочный элемент</div>
Продолжение текстового контента
</div>

<div>
<блок>Какой-то текстовый контент</блок>
<div>Блочный элемент</div>
<блок>Продолжение текстового контента</блок>
</div>

20

Применение стилей

Порядок применения стилей

• стили браузера
• стили пользователя
• стили автора
• важные стили автора
• важные стили пользователя

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

25

Глобальный Reflow

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

26

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

• вставка новых элементов в DOM
• изменение атрибутов (например, смена класса)
• смена состояния
– наведение курсора на элемент
– выбор чекбокса
– фокус в поле текстового ввода
• и т.д.

27

Рассчёт ширины

• Для auto и процентных величин нужно знать доступную
ширину родителя.

• Есть несколько блочных моделей: в стандартной в ширину
не входят маджины, паддинги и бордеры.

28

Потоки

• Абсолютное позиционирование
• Стандартный поток
• «Плавающий» поток
• …и нельзя забывать про inline-block

29

Стандартный поток

30

Абсолютное позиционирование

31

Плавающие блоки

32

Инлайновые блоки

33

Порядок 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

Роман Комаров

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

kizu@yandex-team.ru
@ki_zu

Спасибо

Роман Комаров — «Механизм работы браузера»

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Роман Комаров — «Механизм работы браузера»

Similar to Роман Комаров — «Механизм работы браузера» (20)

More from Yandex

More from Yandex (20)

Роман Комаров — «Механизм работы браузера»