Основные группы браузеров

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

Жизненный цикл веб-страницы

Networking

Внутри браузера

Внутри браузера: ввели адрес

Внутри браузера: кэш

Внутри браузера: кэш

Внутри браузера: DNS

Внутри браузера: получение IP

Внутри браузера: запрос

Внутри браузера: ответ

Внутри браузера: снова кэш

Внутри браузера: страница

Путь одного запроса

Путь одного запроса

W3C resourse hints

Браузерные движки

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

HTML parsing tolerance
(«Щадящий» алгоритм)

Неправильное использование тегов

</br>


            

Неправильное вкладывание тегов

<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
            

Использование вложенных форм

<form action="#a1">
    outer form
    <form action="#a2">
        inner form
    </form>
</form>
<form action="#a1">
    outer form

        inner form

</form>
            

CSS parsing

CSSOM

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

            

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;
}
            

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;
}
            

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;
}
            

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;
}
            

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;
}
            

Валидность

Render Tree

DOM → Render Tree

• Получается при складывании DOM и CSSOM
• Не все блоки из DOM попадают в Render Tree
• На один DOM-блок может создаваться несколько блоков в Render Tree
• CSS так же оказывает влияние на Render Tree (::after, ::before)

Как применяется CSS?

1456

Как применяется CSS?

.section .select .value a {
    padding-right: 30px
}
            

            

Как применяется CSS?

.section .select .value a

/* 1456 -> found 11 */
            

Как применяется CSS?

.section .select .value a

/* 1456 -> found 11 */

/* 1245 -> found 2 */
            

Как применяется CSS?

.section .select .value a

/* 1456 -> found 11 */

/* 1245 -> found 2 */

/* 90 -> found 2 */
            

Как применяется CSS?

.section .select .value a

/* 1456 -> found 11 */

/* 1245 -> found 2 */

/* 90 -> found 2 */

/* 2 -> found 2 */

/* total: 2688 lookups */

            

Как применяется CSS?

.section .select .value a

/* 1456 -> found 327 */

            

Как применяется CSS?

.section .select .value a

/* 1456 -> found 327 */
/* 327 * 6 = 1962 -> found 2 */

            

Как применяется CSS?

.section .select .value a

/* 1456 -> found 327 */
/* 327 * 6 = 1962 -> found 2 */
/* 2 * 6 = 12 -> found 2 */

            

Как применяется 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 */

            

Медленно

Как применять CSS эффективно?

.section .select .value a

.category-value

/* 1456 vs 3335 */
            

Методологии именования классов и организации разметки

• БЭМ (Яндекс)
• OOCSS (Youtube)
• MCSS (Одноклассники)
• SMACSS
• ACSS (Yahoo, + Amazon (свой аналог))
• Axiomatic CSS (±Wikipedia)

BEM

• Блок
• Элемент
• Модификатор

BEM

• Блок - Функционально независимый компонент страницы, который может быть повторно использован.
• Название блока характеризует смысл, а не состояние
• Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.
• Блоки можно вкладывать друг в друга.

BEM

BEM

• Элемент - Составная часть блока, которая не может использоваться в отрыве от него.
• Название элемента характеризует смысл, а не состояние
• Структура полного имени элемента соответствует схеме: имя-блока__имя-элемента.
• Элементы можно вкладывать друг в друга.
• Элемент — всегда часть блока, а не другого элемента. block__elem1__elem2.
• Не обязателен

BEM

    

        

            
            Найти
        
    

BEM

• Модификатор - сущность, определяющая внешний вид, состояние или поведение блока либо элемента.
• Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).

BEM

    
    

        

        
        
            Найти
        
    

    
    

        

        
        
            Найти
        
    

MIX

    
    

        
        

            ...
        
    

Компоновка

Компоновка (Reflow)

• Последовательно
• Элементы расставляются слева направо, сверху вниз
• Элементы, встречающиеся позже, не влияют на геометрию предыдущих (кроме таблиц и grid'ов с auto значениями)
• Элемент определяет собственную ширину
• На основании суммарной высоты дочерних элементов, полей и отступов, вычисляется высота

Глобальный Reflow

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

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

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

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

<html>
    <p><span></span></p>
    <div>
        <div></div><div></div><div></div>
    </div>
    <div></div>
</html>
            

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

<html>
    <p><span></span></p>
    <div>
        <div></div><div></div><div></div>
    </div>
    <div></div>
</html>
            

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

<html>
    <p><span></span></p>
    <div>
        <div></div><div></div><div></div>
    </div>
    <div></div>
</html>
            

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

<html>
    <p><span></span></p>
    <div>
        <div></div><div></div><div></div>
    </div>
    <div></div>
</html>
            

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

<html>
    <p><span></span></p>
    <div>
        <div></div><div></div><div></div>
    </div>
    <div></div>
</html>
            

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

<html>
    <p><span></span></p>
    <div>
        <div></div><div></div><div></div>
    </div>
    <div></div>
</html>
            

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

<html>
    <p><span></span></p>
    <div>
        <div></div><div></div><div></div>
    </div>
    <div></div>
</html>
            

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

<html>
    <p><span></span></p>
    <div>
        <div></div><div></div><div></div>
    </div>
    <div></div>
</html>
            

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

<html>
    <p><span></span></p>
    <div>
        <div></div><div></div><div></div>
    </div>
    <div></div>
</html>
            

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

<html>
    <p><span></span></p>
    <div>
        <div></div><div></div><div></div>
    </div>
    <div></div>
</html>
            

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

<html>
    <p><span></span></p>
    <div>
        <div></div><div></div><div></div>
    </div>
    <div></div>
</html>
            

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

<html>
    <p><span></span></p>
    <div>
        <div></div><div></div><div></div>
    </div>
    <div></div>
</html>
            

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

<html>
    <p><span></span></p>
    <div>
        <div></div><div></div><div></div>
    </div>
    <div></div>
</html>
            

CSS Triggers

Painting

RenderTree

RenderObject

• Есть у каждого DOM-элемента с визуальным представлением
• RenderObject хранит знание как отобразить элемент в текущем юзер-агенте, т.е в случае браузера речь об идёт об растеризации элемента
• RenderObject’ы хранятся в параллельной структуре – RenderTree

LayerTree

RenderLayer

• Каждый RenderObject ассоциируется с RenderLayer
• RenderLayer’ы нужны для того чтобы отображать пересекающиеся элементы
• Есть условия, которые ведут к созданию нового RenderLayer’а

Новый RenderLayer

• Корневой элемент страницы
• position ≠ static
• transform3d
• opacity
• overflow
• CSS filter
• <canvas> + WebGL
• <video>

Композитный слой

Некоторые RenderLayer’ы, но не все, создают собственную подложку отрисовки (так же её называют композитный слой).
Так как создавать на каждый RenderLayer композитный слой дорого и расточительно, то следующие свойства форсируют его создание:

• transform3d или перспектива
• <video> с включенным h/a
• <canvas> 3d или 2d с включенным h/a
• анимация свойств opacity или transform
• css фильтры
• слои у которых потомок композитный слой
• слои, вынесенные над композитным слоем

Примеры:

КОМПОЗИИТНЫЙ СЛОЙ

JavaScript

Скрипты

Скрипты

Скрипты

Скрипты

Ссылки

• How browsers work
• Принципы работы современных веб-браузеров
• Презентация «Как работает вебкит»
• БЭМ

Вопросы?