Увеличение производительности реактивных web-страниц

Введение 10
1 Исследование применения реактивного программирования в веб¬разработке 13
1.1 Обзор решаемой задачи 13
1.1.1 Проблемы веб-разработки 13
1.1.2 Реактивное программирование 14
1.1.3 Метрики производительности 16
1.1.3.1 Время до первого байта (Time to First Byte) 16
1.1.3.2 Первая отрисовка (First Paint) 16
1.1.3.3 Первая отрисовка контента (First Contentful Paint) 16
1.1.3.4 Первая значимая отрисовка (First Meaningful Paint) 17
1.1.3.5 Первое взаимодействие (First Interactive) 17
1.1.3.6 Первое последовательное взаимодействие (Time to First
Consistently Interactive) 18
1.1.3.7 Время до первого взаимодействия (Time to First Interactive)
18
1.1.3.8 Предполагаемая задержка ввода (Estimated Input Latency)
18
1.1.4 Рассматриваемые этапы работы веб-приложений 19
1.1.4.1 Рендеринг на стороне сервера (SSR) 20
1.1.4.2 Загрузка сторонних ресурсов 20
1.1.4.3 Парсинг JavaScript-скриптов и их исполнение 21
1.1.4.4 Гидратация компонентов 21
1.1.4.5 Обновление данных и внесение изменений в DOM 22
1.2 Анализ методов решения задачи 22
1.2.1 Использование сторонних ресурсов в веб-браузере 22
1.2.1.1 Протокол HTTP/2 23
1.2.1.2 Отложенное и асинхронное исполнение JavaScript ресурсов
23
1.2.1.3 Предзагрузка (preload) 24
1.2.1.4 Предварительное соединение (preconnect) 24
1.2.1.5 Предварительное получение записей DNS (dns-prefetch)... 24
1.2.1.6 Ленивая загрузка ресурсов (lazy-loading) 24
1.2.2 Реактивность DOM 25
1.2.2.1 Вычисляемая рендер-функция 25
1.2.2.2 Система привязки DOM 25
1.2.3 Гидратация компонентов 26
1.2.3.1 Полная гидратация 26
1.2.3.2 Прогрессивная (потоковая) гидратация 26
1.2.3.3 Частичная гидратация 27
1.2.3.4 Ленивая гидратация 28
1.3 Постановка задачи на исследование и разработку 30
1.4 Выводы по главе 30
2 Разработка реактивного микрофреймворка 31
2.1 Анализ и выбор способа решения задачи 31
2.1.1 Реактивность и DOM 31
2.1.1.1 Вычисляемая рендер-функция 32
2.1.1.2 Система привязки DOM 33
2.1.2 Микрофреймворк 34
2.1.2.1 Sinuous 35
2.1.2.2 Solid 36
2.1.2.3 Выбор технологии 36
2.1.3 Парадигма программирования 37
2.1.4 Гидратация 38
2.1.5 Серверный рендеринг 38
2.2 Разработка концепции компонентов, их моделей и алгоритмов
решения задачи 39
2.2.1 Компоненты 39
2.2.2 Реактивные шаблоны компонентов 40
2.2.3 Реактивные данные компонентов 40
2.2.4 Динамические атрибуты DOMэлементов 41
2.2.5 Динамические свойства (входные параметры) компонентов
41
2.2.6 Условный рендеринг 41
2.2.7 Итерационный рендеринг 41
2.2.8 Частичная гидратация 42
2.2.9 Ленивая гидратация 42
2.2.10 Сериализация и инициализация гидратации 42
2.3 Выводы по главе 43
3 Реализация микрофреймворка 43
3.1 Выбор технологий и средств реализации микрофреймворка .. 43
3.2 Описание реализации 44
3.2.1 Модуль Component 44
3.2.1.1 Архитектура данных 44
3.2.1.2 Методы работы с иерархией компонентов 45
3.2.1.3 Методы передачи данных в компонент 45
3.2.1.4 Методы регистрации начальных данных компонента 45
3.2.1.5 Методы событийных хуков 46
3.2.1.6 Методы рендера и гидратации 46
3.2.1.7 Методы обработки опций компонентов 46
3.2.2 Модуль Compiler 48
3.2.2.1 Определение динамических частей компонентов 48
3.2.2.2 Преобразование JavaScript кода 49
3.2.2.3 Преобразование шаблона в рендер-функцию 51
3.2.2.4 Преобразование шаблона в функцию гидратации 52
3.2.3 Модуль Loader 53
3.2.4 Модуль Render 54
3.2.5 Модуль Hydration 55
3.2.6 Модуль Lazy 57
3.2.7 Модуль 1 57
3.2.8 Пример использования и работы микрофреймворка 58
3.3 Результаты тестирования 61
3.3.1 Размер фреймворка 62
3.3.2 Производительность статичных веб-страниц 62
3.3.3 Производительность частично-динамических веб-страниц
63
3.3.4 Производительность динамических веб-страниц 63
3.3.5 Google PageSpeed insights 64
3.4 Выводы по главе 65
Заключение 67
Список использованных источников 68
ПРИЛОЖЕНИЕ
Купить

Современная веб-разработка сосредоточена на компонентно-ориентированном подходе, который пришел из мобильной разработки и успешно внедрился в веб с помощью таких компаний, как Facebook и Google.
Они создали реактивные фреймворки (angular, react), которые полностью изменили подход к привычной веб-разработке, сделав ее качественной и масштабируемой, что позволяет создавать приложения любой сложности с помощью веб технологий.
Так как Facebook и Google разрабатывают полностью динамические приложения, где более 90% компонентов - реактивны, то есть они имеют свое состояние и работают в фоновом режиме, ожидая обновление данных, чтобы изменить интерфейс, поэтому использование реактивных фреймворков полностью оправдывает себя.
Но большинство веб-сайтов не такие. Количество динамических частей в приложении составляет 20-30% и использование реактивных фреймворков замедляет работу сайта, особенно на мобильных устройствах.
На сегодняшний день проблема производительности реактивных фреймворков стоит достаточно остро, ведь производительность влияет не только на процент отказов пользователей, но и на продвижение в поисковых системах, а решение данной проблемы должно быть комплексное , сохраняя все удобства компонентного подхода.
На текущее время уже существует реактивные фреймворки, где производительность рендеринга сравнима с нативным JavaScript. При этом они все равно имеют проблему медленной первой загрузки, особенно на мобильных устройствах.
Поэтому целью данной диссертационной работы является проверка гипотезы увеличения производительности с помощью частичной гидратации компонентов.
Гидратация (или регидратация) - это повторный рендеринг, который производиться на клиенте.
Основной недостаток гидрататации заключается в том, что она негативно влияет на время до интерактивности. Даже при улучшении первой отрисовки. Поэтому этап гидратации является наименее производительным во всех реактивных фреймворках на данный момент.
Частичная гидратация позволяет гидрировать только те компоненты, которые действительно нужно. Не тратить время и ресурсы на проработку всего DOM дерева. Данный подход является расширением идеи прогрессивной гидрататации, где отдельные части
(компоненты/отображения/деревья), которые должны быть прогрессивно гидрированы, анализируются на предмет малой или отсутствующей интерактивности. Для этих в основном статических частей соответствующий код JavaScript затем преобразуется в «инертные» ссылки и декоративную функциональность, уменьшая отпечаток на стороне клиента почти до нуля.
Поэтому для того, чтобы проверить производительность частичной гидратации необходимо решить такие задачи в данной работе:
1. Исследовать принципы реактивности;
2. Изучить текущие применяемые технологические решения в популярных фреймворках;
3. Проанализировать и выявить методы для достижения лучшей производительности как динамических, так и частично-динамических веб-приложений;
4. Реализовать микрофреймворк, с функционалом сравнимым с тем, который используется в самых популярных реактивных фреймворках ;
5. Произвести тестирование производительности на реальных примерах с помощью разработанного микрофреймворка.
При этом практическая ценность данной магистерской диссертации заключается в возможности использования результатов исследования в виде готового JavaScript фреймворка для решения практических задач при проектировании и создании веб-сайтов и приложений.
Положения выносимые на защиту:
1. Частичная гидратация значительно уменьшает время, когда веб-приложение становится интерактивным;
2. Маленький размер и скорость работы микрофреймворка позволяет использовать его для создания мобильных веб-приложений (при медленном интернете и слабом процессоре);
3. Реализация микрофреймворка с частичной гидратацией не накладывает какие-либо ограничения на разработку и его использование.
Купить