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

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

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

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>
            

Преждевременные </body> и </html>

function parseTag(t) {
    /*  ... */
    if (t->tagName == htmlTag || t->tagName == bodyTag )
        return;
    /*  ... */
}

            

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, content)

Yet another tree: LineBoxTree

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

1351

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

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

            

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

.section .select .value a

/* 1351 -> found 11 */
            

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

.section .select .value a

/* 1351 -> found 11 */

/* 1173 -> found 2 */
            

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

.section .select .value a

/* 1351 -> found 11 */

/* 1173 -> found 2 */

/* 2 -> found 2 */
            

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

.section .select .value a

/* 1351 -> found 11 */

/* 1173 -> found 2 */

/* 76 -> found 2 */

/* 2 -> found 2 */

/* total: 2602 lookups */

            

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

.section .select .value a

/* 1351 -> found 327 */

            

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

.section .select .value a

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

            

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

.section .select .value a

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

            

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

.section .select .value a

/* 1351 -> found 327 */
/* 327 * 6 = 1962 -> found 2 */
/* 2 * 6 = 12 -> found 2 */
/* 2 * 5 = 10 -> found 2 */
/* total: 3335 lookups > 2602 */

            

Медленно

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

.section .select .value a

.category-value

/* 1351 vs 3335 */
            

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

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

Компоновка

Компоновка

• Расчёт геометрии страницы
• Расчёт размеров замещаемых элементов
• Reflow

Компоновка (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

RenderObject

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

RenderLayer

• Каждый RenderObject ассоциируется с 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

Скрипты

Скрипты

Скрипты

Скрипты

JIT

Ссылки

• How browsers work
• Принципы работы современных веб-браузеров
• Презентация «Как работает вебкит»
• Прошлое и будущее компиляции JavaScript
• Слайды доклада «Как сделать ваш JavaScript быстрее»

ДЗ

Deadline
3 декабря
02:59:59.999