- PVSM.RU - https://www.pvsm.ru -
Просматривая одно из обучающих видео «школы разработки интерфейсов» Яндекса, наткнулся на ссылку на на офигенный труд израильской веб-программистки Тали Гарсиэль (Tali Garsiel [1]) "How browsers work [2]" (Как работают браузеры).
Она в течении нескольких лет отслеживала всю издаваемую информацию о внутреннем устройстве браузеров, изучала исходный код WebKit и Gecko и, в конце концов, собрала все воедино. Вот что пишет сама Тали:
Когда на 90% компьютеров был установлен IE, приходилось мириться с тем, что это загадочный «черный ящик», однако теперь, когда более половины пользователей выбирает браузеры с открытым исходным кодом, пришло время разобраться, что скрывается у них внутри, в миллионах строк программного кода на C++...
Пролистав, я был поражен — отличная работа. Внутреннее устройство браузеров, алгоритмы разбора — все хорошо иллюстрировано, доступно и понятно. И без излишних подробностей, страниц на 20-30. Как раз то, что нужно. Решил — это надо обязательно перевести. Покопался еще немного — оказалось перевод уже как 1,5 года есть!
Возможно для кого-то это давно уже не новость, но, надеюсь, для тех, кто не слышал, будет полезно (на хабре упоминаний не нашел).
Под катом содержание перевода [3], чтобы решить читать или нет.
Синтаксический анализ: общие сведения [12]
Синтаксический анализатор HTML [20]
Синтаксический анализ CSS [30]
Порядок обработки скриптов и таблиц стилей [32]
Построение дерева отображения [36]
Компоновка [39]
Отрисовка [47]
Динамические изменения [52]Потоки модуля отображения [53]
Позиционирование [60]
Автор: zag2art
Источник [65]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/firefox-2/30273
Ссылки в тексте:
[1] Tali Garsiel: http://taligarsiel.com/
[2] How browsers work: http://taligarsiel.com/Projects/howbrowserswork1.htm
[3] перевода: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/
[4] Введение: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Introduction
[5] Какие браузеры мы рассмотрим: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about
[6] Основные функции браузера: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_browser_main_functionality
[7] Структура верхнего уровня: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_browser_high_level_structure
[8] Модуль отображения: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_rendering_engine
[9] Модули отображения: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Rendering_engines
[10] Основная схема работы: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_main_flow
[11] Примеры работы: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Main_flow_examples
[12] Синтаксический анализ: общие сведения: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Parsing_general
[13] Грамматика: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Grammars
[14] Синтаксический и лексический анализаторы: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Parser_Lexer_combination
[15] Перевод: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Translation
[16] Пример синтаксического анализа: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Parsing_example
[17] Формальное определение словаря и синтаксиса: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Formal_definitions_for_vocabulary_and_syntax
[18] Типы синтаксических анализаторов: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Types_of_parsers
[19] Автоматическое создание синтаксических анализаторов: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Generating_parsers_automatically
[20] Синтаксический анализатор HTML: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#HTML_Parser
[21] Определение грамматики HTML: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_HTML_grammar_definition
[22] Контекстная грамматика: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Not_a_context_free_grammar
[23] DTD в HTML: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#HTML_DTD
[24] DOM: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#DOM
[25] Алгоритм синтаксического анализа: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_parsing_algorithm
[26] Алгоритм лексического анализа: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_tokenization_algorithm
[27] Алгоритм построения дерева: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Tree_construction_algorithm
[28] Действия после синтаксического анализа: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Actions_when_the_parsing_is_finished
[29] Обработка ошибок браузерами: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Browsers_error_tolerance
[30] Синтаксический анализ CSS: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#CSS_parsing
[31] Синтаксический анализатор CSS в WebKit: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Webkit_CSS_parser
[32] Порядок обработки скриптов и таблиц стилей: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_order_of_processing_scripts_and_style_sheets
[33] Скрипты: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Scripts
[34] Ориентировочный синтаксический анализ: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Speculative_parsing
[35] Таблицы стилей: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Style_sheets
[36] Построение дерева отображения: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Render_tree_construction
[37] Вычисление стилей: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Style_Computation
[38] Многоэтапное применение правил: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Gradual_process
[39] Компоновка: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Layout
[40] Система «грязных битов»: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Dirty_bit_system
[41] Глобальная и инкрементная компоновка: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Global_and_incremental_layout
[42] Синхронная и асинхронная компоновка: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Asynchronous_and_Synchronous_layout
[43] Оптимизация: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Optimizations
[44] Процесс компоновки: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_layout_process
[45] Расчет ширины: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Width_calculation
[46] Перенос строк: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Line_Breaking
[47] Отрисовка: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Painting
[48] Глобальная и инкрементная отрисовка: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Global_and_Incremental
[49] Порядок отрисовки: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_painting_order
[50] Список отображения Firefox: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Firefox_display_list
[51] Хранилище прямоугольников в WebKit: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Webkit_rectangle_storage
[52] Динамические изменения: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Dynamic_changes
[53] Потоки модуля отображения: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_rendering_engines_threads
[54] Цикл событий: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Event_loop
[55] Визуальная модель CSS2: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#css
[56] Холст: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#The_canvas
[57] Модель окна в CSS: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#CSS_Box_model
[58] Схема позиционирования: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Positioning_scheme
[59] Типы окон: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Box_types
[60] Позиционирование: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Positioning
[61] Относительное позиционирование: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Relative
[62] Плавающие элементы: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Floats
[63] Абсолютное и фиксированное позиционирование: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Absolute_and_fixed
[64] Многослойное представление: http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/#Layered_representation
[65] Источник: http://habrahabr.ru/post/174057/
Нажмите здесь для печати.