belgorodjs - how browsers work

http://www.amazon.com/dp/0596529309?tag=stevsoud-20&camp=14573&creative=327641&linkCode=as1&creativeASIN=0596529309&adid=00GNM1ZWW77KSD0RERXN&

http://www.amazon.com/dp/0596522304?tag=stevsoud-20&camp=213381&creative=390973&linkCode=as4&creativeASIN=0596522304&adid=09TZDJ7Z5GDMJPAM6XC6&

Transcript

1. #belgorodjs 21.12.13 Принципы работы современных веб- браузеров Жуков Артём
2. • Вступление • Структура верхнего уровня • Модуль отображения • Синтаксический анализ и построение дерева DOM • Построение дерева отображения • Компоновка • Отрисовка • Динамические изменения • Потоки модуля отображения Содержание
3. • Вступление • Модуль отображения • Синтаксический анализ и построение дерева DOM • Построение дерева отображения • Компоновка • Отрисовка • Динамические изменения • Потоки модуля отображения Содержание
4. Современные браузеры и обозреватели Современные браузеры: Современные обозреватели:
5. Основные функции браузера Основное предназначение браузера – отображать веб-ресурсы.
6. Структура верхнего уровня
7. • Вступление • Модуль отображения • Синтаксический анализ и построение дерева DOM • Построение дерева отображения • Компоновка • Отрисовка • Динамические изменения • Потоки модуля отображения Содержание
8. Модули отображения Модуль отображения отвечает за вывод запрошенного содержания на экране браузера.
9. Основная схема работы • Cинтаксический анализ HTML-документа и перевод тегов в узлы DOM в дерева. Информация о стилях извлекается как из внешних CSS-файлов, так и из элементов style. • Построение дерева отображения. • Компоновка элементов, в ходе которой каждому узлу присваиваются координаты точки на экране, где он должен появиться. • Отрисовка, при которой узлы дерева отображения последовательно отрисовываются с помощью исполнительной части пользовательского интерфейса.
10. Модуль отображения WebKit
11. Модуль отображения Gecko
12. • Вступление • Модуль отображения • Синтаксический анализ и построение дерева DOM • Построение дерева отображения • Компоновка • Отрисовка • Динамические изменения • Потоки модуля отображения Содержание
13. Синтаксический анализ и построение дерева DOM
14. Синтаксический анализ и построение дерева DOM
15. Синтаксический анализатор CSS в WebKit
16. • Вступление • Модуль отображения • Синтаксический анализ и построение дерева DOM • Построение дерева отображения • Компоновка • Отрисовка • Динамические изменения • Потоки модуля отображения Содержание
17. Построение дерева отображения
18. • Вступление • Модуль отображения • Синтаксический анализ и построение дерева DOM • Построение дерева отображения • Компоновка • Отрисовка • Динамические изменения • Потоки модуля отображения Содержание
19. Компоновка
20. • Вступление • Модуль отображения • Синтаксический анализ и построение дерева DOM • Построение дерева отображения • Компоновка • Отрисовка • Динамические изменения • Потоки модуля отображения Содержание
21. Отрисовка 1. Цвет фона 2. Фоновое изображение 3. Рамка 4. Дочерние объекты 5. Внешние границы
22. • Вступление • Модуль отображения • Синтаксический анализ и построение дерева DOM • Построение дерева отображения • Компоновка • Отрисовка • Динамические изменения • Потоки модуля отображения Содержание
23. • Вступление • Модуль отображения • Синтаксический анализ и построение дерева DOM • Построение дерева отображения • Компоновка • Отрисовка • Динамические изменения • Потоки модуля отображения Содержание
24. Спасибо за внимание! Заключение