Обозреватель - github pages · smacss acss axiomatic css 57. bem Блок...
TRANSCRIPT
Обозреватель
1
Основные группы браузеров
2
Архитектура браузера
3
Жизненный цикл веб-страницы
4
Networking
5
Внутри браузера
6
Внутри браузера: ввели адрес
7
Внутри браузера: кэш
8
Внутри браузера: кэш
9
Внутри браузера: DNS
10
Внутри браузера: получение IP
11
Внутри браузера: запрос
12
Внутри браузера: ответ
13
Внутри браузера: снова кэш
14
Внутри браузера: страница
15
Путь одного запроса
16
Путь одного запроса
17
W3C resourse hints<link rel="dns-prefetch" href="//yandex.ru/">
<link rel="preconnect" href="https://yandex.ru/">
<link rel="prefetch" href="//api.maps.yandex.ru/">
<link rel="preload" href="libertad.woff2" as="font">
<link rel="prerender" href="//urfu.ru/">
https://w3c.github.io/resource-hints/18
Браузерные движки
20
EdgeHTML(ex. Trident)
Gecko Webkit
Blink(fork Webkit)
21
22
Анализ документа
23
24
HTML parsing tolerance («Щадящий» алгоритм)
25
Неправильное использование тегов</br>
<br>
26
Неправильное вкладывание тегов<a href="#"> <a href="#"> inner link </a>
outer link </a>
<a href="#"></a> <a href="#"> inner link </a>
outer link </a>
<a href="#"></a> <a href="#"> inner link </a> outer link
27
Использование вложенных форм<form action="#a1"> outer form <form action="#a2"> inner form
</form> </form>
<form action="#a1"> outer form inner form
</form>
28
CSS parsing
29
CSSOMbody { font-size: 16px } p { font-weight: bold } span { color: red } p span { display: none } img { float: right }
30
CSS error handling.foo { width: 10em height: 10em;
background: red; } .bar { width: 10bem; height: 10em; background: red; font: 10px Arial color red; .baz { width: 10em; 31
CSS error handling.foo { width: 10em height: 10em;
background: red; } .bar { width: 10bem; height: 10em; background: red; font: 10px Arial color red; .baz { width: 10em; 32
CSS error handling.foo { width: 10em height: 10em;
background: red; } .bar { width: 10bem; height: 10em; background: red; font: 10px Arial color red; .baz { width: 10em; 33
CSS error handling.foo { width: 10em height: 10em;
background: red; } .bar { width: 10bem; height: 10em; background: red; font: 10px Arial color red; .baz { width: 10em; 34
CSS error handling.foo { width: 10em height: 10em;
background: red; } .bar { width: 10bem; height: 10em; background: red; font: 10px Arial color red; .baz { width: 10em; 35
36
Render Tree
38
39
40
41
42
DOM → Render Tree
Получается при складывании DOM и CSSOM
Не все блоки из DOM попадают в Render Tree
На один DOM-блок может создаваться несколькоблоков в Render Tree
CSS так же оказывает влияние на Render Tree (::a�er,::before)
43
Как применяется CSS?
44
1456
45
Как применяется CSS?.section .select .value a { padding-right: 30px }
46
Как применяется CSS?.section .select .value a /* 1456 -> found 11 */
47
Как применяется CSS?.section .select .value a /* 1456 -> found 11 */
/* 1245 -> found 2 */
48
Как применяется CSS?.section .select .value a /* 1456 -> found 11 */
/* 1245 -> found 2 */ /* 90 -> found 2 */
49
Как применяется CSS?.section .select .value a /* 1456 -> found 11 */
/* 1245 -> found 2 */ /* 90 -> found 2 */ /* 2 -> found 2 */ /* total: 2688 lookups */
50
Как применяется CSS?.section .select .value a /* 1456 -> found 327 */
51
Как применяется CSS?.section .select .value a
/* 1456 -> found 327 */ /* 327 * 6 = 1962 -> found 2 */
52
Как применяется CSS?.section .select .value a /* 1456 -> found 327 */
/* 327 * 6 = 1962 -> found 2 */ /* 2 * 6 = 12 -> found 2 */
53
Как применяется CSS?.section .select .value a /* 1456 -> found 327 */
/* 327 * 6 = 1962 -> found 2 */ /* 2 * 6 = 12 -> found 2 */ /* 2 * 5 = 10 -> found 2 */ /* total: 3335 lookups > 2682 */
54
Медленно
55
Как применять CSS эффективно?.section .select .value a .category-value
/* 1456 vs 3335 */
56
Методологии именования классов иорганизации разметки
(Яндекс)
(Youtube)
(Одноклассники)
(Yahoo, + Amazon (свой аналог))
(±Wikipedia)
БЭМ
OOCSS
MCSS
SMACSS
ACSS
Axiomatic CSS57
BEM
Блок
Элемент
Модификатор
58
BEM
Блок - Функционально независимый компонент страницы,который может быть повторно использован.
Название блока характеризует смысл, а не состояние
Блок не должен влиять на свое окружение, т. е. блоку неследует задавать внешнюю геометрию (в виде отступов,границ, влияющих на размеры) и позиционирование.
Блоки можно вкладывать друг в друга.
59
BEM <!-- Верно. Семантически осмысленный блок `header` -->
<div class="header"></div> <!-- Неверно. Описывается внешний вид --> <div class="red-text"></div>
<!-- Блок `header` --> <header class="header"> <!-- Вложенный блок `logo` --> <div class="logo"></div> <!-- Вложенный блок `search-form` --> <form class="search-form"></form> </header>
60
61
62
BEM
Элемент - Составная часть блока, которая не можетиспользоваться в отрыве от него.
Название элемента характеризует смысл, а не состояние
Структура полного имени элемента соответствует схеме: имя-блока__имя-элемента.
Элементы можно вкладывать друг в друга.
Элемент — всегда часть блока, а не другого элемента.block__elem1__elem2. 63
BEM <form class="search-form"> <div class="search-form__content">
<input class="search-form__input"> <button class="search-form__button">Найти</button> </div> </form>
<div class="block"> <div class="block__elem1"> <div class="block__elem2"> <div class="block__elem3"></div> </div> </div> </div>
64
65
66
BEM
Модификатор - сущность, определяющая внешний вид,состояние или поведение блока либо элемента.
Имя модификатора отделяется от имени блока или элементаодним подчеркиванием (_).
67
BEM <!-- Блок `search-form` имеет булевый модификатор `focused` --> <form class="search-form search-form_focused"> <input class="search-form__input">
<!-- Элемент `button` имеет булевый модификатор `disabled` --> <button class="search-form__button search-form__button_disabled"> Найти </button> </form>
<!-- Блок `search-form` имеет модификатор `theme` со значением `islands` --> <form class="search-form search-form_theme_islands"> <input class="search-form__input"> <!-- Элемент `button` имеет модификатор `size` со значением `m` --> <button class="search-form__button search-form__button_size_m"> Найти </button> </form>
68
69
70
MIX <!-- Блок `header` --> <div class="header">
<!-- К блоку `search-form` примиксован элемент `search-form` блока `header` --> <div class="search-form header__search-form"> ... </div> </div>
71
72
73
Компоновка
74
Компоновка (Reflow)
Последовательно
Элементы расставляются слева направо, сверху вниз
Элементы, встречающиеся позже, не влияют нагеометрию предыдущих (кроме таблиц и grid'ов сauto значениями)
Элемент определяет собственную ширину
На основании суммарной высоты дочернихэлементов, полей и отступов, вычисляется высота
75
Gecko Re�ow Visualization - mozilla.orgПосмотреть позже Поделиться
76
Глобальный Reflow
Первоначальное отображение страницы
Изменение окна браузера
Изменение размеров шрифта
и другие подобные глобальные события
77
Инкрементный Reflow
Вставка новых элементов в DOM
Изменение атрибутов (например, смена HTMLкласса)
Смена состояния элемента (ховер, выбор чекбокса,фокус ..)
78
Инкрементный Reflow
<html> <p><span></span></p> <div> 79
Инкрементный Reflow: background
<html> <p><span></span></p> <div> 80
Инкрементный Reflow: transform
<html> <p><span></span></p> <div> 81
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 82
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 83
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 84
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 85
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 86
87
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 88
Инкрементный Reflow: height
<html> <p><span></span></p> <div> 89
Инкрементный Reflow: width
<html> <p><span></span></p> <div> 90
Инкрементный Reflow: width
<html> <p><span></span></p> <div> 91
Инкрементный Reflow: width
<html> <p><span></span></p> <div> 92
Painting
94
RenderTree
95
RenderObject
Есть у каждого DOM-элемента с визуальнымпредставлением
RenderObject хранит знание как отобразить элементв текущем юзер-агенте, т.е в случае браузера речь обидёт об растеризации элемента
RenderObject’ы хранятся в параллельной структуре –RenderTree
96
LayerTree
97
RenderLayer
Каждый RenderObject ассоциируется с RenderLayer
RenderLayer’ы нужны для того чтобы отображатьпересекающиеся элементы
Есть условия, которые ведут к созданию новогоRenderLayer’а
98
Новый RenderLayer
Корневой элемент страницы
position ≠ static
transform3d
opacity
overflow
CSS filter
<canvas> + WebGL99
Композитный слой
Некоторые RenderLayer’ы, но не все,создают собственную подложку отрисовки
(так же её называют композитный слой). Так как создавать на каждый RenderLayer
композитный слой дорого и расточительно,то следующие свойства форсируют его
создание:
transform3d или перспектива100
Примеры:
ОЗИИТНЫЙ
101
Александр Завьялов, Яндекс | Веб-анимация на JS и CSS | FrontTalks 2015Посмотреть поз
102
JavaScript
103
Скрипты
104
Скрипты
105
Скрипты
106
Скрипты
ScriptingHTML ParserScriptingHTML Parser
ScriptingHTML Parser
ScriptingHTML Parser
parser net runtime →execution
<script>
<script defer>
<script async>
107
Ссылки
How browsers work
Принципы работы современных веб-браузеров
Презентация «Как работает вебкит»
БЭМ
108
Вопросы?109