1. Repository at ChSTU
  2. Випускні кваліфікаційні роботи
  3. Магістр
  4. 123 Комп’ютерна інженерія (Комп'ютерні системи та мережі)
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/8662
Title: Оптимізація методів роботи рендерингу WEB-сторінки за допомогою хмарних технологій
Authors: РУДНИЦЬКИЙ, Володимир
КОВАЛЬЧУК, Давид
Issue Date: 2023
Abstract: Темою даної кваліфікаційної роботи магістра є оптимізація методів роботи рендерингу web-сторінки за допомогою хмарних технологій. Сучасний інтернет насичений web додатками та web-сайтами, і користувачі мають високі очікування щодо швидкості та продуктивності. Оптимізація рендерингу стала ключовим аспектом роботи над web-проектами, оскільки вона прямо впливає на користувацький досвід та конкурентоспроможність веб-додатків. Хмарні технології стають все більш доступними та потужними, надаючи можливість використовувати віддалені ресурси для оптимізації обчислювальних завдань. Вивчення способів інтеграції хмарних технологій у web-розробку має великий практичний потенціал. Тому дана тема дуже важлива для розробки сучасних рішень. Метою даної кваліфікаційної роботи магістра є впровадження оптимізаційних методів рендерингу web-сторінки для покращення продуктивності швидкості відображення у різних видах застосунків. Об’єкт дослідження є процес рендерингу web-сторінок та його взаємодія з хмарними технологіями. Предмет дослідження є методи оптимізації рендерингу web-сторінок, зокрема використання розподілених обчислювальних ресурсів, хмарних технологій та впровадження їх у web-розробку. Робота фокусується на розробці та аналізі нових підходів до рендерингу web-сторінок за допомогою хмарних ресурсів. Наукова новизна одержаних результатів полягає у вивченні та розробці спеціалізованих методів оптимізації рендерингу web-сторінок, враховуючи використання хмарних технологій. Робота включає аналіз сучасних підходів до рендерингу та розробку нових алгоритмів та практичних рішень для покращення продуктивності. Практична цінність будуть корисні для веб-розробників та інженерів, які займаються розробкою web-додатків, а також для компаній, що використовують хмарні технології. Розроблені методи та рекомендації дозволять покращити продуктивність та ефективність роботи, зменшити час рендерингу та забезпечити більш зручний та швидкий доступ до контенту для користувачів. У першому розділі проведено аналіз предметної області, а саме розглянуто процес завантаження контенту для вебсайту та його етапи. Розглянуто хмарні технології їх переваги та недоліки. Детально оглянуто процес рендерингу сторінки браузера та яким чином відбувається завантаження контенту з хостингу. Також розглянуто браузер, його види та його будову. Поставлено завдання, які потрібно виконати в роботі. У другому розділі розглянуто поняття хостингу, принципи завантаження контенту за допомогою chank, HTTP, HTTPs та UDP. Для реалізації поставлених цілей обрано мови програмування HTML, CSS та JS. Для спрощення розробки мовою програмування JS обрано бібліотеку React. Для збільшення швидкодії роботи клієнтського додатку обрано мережу CDN та технологію AWS S3. У третьому розділі описується структура розробленої програмної системи, описуються функції, які вона виконує, описуються застосовані технології захисту інформації. Визначаються вимоги для роботи із системою. Наприкінці наводиться оцінка ефективності застосування системи. Висновки містять основні результати роботи. У додатках наведено специфікацію, текст програми та інструкцію користувача. Загальний обсяг роботи становить 106 сторінок. У кваліфікаційній роботі магістра 17 рисунків, 1 таблиця, 3 додатки. Для виконання роботи використано 21 літературне джерело.
URI: https://er.chdtu.edu.ua/handle/ChSTU/8662
Appears in Collections:123 Комп’ютерна інженерія (Комп'ютерні системи та мережі)

Files in This Item:
File Description SizeFormat 
1_ТИТУЛКА_Ковальчук-merged.pdf
  Restricted Access		2.08 MBAdobe PDFView/Open Request a copy
Show full item record


Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.

Extracted text 
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНОЇ БЕЗПЕКИ ТА КОМП’ЮТЕРНОЇ
ІНЖЕНЕРІЇ
Пояснювальна записка
до кваліфікаційної роботи магістра
на тему: «Оптимізація методів роботи рендерингу
WEB-сторінки за допомогою хмарних технологій»
ЧДТУ.232280.004 ПЗ
Виконав: студент 2 курсу, групи МКМ-2205
спеціальності 123 – Комп’ютерна інженерія
за освітньою програмою – Комп’ютерні системи
та мережі
Давид КОВАЛЬЧУК
Керівник
д.т.н, професор Володимир РУДНИЦЬКИЙ
Н. контроль
Світлана ГРЕСЬКО
Рецензент
старший викладач кафедри інформаційних
технологій, ЧНУ ім. Б. Хмельницького
к.т.н. Тетяна СТАБЕЦЬКА
«ЗАХИСТ ДОЗВОЛЯЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор ____________ Віра БАБЕНКО
Черкаси 2023 року
Черкаський державний технологічний університет
Факультет інформаційних технологій і систем
Кафедра інформаційної безпеки та комп‘ютерної інженерії
Освітньо-кваліфікаційний рівень Магістр
Спеціальність 123 – Комп’ютерна інженерія
Освітня програма Комп’ютерні системи та мережі
«ЗАТВЕРДЖУЮ»
Завідувач кафедри _____ Володимир РУДНИЦЬКИЙ
«10» жовтня 2023 року
ЗАВДАННЯ
на кваліфікаційну роботу магістра студенту
КОВАЛЬЧУКУ Давиду Павловичу
(прізвище, ім‘я, по батькові)
1. Тема роботи Оптимізація методів роботи рендерингу web-сторінки
за допомогою хмарних технологій
Керівник роботи д.т.н., проф. Рудницький В.М.
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «06» жовтня 2023 р. № 267/04
2. Строк подання студентом роботи
3. Вихідні дані до роботи:
Рендеринг, хостинг, хмарні технології, оптимізація, протокол HTTP, протокол HTTPs,
протокол UDP, chunk, мережа CDN, AWS S3.
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
Розділ 1 Аналіз предметної області та постановка задачі дослідження
Розділ 2 Вибір технології та інструментальних засобів
Розділ 3 Оптимізація методів роботи рендерингу web-сторінки за допомогою хмарних
технологій
Висновки
Перелік скорочень та умовних позначень
Список використаних джерел
Додатки
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів):
Додаток А Специфікація
Додаток Б Текст програм
Додаток В Інструкція користувача
6. Консультанти розділів роботи
Підпис, дата
Розділ Прізвище, ініціали та
посада завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 10 жовтня 2023 року
КАЛЕНДАРНИЙ ПЛАН
№ з/п Назва етапів кваліфікаційної роботи магістра Строк виконання
етапів роботи Примітка
1 Збір матеріалу 21.10 – 28.10 виконано
2 Обробка матеріалу 29.10 – 06.11 виконано
3 Обґрунтування актуальності виконання 12.11 – 15.11 виконано
досліджень
4 Оцінка стану проблеми, виокремлення виконано
дослідницьких задач, постановка задачі 16.11 – 18.11
дослідження
5 Викладення сутності і результатів дослідження 20.11– 25.11 виконано
6 Практичне застосування результатів виконано
дослідження 26.11 – 27.11
7 Оформлення результатів в пояснювальну записку 27.11 – 30.11 виконано
8 Подання роботи на відгук та рецензування 30.11.23 виконано
Студент-магістрант ____________________________ Давид КОВАЛЬЧУК
(підпис)
Керівник роботи _____________________________ Володимир РУДНИЦЬКИЙ
(підпис)
АНОТАЦІЯ
Темою даної кваліфікаційної роботи магістра є оптимізація методів
роботи рендерингу web-сторінки за допомогою хмарних технологій.
Сучасний інтернет насичений web додатками та web-сайтами, і користувачі
мають високі очікування щодо швидкості та продуктивності. Оптимізація
рендерингу стала ключовим аспектом роботи над web-проектами, оскільки
вона прямо впливає на користувацький досвід та конкурентоспроможність
веб-додатків. Хмарні технології стають все більш доступними та потужними,
надаючи можливість використовувати віддалені ресурси для оптимізації
обчислювальних завдань. Вивчення способів інтеграції хмарних технологій у
web-розробку має великий практичний потенціал. Тому дана тема дуже
важлива для розробки сучасних рішень.
Метою даної кваліфікаційної роботи магістра є впровадження
оптимізаційних методів рендерингу web-сторінки для покращення
продуктивності швидкості відображення у різних видах застосунків.
Об’єкт дослідження є процес рендерингу web-сторінок та його
взаємодія з хмарними технологіями.
Предмет дослідження є методи оптимізації рендерингу web-сторінок,
зокрема використання розподілених обчислювальних ресурсів, хмарних
технологій та впровадження їх у web-розробку. Робота фокусується на
розробці та аналізі нових підходів до рендерингу web-сторінок за допомогою
хмарних ресурсів.
Наукова новизна одержаних результатів полягає у вивченні та
розробці спеціалізованих методів оптимізації рендерингу web-сторінок,
враховуючи використання хмарних технологій. Робота включає аналіз
сучасних підходів до рендерингу та розробку нових алгоритмів та
практичних рішень для покращення продуктивності.
Практична цінність будуть корисні для веб-розробників та інженерів,
які займаються розробкою web-додатків, а також для компаній, що
використовують хмарні технології. Розроблені методи та рекомендації
дозволять покращити продуктивність та ефективність роботи, зменшити час
рендерингу та забезпечити більш зручний та швидкий доступ до контенту
для користувачів.
У першому розділі проведено аналіз предметної області, а саме
розглянуто процес завантаження контенту для вебсайту та його етапи.
Розглянуто хмарні технології їх переваги та недоліки. Детально оглянуто
процес рендерингу сторінки браузера та яким чином відбувається
завантаження контенту з хостингу. Також розглянуто браузер, його види та
його будову. Поставлено завдання, які потрібно виконати в роботі.
У другому розділі розглянуто поняття хостингу, принципи
завантаження контенту за допомогою chank, HTTP, HTTPs та UDP. Для
реалізації поставлених цілей обрано мови програмування HTML, CSS та JS.
Для спрощення розробки мовою програмування JS обрано бібліотеку React.
Для збільшення швидкодії роботи клієнтського додатку обрано мережу CDN
та технологію AWS S3.
У третьому розділі описується структура розробленої програмної
системи, описуються функції, які вона виконує, описуються застосовані
технології захисту інформації. Визначаються вимоги для роботи із системою.
Наприкінці наводиться оцінка ефективності застосування системи.
Висновки містять основні результати роботи. У додатках наведено
специфікацію, текст програми та інструкцію користувача. Загальний обсяг
роботи становить 106 сторінок. У кваліфікаційній роботі магістра
17 рисунків, 1 таблиця, 3 додатки. Для виконання роботи використано
21 літературне джерело.
ANOTATION
The topic of this Master's thesis is the optimization of web page rendering
methods using cloud technologies. Today's Internet is saturated with web
applications and websites, and users have high expectations for speed and
performance. Rendering optimization has become a key aspect of web projects
because it directly affects the user experience and competitiveness of web
applications. Cloud technologies are becoming increasingly available and
powerful, providing the opportunity to use remote resources to optimize computing
tasks. Learning how to integrate cloud technologies into web development has
great practical potential. Therefore, this topic is very important for the
development of modern solutions.
The purpose of this master's qualification work is to implement optimization
methods of WEB page rendering to improve display speed performance in various
types of applications.
The object of research is the process of rendering web pages and its
interaction with cloud technologies.
The subject of research is the methods of optimizing the rendering of web
pages, in particular the use of distributed computing resources, cloud technologies
and their implementation in web development. The work focuses on the
development and analysis of new approaches to web page rendering using cloud
resources.
The scientific novelty of the obtained results lies in the study and
development of specialized methods for optimizing the rendering of web pages,
taking into account the use of cloud technologies. The work includes the analysis
of modern approaches to rendering and the development of new algorithms and
practical solutions to improve performance.
Practical value will be useful for web developers and engineers involved in
the development of web applications, as well as for companies using cloud
technologies. The developed methods and recommendations will improve
performance and work efficiency, reduce rendering time, and provide more
convenient and faster access to content for users.
In the first section, an analysis of the subject area was carried out, namely,
uploading content for the website and its stages. Considered cloud technologies,
their advantages and disadvantages. The browser page rendering process is
reviewed in detail. How to download content from hosting. The browser, its types
and its structure are also considered. Tasks that need to be completed at work are
set.
The second section discusses what hosting is, the principles of downloading
content using chank, HTTP, HTTPs and UDP. HTML, CSS and JS programming
languages were chosen to implement the set goals. To simplify development in the
JS programming language, the React library was chosen. CDN network and AWS
S3 technology were chosen to increase the performance of the client application.
The third chapter describes the structure of the system, describes the
functions it performs, and develops information protection. The requirements for
working with the system are defined. At the end, an assessment of the effectiveness
of the system is given.
The conclusions contain the main results of the work. Appendices include
specification, program text, and user manual. The total volume of work is 106
pages. There are 17 figures, 1 table, 3 appendices in the master's qualification
work. 21 literary sources were used to perform the work.
2
ЗМІСТ
ВСТУП………………………………………………………………………. 3
РОЗДІЛ 1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА
ЗАДАЧІ ДОСЛІДЖЕННЯ…………………………………………………... 6
1.1 Аналіз предметної області……………………………………...…. 6
1.2 Вибір напряму дослідження………………………………………. 15
1.3 Постановка задачі…………………………………………………. 26
1.4 Висновки до розділу 1…………………………………………….. 28
РОЗДІЛ 2 ВИБІР ТЕХНОЛОГІЇ ТА ІНСТРУМЕНТАЛЬНИХ ЗАСОБІВ. 30
2.1 Огляд існуючих технологій……………………………………… 30
2.2 Вибір технологій ………………………………………………… 41
2.3 Висновки до розділу 2…………………………………………… 48
РОЗДІЛ 3 ОПТИМІЗАЦІЯ МЕТОДІВ РОБОТИ РЕНДЕРИНГУ WEB-
СТОРІНКИ ЗА ДОПОМОГОЮ ХМАРНИХ ТЕХНОЛОГІЙ……… 49
3.1 Структура системи для впровадження оптимізаційних методів
рендерингу WEB-сторінки ………………………………………………... 49
3.2 Опис функцій системи…………………………………………..... 57
3.3 Забезпечення захисту інформації при роботі зі створеною
системою ……………………………………………………………… 65
3.4 Технічні вимоги технічні вимоги для роботи з системою……… 68
3.5 Оцінка ефективності застосування системи..……………………. 71
3.6 Висновки до розділу 3…………………………………………….. 75
ВИСНОВКИ…………………………………………………………………... 76
ПЕРЕЛІК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ…………………… 79
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ…………………………………… 81
ДОДАТКИ:
А – 482.ЧДТУ.32280-01 Оптимізація методів роботи рендерингу
WEB-сторінки за допомогою хмарних технологій
3
ВСТУП
Актуальність теми дослідження. Тема дослідження є актуальною в
сучасному цифровому світі з кількох важливих причин, такі як зростання
обсягу даних і складності вебсайтів, збільшення використання мобільних
пристроїв для доступу до Інтернету, вплив на рейтинг в пошукових системах
і SEO, економія витрат на інфраструктуру і ресурси серверів, покращення
користувацького досвіду і зменшення відсотка відмов та зменшення
споживання енергії та збереження довкілля. Ці чинники свідчать про
важливість дослідження оптимізації рендерингу веб-сторінок з
використанням хмарних технологій у сучасному цифровому світі.
Метою даної кваліфікаційної роботи магістра є впровадження
оптимізаційних методів рендерингу web-сторінки для покращення
продуктивності швидкості відображення у різних видах застосунків. На
прикладі тестової програмної системи для менеджменту студентів на
факультеті. Розроблена система складатиметься тільки з клієнтської частини
та не потребуватиме наявної серверної частини.
Для досягнення сформульованої мети необхідно розв'язувати такі
задачі:
1. Оцінити сучасні методи рендерингу веб-сторінок і хмарних
технологій, щоб з'ясувати їхні переваги та недоліки.
2. Розробити стратегії та методи оптимізації роботи рендерингу,
зокрема використовуючи хмарні технології, з метою покращення швидкості
та ефективності.
3. Сформувати та обрати технології, що будуть використовуватися при
розробці системи для менеджменту студентів на факультеті.
4
4. Розробити спосіб поєднання усіх компонентів для співпраці між
собою.
5. Оптимізувати систему та налаштувати.
6. Оцінити складність реалізації методу.
Ця галузь, пов'язана з оптимізацією роботи рендерингу веб-сторінок та
використанням хмарних технологій, динамічно розвивається, і багато
експертів активно діляться своїм досвідом та знаннями в цій області.
Наприклад в книзі Аддісон Веслі та Емі Сімс - "High Performance Browser
Networking: What every web developer should know about networking and web
performance" надає вичерпний огляд професійних технік оптимізації
мережевої взаємодії веб-додатків. Ендрю Кінг - "Website Optimization: Speed,
Search Engine & Conversion Rate Secrets" пропонує практичні поради щодо
оптимізації швидкості завантаження вебсайтів для поліпшення пошукової
оптимізації та конверсії.
Об’єкт дослідження є процес рендерингу веб-сторінок та його
взаємодія з хмарними технологіями.
Предмет дослідження є оптимізації рендерингу веб-сторінок, зокрема
використання розподілених обчислювальних ресурсів, хмарних технологій та
впровадження їх у веб-розробку. Робота фокусується на розробці та аналізі
нових підходів до рендерингу веб-сторінок за допомогою хмарних ресурсів.
Наукова новизна одержаних результатів полягає у вивченні та
розробці спеціалізованих методів оптимізації рендерингу веб-сторінок,
враховуючи використання хмарних технологій. Робота включає аналіз
сучасних підходів щодо рендерингу та розробку нових алгоритмів та
практичних рішень для покращення продуктивності.
Одержані у кваліфікаційній роботі результати мають практичне
значення, будуть корисні для веб-розробників та інженерів, які займаються
розробкою веб-додатків, а також для компаній, що використовують хмарні
технології. Розроблені методи та рекомендації дозволять покращити
продуктивність та ефективність роботи, зменшити час рендерингу та
5
забезпечити більш зручний та швидкий доступ до вмісту для користувачів.
Кваліфікаційна робота складається з 3-х розділів, в яких подається
інформація.
У першому розділі проведено аналіз предметної області, а саме
завантаження контенту для вебсайту та його етапи. Розглянуто хмарні
технології їх переваги та недоліки. Детально оглянуто процес рендерингу
сторінки браузера та як відбувається завантаження контенту з хостингу.
Також розглянуто браузер, його види та його будову. Поставлено завдання,
які потрібно виконати в роботі.
У другому розділі розглянуто поняття хостингу, принципи
завантаження контенту за допомогою chank, HTTP, HTTPs та UDP. Для
реалізації поставлених цілей обрано мови програмування HTML, CSS та JS.
Для спрощення розробки мовою програмування JS обрано бібліотеку React.
Для збільшення швидкодії роботи клієнтського додатку обрано мережу CDN
та технологію AWS S3.
У третьому розділі наводиться структура програмної системи,
описуються функції, які вона виконує, способи застосування методів захисту
інформації. Визначаються вимоги для роботи із системою. Наприкінці
наводиться оцінка ефективності застосування системи.
Використана література, що використана під час написання
кваліфікаційної роботи, досить добре розкриває тему та відображає потреби
для аналізу.
6
РОЗДІЛ 1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА
ЗАДАЧІ ДОСЛІДЖЕННЯ
1.1 Аналіз предметної області
Завантаження контенту для вебсайту та його етапи. Контент для
вебсайту - це будь-яка інформація, яка розміщується на вебсайті та
призначена для представлення користувачам через їхні веббраузер. Цей
контент може бути різного типу і формату. Але сам процес завантаження
складний, який включає в себе декілька етапів.
Коли користувач вводить URL в адресний рядок браузера, першим
кроком браузера є перетворення цього URL на IP-адресу сервера, на якому
розміщений вебсайт. Браузер відправляє запит до DNS-сервера, який
повертає відповідну IP-адресу. Потім браузер встановлює з'єднання з веб-
сервером, використовуючи отриману IP-адресу та порт 80 (HTTP) або 443
(HTTPS) для захищеного з'єднання. Якщо відбулося успішне встановлення
з'єднання, браузер відправляє HTTP-запит на веб-сервер, включаючи
інформацію про браузер і необхідні заголовки запиту. Запит містить метод
(GET, POST, і т.д.) та URL-адресу ресурсу, який потрібно завантажити.
Веб-сервер обробляє отриманий запит і визначає, який контент
потрібно надіслати назад до браузера. Це може бути HTML-сторінка, стилі
CSS, скрипти JavaScript, зображення, відео, аудіо тощо. Сервер також
встановлює необхідні заголовки відповіді, такі як "Content-Type" і "Content-
Length". Після підготовки вмісту веб-сервер відправляє відповідь на запит
браузера. Якщо відповідь має бути кешованою (збереженою на локальному
пристрої браузера), то сервер може додати відповідні заголовки для цього.
Браузер отримує відповідь від сервера і починає обробляти отриманий
контент. Це включає в себе розбір HTML для структури сторінки,
7
завантаження і обробку зовнішніх ресурсів, які були вказані в HTML (стилі,
скрипти, зображення), та побудову дерева DOM (Document Object Model).
Браузер виконує рендеринг сторінки, що означає відображення вмісту
на екрані з урахуванням CSS, JavaScript та інших структурних і стилевих
елементів [1]. Остаточний результат рендерингу сторінки відображається на
екрані користувача, і вебсайт стає доступним для взаємодії. У процесі
перегляду сторінки може виникнути потреба завантажити додатковий
контент, такий як зображення або дані з AJAX-запитами. Браузер виконує ці
запити, якщо вони виникають під час взаємодії зі сторінкою.
Кожен із цих етапів має важливе значення для швидкості та
продуктивності веб-сторінки, і оптимізація кожного етапу може покращити
загальний досвід користувачів.
Хмарні технології (або хмарні обчислення) - це парадигма обчислень,
яка полягає в наданні доступу до обчислювальних ресурсів, таких як
обчислювальна потужність, зберігання даних та програмне забезпечення,
через Інтернет, а не локально на конкретних фізичних серверах чи
комп'ютерах. Хмарні обчислення використовуються для різних цілей,
включаючи зберігання даних, обчислення, розробку програмного
забезпечення, аналіз даних, штучний інтелект, веб-хостинг та багато іншого.
Вони стали ключовою частиною сучасної інформаційної та технологічної
інфраструктури, надаючи підтримку багатьом сферам діяльності та
споживачам на всьому світі, на рисунку 1.1 зображено загальну діаграму, що
представляє хмару.
Переваги хмарних технологій. Замість інвестування у власне
обладнання і інфраструктуру, користувачі можуть користуватися хмарними
послугами, що дозволяє їм значно скоротити витрати на обчислювальні
ресурси. Хмарні технології надають можливість легко збільшувати або
зменшувати обсяг обчислювальних ресурсів в залежності від потреб. Це
особливо важливо для підтримки динамічних навантажень. Користувачі
можуть отримати доступ до своїх даних і програм з будь-якого місця, де є
8
Інтернет, і на будь-якому пристрою. Постачальники хмарних послуг
відповідають за забезпечення безпеки та оновлення інфраструктури, що
зменшує навантаження на користувачів. Хмарні платформи надають
інструменти для автоматизації процесів, що спрощує управління ресурсами
та зменшує помилки.
Рисунок 1.1 - Загальне представлення хмари
Недоліки хмарних технологій. Для доступу до хмарних послуг
необхідне підключення до Інтернету. Відсутність зв'язку може призвести до
недоступності даних і додатків. Зберігання та обробка даних на віддалених
серверах може створювати питання щодо приватності та безпеки даних.
Важливо вибирати надійних постачальників та приймати належні заходи
безпеки. Користувачі можуть обмежено контролювати та налаштовувати
інфраструктуру в хмарі, оскільки це зазвичай робиться постачальниками
хмарних послуг. Деякі додатки та послуги, які потребують низької
латентності (наприклад, відеозв'язок в реальному часі), можуть виникати
проблеми у хмарних середовищах через затримки мережі. Користувачі
стають залежними від постачальників хмарних послуг і не завжди можуть
9
легко переносити свої дані та додатки в інше середовище [2]. В деяких
випадках на довгу перспективу витрати на хмарні послуги можуть
перевищити вартість обладнання та інфраструктури власного центру обробки
даних.
Вибір між використанням хмарних технологій і традиційними
локальними рішеннями повинен залежати від конкретних потреб і вимог
вашого бізнесу або проекту, а також від здатностей та ресурсів.
Процес рендерингу сторінки браузером - це складний процес, в
якому браузер отримує HTML-код сторінки і перетворює його в
відображуваний на екрані вміст для користувача. Цей процес базується на
кількох основних принципах:
1. Отримання і розбір HTML-коду. Браузер отримує HTML-код
сторінки від веб-сервера після завантаження сторінки. HTML-код
розбирається браузером для створення дерева DOM (Document Object Model),
яке представляє структуру сторінки.
2. Завантаження зовнішніх ресурсів. Браузер аналізує HTML-код
для визначення зовнішніх ресурсів, таких як стилі CSS, скрипти JavaScript,
зображення, шрифти та інші. Він починає завантажувати ці ресурси
асинхронно, щоб не блокувати відображення сторінки.
3. Формування рендерингового дерева. Браузер створює
рендерингове дерево (Render Tree), яке є відомим як дерево рендерингу. Це
дерево включає всі видимі елементи сторінки, включаючи текст, зображення,
кнопки, поля для введення і т.д.
4. Визначення стилів і розмірів. Браузер обчислює стилі для
кожного елемента на сторінці, використовуючи інформацію з CSS-правил.
Він визначає розміри та позиції елементів на сторінці.
5. Розміщення і відображення. Рендерингове дерево використовує
інформацію про розміщення і стилі для побудови лейауту сторінки. Браузер
розміщує кожен елемент на відповідному місці на екрані і відображає їх
відповідно до заданих стилів.
10
6. Послідовність рендерингу. Рендеринг сторінки відбувається в
оптимальній послідовності, що дозволяє браузеру максимально оптимізувати
продуктивність. Браузер може рендерити видимі елементи спершу, а потім
невидимі або поза видимою областю.
7. Асинхронність і інтерактивність. Браузер може обробляти
JavaScript-скрипти асинхронно для забезпечення інтерактивності сторінки.
Інтерактивні дії користувача, такі як натискання та введення, спричиняють
зміни в рендеринговому дереві.
8. Поновлення сторінки. При зміні структури або стилів сторінки, а
також при інтерактивних подіях, браузер може перерендерити частину або
всю сторінку.
9. Оптимізація продуктивності. Браузери використовують різні
техніки оптимізації, такі як кешування, розробка веб-шрифтів, відкладене
завантаження ресурсів і т.д., для покращення швидкості та продуктивності
рендерингу сторінки.
Принципи рендерингу сторінки браузером допомагають перетворити
HTML-код і стилі в візуальний вміст, який користувач може бачити та
взаємодіяти з ним на вебсайті [3]. Перший рендеринг є важливим показником
часу завантаження сторінки для користувача.
Продовжений рендеринг - це процес постійного оновлення
відображення сторінки після першого рендерингу. Він може виникнути, коли
відбуваються зміни на сторінці, такі як анімації або взаємодія користувача.
Каскадні таблиці стилів - визначає, як сторінка має бути відображена,
включаючи стилі, розміщення та кольори. Під час рендерингу браузер
обробляє CSS та визначає, як кожен елемент повинен виглядати на сторінці.
Віртуальний DOM - це концепція, яка використовується в деяких
JavaScript бібліотеках та фреймворках (наприклад, React). Він являє собою
віртуальну копію реального DOM, і зміни в ньому спочатку обробляються, а
потім застосовуються до реального DOM для оптимізації процесу
рендерингу.
11
Спрямованість - це процес визначення розташування та розмірів
кожного елемента на сторінці. Він виникає після обробки CSS та визначення
місця для кожного блоку.
Пошук елементів (DOM Traversal) після того, як браузер визначив
розміщення та розмір елементів, він повинен знайти їх в DOM-дереві та
відобразити на сторінці.
Repaint - це процес оновлення візуального вигляду окремих елементів
сторінки без зміни їх розміщення на сторінці. Repaint може бути
викликаний, наприклад, при зміні кольору тексту або фону.
Асинхронний рендеринг - це використання асинхронних методів та
технологій для поліпшення часу завантаження та відображення сторінок,
зокрема завантаження ресурсів та виконання JavaScript.
Завантаження контенту з хостингу. Він належать до процесу
отримання інформації (контенту) з сервера, який зберігається на веб-
хостингу. Веб-хостинг - це послуга, яка надає можливість зберігання і
розміщення вебсайтів, файлів, даних та інших ресурсів на спеціальних
серверах, доступ до яких можливий через Інтернет. Таким чином, це процес
передачі веб-контенту з сервера хостингу до браузера користувача для
відображення на веб-сторінці. Існує кілька видів хостингу, які розрізняються
за специфікаціями, можливостями та вартістю.
Спільний хостинг (Shared Hosting). У цьому типі хостингу ваш вебсайт
спільно використовує сервер і ресурси з іншими вебсайтами на тому ж
сервері. Це найбільш економічний варіант, але обмежує ресурси та контроль.
Віртуальний приватний сервер (VPS Hosting). Віртуальний сервер
(VPS) представляє собою віртуальну область на фізичному сервері, яка
призначена лише для вашого вебсайту, зображений на рисунку 1.2
12
Рисунок 1.2 - VPS Hosting
Тут є більший рівень контролю та ресурсів, порівняно зі спільним
хостингом.
Виокремлений хостинг (Dedicated Hosting). У цьому варіанті ви
отримуєте власний фізичний сервер, призначений тільки для вашого
вебсайту. Ви маєте повний контроль над сервером та його ресурсами, але це
дорожчий варіант.
Хмарний хостинг (Cloud Hosting). Це новітній підхід, де ваш вебсайт
зберігається на розподілених серверах в хмарі, зображено на рисунку 1.3.
Рисунок 1.3 - Хмарний хостинг
13
Це дозволяє миттєво масштабувати ресурси за потребою, забезпечуючи
стабільність та доступність [4].
Хостинг для WordPress. Спеціалізований хостинг для вебсайтів,
побудованих на платформі WordPress. Він оптимізований для роботи з цією
системою управління контентом та надає додаткові функції для її підтримки.
E-commerce хостинг. Хостинг, спеціально налаштований для інтернет-
магазинів і електронної комерції. Він надає засоби для обробки та
забезпечення безпеки транзакцій.
Хостинг для ігор (Game Hosting). Цей тип хостингу призначений для
гри серверів і гри-сховищ.
Хостинг для електронної пошти (Email Hosting). Спеціалізований
хостинг для електронної пошти, який надає засоби для обробки та зберігання
електронної пошти.
Медіа-хостинг (Media Hosting). Цей тип хостингу спрямований на
зберігання та доставлення великих обсягів медіафайлів, таких як відео та
аудіо.
Вибір конкретного типу хостингу залежить від потреб, бюджету та
ресурсів, які плануються використовувати для вебсайту або додатку.
Процес завантаження контенту з хостингу до браузера може бути
розглянутий у наступних кроках:
1. Користувач вводить URL (Uniform Resource Locator) в адресний
рядок браузера, наприклад, "https://www.example.com". Браузер відправляє
запит до DNS-сервера, щоб отримати IP-адресу сервера, на якому
розміщений вебсайт "www.example.com". DNS-сервер повертає IP-адресу
сервера (наприклад, "93.184.216.34").
2. Браузер встановлює TCP/IP-з'єднання з сервером,
використовуючи IP-адресу і відповідний порт (зазвичай 80 для HTTP або 443
для HTTPS для стандартних з'єднань). Якщо використовується HTTPS, то
14
відбувається процес TLS-рукостискання (TLS handshake) для забезпечення
шифрування даних.
3. Браузер формує HTTP-запит до сервера на основі URL-адреси.
Запит містить метод (GET, POST, і т.д.), URL-адресу ресурсу та заголовки
запиту, що містять інформацію про браузер і його можливості.
4. Веб-сервер отримує HTTP-запит від браузера та визначає, який
контент (ресурс) потрібно надіслати назад до браузера. Сервер може
виконувати обчислення, звертатися до баз даних або взаємодіяти з іншими
службами для генерації відповіді.
5. Веб-сервер генерує HTTP-відповідь, яка містить контент
(наприклад, HTML-сторінку) та відповідні HTTP-заголовки. Заголовки
можуть містити інформацію про тип контенту ("Content-Type") і розмір
контенту ("Content-Length").
6. Браузер отримує HTTP-відповідь від сервера і починає обробляти
отриманий контент. HTML-сторінка розбирається для створення структури
DOM (Document Object Model) - представлення сторінки в браузері.
7. Браузер виконує рендеринг сторінки, відображуючи вміст на
екрані з урахуванням CSS, JavaScript і інших стилевих і структурних
елементів. Візуально відображається структура і зовнішність сторінки, яку
користувач може бачити.
8. У процесі взаємодії зі сторінкою може виникнути потреба у
завантаженні додаткового контенту, такого як зображення, стилі CSS,
скрипти JavaScript або дані з AJAX-запитами. Браузер виконує ці додаткові
запити, якщо необхідно, для завантаження додаткового вмісту під час
перегляду сторінки [5].
Це загальний процес, як браузер завантажує контент з веб-хостингу і
відображає його на екрані користувача. Кожен з цих кроків може бути
докладніше оптимізований для покращення швидкості та продуктивності
завантаження веб-сторінок.
15
1.2 Вибір напряму дослідження
У попередньому розділі проаналізовано предмет області дослідження.
Розглянуто принцип, як браузер завантажує контент для вебсайту, також що
таке хмарні технології, принципи рендерингу сторінки браузера та як браузер
завантажує контент з хостингу. Тепер розглянемо напрям дослідження.
Браузер - це програма для перегляду веб-сторінок та інших онлайн-
ресурсів в Інтернеті. Основним завданням браузера є відображення веб-
сторінок, взаємодія з ними та надання доступу до різних ресурсів Інтернету.
Браузер під'єднується до сервера HTTP, отримує з нього документ і форматує
його для представлення користувачеві або намагається викликати зовнішню
програму, яка це зробить, залежно від формату документа. Формати
документа, які браузер повинен представляти без допомоги зовнішніх
програм, визначає World Wide Web Consortium (скорочено W3C). До них
належать формати текстових документів HTML та XHTML, а також
найпоширеніші формати растрової графіки GIF, JPEG та PNG (останній —
розробка W3C).
Адресування сторінок відбувається за допомогою URL (Uniform
Resource Locator, RFC 1738), який інтерпретується, як адреса, що
починається з http: для протоколу HTTP. Багато навігаторів також
підтримують інші типи URL та їх відповідні протоколи, як, наприклад,
gopher: для Gopher (ієрархічний протокол гіперпосилань), ftp: для протоколу
перенесення файлів FTP, rtsp: для протоколу потоків реального часу RTSP, та
https: для HTTPS (HTTP Secure, що розширює HTTP за допомогою Secure
Sockets Layer SSL або Transport Layer Security TLS) [6].
Популярні браузери включають Google Chrome, Mozilla Firefox,
Microsoft Edge, Safari та інші можна розглянути на рисунку 1.4. Користувачі
можуть вибирати браузер відповідно до своїх потреб і вподобань, і вони
можуть встановлювати кілька браузерів одночасно на своєму пристрої.
16
Рисунок 1.4 - Види найпопулярніших браузерів
Браузер - найважливіша програма на будь-якому комп'ютері або
смартфоні. Він є необхідним для користувача, який практично всі свої
онлайн-дії виконує через інтернет.
Графічний інтерфейс користувача (GUI). При запуску браузера першим
відображається графічний інтерфейс користувача, який містить адресний
рядок, кнопки для навігації (назад, вперед, оновлення) і область для
відображення веб-сторінок. Цей інтерфейс дозволяє нам взаємодіяти з
браузером, вводити URL-адреси, переходити за посиланнями та
використовувати інші функції.
Кожен браузер має свій власний інтерфейс, який може трохи
відрізнятися від інших, але в цілому є зрозумілим інтуїтивно.
Однією з ключових функцій браузера є відображення веб-сторінок, і
для цього використовується спеціальний компонент, який називається
двигуном рендерингу. Цей компонент обробляє HTML-код, CSS-стилі та
JavaScript-скрипти, перетворюючи їх в те, що ми бачимо на екрані.
17
Двигун рендерингу відповідає за розміщення елементів на сторінці, їх
оформлення, відображення зображень та виконання інших завдань,
пов'язаних із відображенням контенту. Один з найпоширеніших двигунів - це
Chromium, на основі якого побудовано багато сучасних браузерів.
Мережні протоколи та запити. Браузери встановлюють з'єднання з веб-
серверами за допомогою різних мережевих протоколів, таких як HTTP
(Hypertext Transfer Protocol) та HTTPS (HTTP Secure). Коли ми вводимо URL-
адресу або клікаємо на посилання, браузер генерує мережевий запит до
відповідного сервера.
Цей запит містить інформацію про те, який саме ресурс ми хочемо
отримати. Після надсилання запиту сервер обробляє його і відправляє назад
веб-сторінку або інший контент, який ми запитали. Після цього включається
двигун рендерингу, який відображає отримані дані на екрані.
Кешування. Для прискорення завантаження веб-сторінок і зменшення
навантаження на сервери браузери використовують кешування. Коли ми
відвідуємо веб-сторінку, її копія зберігається на нашому пристрої. При
наступному відвідуванні цієї сторінки браузер перевіряє, чи є у нього
збережена копія в кеші.
Якщо така копія є і не змінилася, браузер завантажує сторінку з кешу,
що допомагає заощадити час завантаження. Кеш допомагає браузеру
працювати швидше і зменшує навантаження на сервери, оскільки їм не
потрібно надавати одні й ті самі дані кожен раз.
Робота браузера - це складний процес, іноді вимагає значної
обчислювальної потужності. Тому на старих або обмежених пристроях деякі
сучасні вебсайти можуть завантажуватися повільно.
Перед тим, як перейти до аналізу процесу відображення веб-сторінок в
браузері, важливо ретельно розібрати його структуру та зрозуміти, які
внутрішні процеси відбуваються і на якому рівні вони виконуються. Отже, на
внутрішній будові браузера виглядає наступним чином, який зображено на
рисунку 1.5.
18
Рисунок 1.5 - Внутрішня будова браузера
User Interface - це все, що бачить користувач: адресний рядок, кнопки
вперед/назад, меню, закладки - за винятком області де відображається сайт.
Browser Engine відповідає за взаємодію між User Interface та Rendering
Engine. Наприклад, клік по кнопці назад повинен сказати компоненту RE, що
потрібно відмалювати попередній стан.
Rendering Engine відповідає за відображення веб-сторінки. Залежно від
типу файлу, цей компонент може розбирати і рендерувати як HTML/XML і
CSS, і PDF.
Network виконує xhr запити за ресурсами, і загалом, спілкування
браузера з іншим інтернетом відбувається через цю компоненту, включаючи
проксування, кешування тощо.
JS Engine місце де розбирається та виконується js код.
UI Backend використовується для малювання стандартних компонентів
типу чекбоксів, кнопок.
Data Persistence відповідає за зберігання локальних даних, наприклад, у
куках, SessionStorage, indexDB і так далі.
19
Отже, за допомогою компонента Network браузер почав отримувати
HTML-файл чанками зазвичай по 8кб [7]. Далі йде процес парсингу
(специфікація процесу) та рендерингу цього файлу в компоненті Rendering
Engine. Сам процес парсингу зображений на рисунку 1.6.
Рисунок 1.6 - Процес парсингу
Результатом парсингу є DOM дерево. Якщо для прикладу взяти такий
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Rendering</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
20
<div class="wrapper">
<div class="header">
<h1>Hey</h1>
</div>
<div class="content">
<p>
Lorem <span>ipsum</span>.
</p>
</div>
<footer>
Contact me
</footer>
</div>
<script src="./code.js"></script>
</body>
</html>
DOM дерево такого html файлу буде виглядати як на рисунку 1.7
21
Рисунок 1.7 - DOM дерево html файлу
У міру того як браузер парсить html файл, він зустрічає теги, що
містять посилання на сторонні ресурси (<link>, <script>, <img> і так далі) - у
міру їх виявлення відбувається запит за цими ресурсами.
Таким чином, відправивши запит на адресу прописаного в атрибуті href
тега <link rel="stylessheet"> і отримавши файл css стилів, браузер парсить цей
файл і будує так званий CSS Object Model - CSSOM.
Для прикладу візьмемо такий файл стилів:
body {
font-size: 14px;
}
.wrapper {
width: 960px;
22
margin: 0 auto;
}
.wrapper .header h1 {
font-size: 26px;
}
.wrapper p {
color: red;
}
footer {
padding: 20px 0;
}
З якого отримаємо CSSOM, що зображений на рисунку 1.8.
Рисунок 1.8 - Отриманий CSSOM
23
Тепер є DOM і CSSOM, наступним кроком є об'єднання DOM і
CSSOM, точніше в Render Tree.
Render Tree — це дерево видимих елементів, побудованих у тому
порядку, в якому вони повинні рендеруватися на сторінці. Елементи, які
мають css правило display: none або інші, що негативно впливають на
відображення - не будуть в render tree.
Браузер будує Render Tree, щоб точно визначити, що йому потрібно
відмалювати і в якому порядку. Побудова дерева Render відбувається
приблизно так: починаючи з рутового елемента (html), парсер проходить по
всіх видимих елементах (пропускаючи link, script, meta, приховані через css
елементи) і для кожного видимого елемента знаходить відповідне css
правило з CSSOM.
У Firefox елементи Render Tree називаються кадрами (frames). Webkit
використовує термін renderer чи render object [8]. Render object знає як
розмістити себе на сторінці, а також містить інформацію про свої дочірні
елементи.
Виходячи з прикладу буде отримано Render Tree, зображений на
рисунку 1.9.
24
Рисунок 1.9 - Render Tree
На цей час маємо в деякому стані Render Tree - дерево, що містить
інформацію про те, що і як потрібно відмалювати. Тепер браузер повинен
зрозуміти на якому місці та з якими розмірами відображатиметься елемент.
Процес обчислення позиції та розмірів називається Layout.
Layout – це рекурсивний процес визначення положення та розмірів
елементів із Render Tree. Він починається від кореневого Render Object, яким
є, і проходить рекурсивно вниз у частині або всій ієрархії дерева,
вираховуючи геометричні розміри дочірніх render object. Кореневий елемент
має позицію (0,0) та його розміри дорівнюють розмірам видимої частини
вікна, тобто розміру viewport'a.
У Html використовується потокова модель компонування (flow based
layout), тобто геометричні розміри елементів у деяких випадках можна
розрахувати за один прохід (якщо елементи, що зустрічаються в потоці
пізніше, не впливають на позицію та розміри вже пройдених елементів).
Layout може бути глобальний, коли потрібно розрахувати положення
render object всього дерева, і інкрементальний, коли потрібно розрахувати
лише частину дерева. Глобальний layout відбувається, наприклад, при зміні
розмірів шрифту або при події resize. Інкрементальний layout відбувається
лише для render object, позначених як "dirty".
До кінця процесу layout кожен render object має своє положення та
розміри.
Підбиваючи проміжний підсумок: браузер володіє інформацією щодо
того, що, як і де слід відобразити. Отже, остаточним кроком залишається
виконати процес відображення. Цей процес називається процесом малювання
(Paint).
Paint - етап, де піксель монітора заповнюється кольором вказаним у
властивостях render object і білий екран перетворюється на картину задуману
розробником. На всьому шляху рендерингу - це найдорожчий процес.
25
Також, як і процес layout, paint може бути глобальним – дерево
перемальовується повністю, і інкрементальним – дерево перемальовується
частково. Для часткового перемальовування render object позначає свій
rectangle як не валідний. p align="justify"> Операційна система розцінює цю
область як вимагає перемальовки і викликає подію paint. При цьому браузер
вміє об'єднувати області, щоб виконати перерисовку для всіх місць, де це
необхідно.
Отже, існує потреба в механізмі, який дозволив би створювати
вебсайти з багатою анімацією, при цьому не перевантажуючи
обчислювальний процесор (CPU) та забезпечуючи відображення кожного
кадру за менше ніж 16,6 мілісекунди (60 кадрів в секунду). Справді, в
браузері існує ще один етап, який сприяє оптимізації динаміки вебсайтів, і це
етап композиції (Composite).
Перед тим як виконується композиція, всі намальовані елементи
знаходяться на одному шарі пам'яті (memory layer). Це означає, що зміна
параметрів одного елемента може призвести до перерахунку параметрів
сусідніх елементів. Проте, якщо розділити елементи на різні композиційні
шари, то зміна параметрів елемента викличе перерахунок тільки для
конкретного шару, не впливаючи на елементи інших шарів. Цей процес є
найбільш витратно-ефективним з точки зору продуктивності, тому важливо
вносити зміни, які впливають лише на композитні шари.
Загалом, підсумовуючи вищезазначене, отримуємо наступний процес
рендерингу веб-сторінки, що зображений на рисунку 1.10.
26
Рисунок 1.10 - Процес рендерингу веб-сторінки
Браузер отримує html файл, розбирає його і будує DOM. Зустрічаючи
css стилі, браузер їх підвантажує, розбирає, будує CSSOM і об'єднує разом із
DOM – отримуємо Render Tree. Після розташування елементів можна почати
малювати, це завдання paint, етап на якому заповнюються пікселі екрана.
При зміні властивостей CSS все залежить від конкретної властивості,
яка змінюється. Існують лише дві властивості, що викликають операцію
композиції (composite): opacity (прозорість) та transform (трансформація).
Саме ці дві властивості є найефективнішими для анімації. Наприклад, зміна
background викличе операцію фарбування (paint), а потім композицію, а зміна
display спочатку викличе операцію компонування (layout), потім фарбування
(paint) і, нарешті, композицію. Повний перелік операцій, які викликаються
змінами стилів, можна знайти на вебсайті csstriggers.com.
Щодо додавання нового вузла до DOM-дерева, браузеру потрібно
додати новий об'єкт до дерева, розрахувати його положення на сторінці,
розрахувати положення інших елементів на сторінці (якщо вони були змінені
новим елементом), і в кінцевому підсумку намалювати. Тому при виконанні
таких операцій важливо враховувати продуктивність, оскільки не кожен
користувач Інтернету використовує веб-програму на найновішій моделі
пристрою.
27
1.3 Постановка задачі
Сучасна веб-розробка постійно стикається з викликами оптимізації
часу завантаження веб-сторінок та їх рендерингу на клієнтському браузері. В
контексті зростаючої складності веб-сторінок, а також різноманітності
пристроїв та мережевих обмежень, необхідно розглядати нові підходи до
покращення продуктивності веб-сторінок. Одним із перспективних
напрямків є використання хмарних технологій для рендерингу веб-сторінок.
Оптимізація рендерингу веб-сторінок має декілька важливих причин і
переваг.
Покращення швидкості рендерингу дозволяє сторінкам
завантажуватися швидше. Це важливо, оскільки користувачі не бажають
чекати довго на завантаження вмісту. Швидке завантаження сприяє
задоволенню користувачів і знижує відскок (bounce rate).
Відмінний користувацький досвід, включаючи швидку відповідь на дії
користувача і плавну анімацію, може покращити спілкування користувача з
веб-сторінкою. Підвищення продуктивності рендерингу допомагає створити
більш зручний та привабливий інтерфейс.
Швидкість завантаження веб-сторінки є одним з факторів, які
впливають на рангування сторінки в пошукових системах. Пошукові
системи, такі як Google, враховують час завантаження сторінки при
ранжуванні результатів пошуку. Швидкість завантаження може вплинути на
позиції вашого сайту в пошукових видачах.
Швидше завантаження веб-сторінок споживає менше ресурсів сервера і
клієнтських пристроїв. Це дозволяє економити енергію і гроші, особливо для
користувачів мобільних пристроїв.
Швидкість завантаження також впливає на зменшення відмов (bounce
rate). Коли сторінка завантажується повільно, користувачі частіше
залишають її без перегляду. Швидше завантаження може збільшити кількість
переглядів сторінок і знизити відмови.
28
Завдяки зростаючій кількості користувачів мобільних пристроїв,
швидкість завантаження стає ще важливішою. Мобільні користувачі мають
обмежену пропускну здатність і часто працюють в умовах обмежених
ресурсів, тому швидке завантаження сторінок особливо важливе для них [9].
Метою даної кваліфікаційної роботи магістра є дослідження та
розробка оптимізованих методів рендерингу веб-сторінок з використанням
хмарних технологій з метою підвищення швидкості завантаження веб-
сторінок та поліпшення їх продуктивності.
Завдання включають:
1. Проведення аналізу існуючих методів рендерингу веб-сторінок та
визначення їх переваг та недоліків.
2. Дослідження доступних хмарних платформ і сервісів для
рендерингу веб-сторінок.
3. Розробка оптимізованих методів рендерингу веб-сторінок з
використанням хмарних технологій.
4. Порівняння ефективності розроблених методів з існуючими
рішеннями.
5. Підготовка пояснювальної записки до кваліфікаційної роботи та
подання результатів.
Очікується, що результатом цієї роботи буде web-застосунок з
використанням оптимізаційних методів рендерингу веб-сторінок з
використанням хмарних технологій, які сприятимуть покращенню
продуктивності та швидкості завантаження веб-сторінок.
1.4 Висновки до розділу 1
У першому розділі роботи проведено глибокий аналіз предметної
області, який охопив кілька ключових аспектів веб-розробки та оптимізації
вебсайтів. Перш за все, було детально розглянуто процес завантаження
контенту для вебсайту та виділено його основні етапи. Цей аналіз дозволив
29
краще розуміти, як веб-сторінки завантажуються та відображаються в
браузері, і визначити можливі шляхи та способи оптимізації для поліпшення
швидкості завантаження.
Далі, розглянуто хмарні технології, їх переваги та недоліки. Цей аналіз
був спрямований на висвітлення того, як хмарні рішення можуть бути
використані для оптимізації процесу рендерингу веб-сторінок, забезпечуючи
масштабованість та доступність контенту.
Окремо було досліджено процес рендерингу сторінки браузера,
розглянуто важливі аспекти завантаження контенту з хостингу та визначено
ключові фактори, що впливають на продуктивність цього процесу. Це надало
змогу ідентифікувати можливі пункти оптимізації в цій частині веб-розробки.
Додатково, робота охопила дослідження браузера як інструмента, за
допомогою якого користувачі переглядають веб-сторінки, розглянуто різні
види браузерів та їх будову. Це важливо для розуміння контексту
оптимізації, оскільки різні браузери можуть вести себе по-різному під час
завантаження та відображення сторінок.
Були сформульовані конкретні завдання, які передбачено виконати
надалі в роботі. Ці завдання є основними для подальших досліджень та
розробки програмної системи з метою тестування запропонованого
оптимізованого методу рендерингу веб-сторінок зв икористанням хмарних
технологій.
30
РОЗДІЛ 2 ВИБІР ТЕХНОЛОГІЇ ТА ІНСТРУМЕНТАЛЬНИХ ЗАСОБІВ
2.1 Огляд існуючих технологій
HTTP (Hypertext Transfer Protocol) - це протокол передачі
гіпертексту, який використовується для обміну даними між веб-серверами та
браузерами користувачів в Інтернеті. HTTP є основним протоколом вебу і
визначає, як запити та відповіді повинні бути сформовані та оброблені,
загальний принцип роботи зображено на рисунку 2.1.
Рисунок 2.1 - Принцип роботи HTTP
Основні характеристики HTTP включають:
̶ Запити (Requests) коли користувач вводить URL-адресу в браузері
або клікає на посилання, браузер формує HTTP-запит до веб-сервера для
отримання певного ресурсу, такого як веб-сторінка або файл.
̶ Відповіді (Responses) веб-сервер обробляє запит і формує HTTP-
відповідь, яка містить запитаний контент та інформацію про статус операції.
̶ Методи (Methods) HTTP визначає різні методи запитів, такі як GET
(отримати вміст), POST (надіслати дані для обробки на сервері), PUT
(оновити існуючий ресурс) і DELETE (видалити ресурс) [10].
31
̶ Заголовки (Headers) запити і відповіді можуть містити HTTP-
заголовки, які надають додаткову інформацію про запит або відповідь, таку
як тип контенту, дата, код стану тощо.
̶ Сесії (Sessions) HTTP - це безстанційний протокол, але для
збереження стану між запитами користувача можуть використовуватися
сесії, які зберігають дані між послідовними HTTP-запитами.
̶ Безпека (Security) HTTPS (HTTP Secure) - це версія HTTP, яка
шифрує дані між браузером і сервером, забезпечуючи конфіденційність та
безпеку відповідей та запитів.
HTTP є фундаментальним для функціонування вебу і використовується
в багатьох аспектах онлайн-діяльності, включаючи перегляд веб-сторінок,
надсилання форм, отримання зображень і багато інших.
Процес завантаження контенту через протокол HTTP (Hypertext
Transfer Protocol) - це основний механізм, за допомогою якого вебсайти та
веб-додатки передають дані між веб-сервером і браузером користувача [11].
Цей процес складається з кількох послідовних етапів:
1. Ініціювання запиту. Початково браузер користувача ініціює запит
до веб-сервера для отримання певного ресурсу (наприклад, веб-сторінки,
зображення або іншого файлу). Запит містить інформацію про тип запиту,
URL-адресу та інші параметри.
2. Обробка запиту на сервері. Веб-сервер отримує запит та аналізує
його. Він визначає, який ресурс потрібно надіслати користувачеві та чи він
доступний.
3. Відповідь сервера. Після обробки запиту сервер формує відповідь,
яка містить запитаний контент. Відповідь містить також заголовки, які
містять інформацію про тип контенту, статус відповіді, дату тощо.
4. Передача даних. Відповідь сервера передається через Інтернет до
браузера користувача. Цей процес може займати різний час в залежності від
швидкості з'єднання та розміру контенту.
32
5. Рендеринг контенту. Після отримання відповіді браузер розпочинає
рендеринг контенту. Це включає в себе відображення тексту, зображень,
відео та інших елементів на сторінці згідно зі структурою HTML-коду та
стилізацією CSS.
6. Відображення контенту. Завантажений контент відображається на
екрані користувача. Користувач може взаємодіяти з відображеним вмістом,
натискати посилання, запускати відео тощо.
7. Кешування. Для поліпшення продуктивності та зменшення
навантаження на сервери браузер може зберігати копії отриманих ресурсів в
кеші. Це дозволяє прискорити завантаження сторінок при наступних
відвідуваннях.
Важливо щоб процес був оптимізований для забезпечення швидкості та
ефективності для кінцевих користувачів.
HTTPs — це розширення для протоколу HTTP, що робить його
безпечним. Річ у тому, що дані передаються за HTTP у відкритому вигляді.
Це створює ризик розкрити конфіденційну інформацію, якщо хтось
перехопить трафік. HTTPs вирішує цю проблему, додаючи в початковий
протокол можливість шифрування даних.
Абревіатура HTTPs розшифровується як HyperText Transfer Protocol
Secure — безпечний протокол передачі гіпертексту. Безпека досягається за
рахунок об’єднання протоколу HTTP з протоколом TLS [12].
Оскільки HTTPS це фактично HTTP, який передається через SSL або
TLS, то майже всі його основні елементи шифруються: URL-запити,
включаючи шлях та назву ресурсу (сторінки), параметри запиту, заголовки та
кукі, які часто містять ідентифікаційні дані про користувача. Не
шифруються: назва або адреса хоста (вебсайту) та порт, оскільки вони
використовуються транспортним протоколом TCP/IP для встановлення
з'єднання.
33
Шифрування гарантує помірний захист від підслуховування та від
нападу, за умови коректних налаштувань та підпису сертифіката
авторизованим центром сертифікації.
TCP портом за замовчуванням для HTTPS є 443, для HTTP — 80. Щоб
підготувати вебсервер для прийняття https транзакцій адміністратор повинен
створити сертифікат з відкритим ключем для вебсервера. Ці сертифікати
можуть бути створені на UNIX сервері такими програмами, як наприклад
OpenSSL [13]. Цей сертифікат повинен бути підписаний уповноваженим на
видачу сертифікатів (certificate authority), який засвідчує, що отримувач
сертифіката — саме той, про кого йдеться у сертифікаті.
Браузери розповсюджуються з сертифікатами центрів сертифікації
верхнього рівня, що дозволяє браузерові перевіряти сертифікати, які були
підписані цими центрами.
Протокол HTTPS особливо важливий у незахищених мережах (таких як
публічні Wi-Fi точки доступу), оскільки будь-хто в локальних мережах може
аналізувати трафік та перехоплювати чи змінювати інформацію, не захищену
HTTPS. Це означає, що гіпотетичний зловмисник може потенційно красти
приватні дані користувача, отримувати доступ до облікового запису,
вставляти шкідливий програмний код чи посилання на програмне
забезпечення у сторінки, що надсилаються користувачеві у відповідь на його
запити.
Організації можуть також мати власних уповноважених на видачу
сертифікатів, особливо якщо вони відповідальні за конфігурацію браузерів,
що мають доступ до їх власних сайтів (наприклад, сайти на внутрішній
мережі компанії), оскільки вони можуть тривіально додати свій власний
сертифікат до браузера.
Деякі сайти використовують самостійно підписані сертифікати. Їх
використання забезпечує захист проти підслуховування, але є ризик нападу.
Система може також використовуватися для клієнтської
автентифікації, щоб обмежити доступ до вебсервера тільки зареєстрованими
34
користувачами. Для цього адміністратор сайту створює сертифікати для
кожного користувача, які завантажуються в їхні браузер [14]. Такі
сертифікати зазвичай містять ім'я і електронну пошту зареєстрованого
користувача, й автоматично перевіряються сервером при кожному
повторному підключенні. Повторне введення пароля не потрібне. Загальний
принцип зʼєднання зображено на рисунку 2.2.
Рисунок 2.2 - Загальний принцип зʼєднання
Відмінність HTTP від HTTPs в тому, що HTTP використовує порт 80
для комунікації, тоді як HTTPs використовує порт 443. Головна відмінність
HTTPs забезпечує безпечну передачу особистих даних в той час, як HTTP
цього не робить.
Якщо зловмисник перехопить трафік, переданий через HTTP, він
матиме можливість переглянути всю інформацію, яку ви вводите на вебсайті,
таку як вашу контактну інформацію, логін і пароль, а також дані вашої
банківської картки. Щоб уникнути ризику розкриття конфіденційних даних,
важливо вводити їх тільки на сайтах, які використовують протокол HTTPs.
Протокол, який використовується на конкретному вебсайті, завжди можна
перевірити в адресному рядку браузера.
35
UDP — один із протоколів в стеку TCP/IP. Від протоколу TCP він
відрізняється тим, що працює без встановлення з'єднання. UDP — це один з
найпростіших протоколів транспортного рівня моделі OSI, котрий виконує
обмін повідомленнями без підтвердження та гарантії доставлення, приклад
роботи протоколу зображено на рисунку 2.3.
Рисунок 2.3 - Принцип роботи протоколу UDP
При використанні протоколу UDP відповідальність за обробку помилок
і повторну передачу даних покладена на протокол рівнем вище [15]. Але
попри всі недоліки, протокол UDP є ефективним для серверів, що
надсилають невеликі відповіді великій кількості клієнтів.
Основні особливості UDP включають:
1. UDP є безз'єднаним протоколом, що означає, що він не встановлює
активне з'єднання між відправником і отримувачем передачі даних перед
початком передачі.
2. UDP не гарантує доставку даних до отримувача і не передбачає
підтвердження про успішну доставку. Це робить його менш надійним в
порівнянні з іншими протоколами, такими як TCP (Transmission Control
Protocol).
36
3. UDP володіє меншою накладною на передачу даних і є швидшим в
порівнянні з TCP, що робить його відмінним вибором для додатків, де
швидкість важлива і можливі деякі втрати даних прийнятні.
4. UDP використовується в різних додатках, таких як стрімінг
мультимедіа, відеоконференції, онлайн-ігри та додатки, де швидкість
передачі даних важлива, і де деякі втрати даних прийнятні.
Протокол UDP використовують такі сервіси та протоколи вищого
рівня:
1. TFTP (англ. Trivial File Transfer Protocol, найпростіший протокол
передачі файлів),
2. SNMP (англ. Simple Network Management Protocol, простий
протокол управління мережею),
3. DHCP (англ. Dynamic Host Configuration Protocol, протокол
динамічної конфігурації вузла),
4. DNS (англ. Domain Name System, служба доменних імен).
Також цей протокол може використовуватися для різноманітних
мережевих ігор реального часу, потокового відео та аудіо, інших типів даних.
Принципи оптимізації рендерингу веб-сторінки включають в себе
різні аспекти та підходи, які допомагають зробити веб-сторінку більш
ефективною і швидкою у відображенні для користувачів [16]. Ось деякі з
найважливіших принципів оптимізації рендерингу сторінки:
1. Зменшення кількості HTTP-запитів на сервер для завантаження
ресурсів сторінки (зображення, стилі, скрипти) може значно покращити
швидкість завантаження. Це можна досягти шляхом об'єднання файлів,
використання спрайтів для зображень та зменшення кількості
сторонніх ресурсів.
2. Використання кешування дозволяє зберігати копії ресурсів на стороні
користувача. Це дозволяє зменшити час завантаження сторінки при
повторних відвідуваннях. Кешування може бути на стороні браузера
або на стороні сервера.
37
3. Великі зображення можуть значно уповільнювати завантаження
сторінки. Використання стиснення та оптимізації зображень
(наприклад, формату WebP) допомагає зменшити їх розмір без втрати
якості.
4. Використання асинхронного завантаження ресурсів, таких як
JavaScript-файли та сторонні скрипти, дозволяє сторінці
завантажуватися паралельно з обробкою цих ресурсів. Це полегшує
швидке відображення сторінки користувачу.
5. Завантаження деяких ресурсів може бути відкладеним, особливо тих,
які не є обов'язковими для початкового відображення сторінки. Такі
ресурси можуть завантажуватися після відображення основного
контенту сторінки.
6. Забезпечення сумісності та оптимізація для різних браузерів може
покращити швидкість та якість відображення сторінки для всіх
користувачів.
7. Використання методів стиснення (наприклад, gzip або Brotli) для
текстового контенту допомагає зменшити обсяг даних, які передаються
через мережу, і збільшує швидкість завантаження.
8. Використання сторонніх ресурсів, таких як шрифти або скрипти, може
збільшувати час завантаження сторінки через залежність від сторонніх
серверів. Мінімізація такого використання може полегшити швидке
відображення сторінки.
9. Зайві переадресації можуть додатково збільшувати час завантаження
сторінки. Важливо мінімізувати їх використання.
10.Постійне відстеження швидкості завантаження та аналіз поведінки
користувачів може допомогти виявити проблеми та покращити
оптимізацію рендерингу сторінки.
Ці принципи допомагають створити швидку та ефективну веб-сторінку,
яка забезпечує задоволення користувачів та покращує їхній досвід
використання.
38
Поза основними принципами оптимізації рендерингу сторінки, існують
інші фактори та стратегії, які можна враховувати.
Створення адаптивного дизайну дозволяє сторінці належним чином
адаптуватися до різних пристроїв і розмірів екранів, що полегшує
відображення на мобільних пристроях та планшетах.
Використання лінивого завантаження для зображень і фреймів
дозволяє завантажувати контент тільки тоді, коли він стає видимим для
користувача, що зменшує витрати на мережу та прискорює завантаження.
Використання службовців (Service Workers) для кешування ресурсів та
роботи в офлайн-режимі може покращити продуктивність сторінки і
забезпечити доступ до неї в умовах обмеженої мережі [17].
Розуміння та оптимізація критичного шляху рендерингу дозволяє
прискорити відображення основного контенту сторінки.
Враховуючи можливість мультилінгвальності, можна оптимізувати
завантаження лише необхідних перекладів для користувачів із відповідними
налаштуваннями.
Мінімізація надмірного HTML та CSS коду допомагає зменшити обсяг
даних для передачі та робить сторінку більш легкою для браузера.
Ідентифікація та пріоритетизація ресурсів, які є найбільш важливими
для початкового відображення сторінки, може покращити загальний час
завантаження.
Використання інструментів для аналізу швидкості завантаження
сторінки (наприклад, Google PageSpeed Insights) і виправлення виявлених
проблем є важливою частиною оптимізації.
Загалом, оптимізація рендерингу сторінки - це складний і постійний
процес, але дотримання цих принципів допомагає забезпечити швидке та
ефективне відображення веб-сторінок для користувачів.
HTML (Hypertext Markup Language) - це стандартна мова розмітки для
створення веб-сторінок та їх структуризованого вмісту. HTML визначає, які
39
елементи та теги використовуються для побудови веб-сторінки та як вони
взаємодіють між собою.
Елементи HTML є будівельними блоками сторінок HTML. За
допомогою конструкцій HTML, зображення та інші об'єкти, такі як
інтерактивні форми, можуть бути вбудовані у візуалізовану сторінку. HTML
надає засоби для створення структурованих документів, позначаючи
структурну семантику тексту, наприклад заголовки, абзаци, списки,
посилання, цитати та інші елементи. Елементи HTML окреслені тегами,
написаними з використанням кутових дужок. Теги на кшталт <img /> чи
<input /> безпосередньо виводять вміст на сторінку. Інші теги, такі як <p>,
оточують текст і надають інформацію про нього, а також можуть включати
інші теги як піделементи. Браузери не показують теги HTML, але
використовують їх для інтерпретації вмісту сторінки.
HTML є фундаментальною мовою для розробки веб-сторінок і
використовується спільно з CSS (Cascading Style Sheets) та JavaScript для
створення інтерактивних та стильових веб-сторінок.
HTML також має багато інших можливостей та функцій, які
допомагають створювати різноманітний та багатофункціональний вміст для
веб-сторінок:
1. HTML може використовувати теги <iframe> для вставки вмісту з інших
веб-сторінок в поточну сторінку.
2. HTML5 ввів теги <audio> та <video>, які дозволяють вбудовувати аудіо
та відео безпосередньо на сторінку без використання плагінів.
3. HTML5 також підтримує можливість визначення місцеперебування
користувача за допомогою API для геолокації.
4. HTML5 включає елемент <canvas>, який дозволяє створювати графіку
та візуальні ефекти за допомогою JavaScript.
5. HTML підтримує векторну графіку за допомогою SVG, що дозволяє
створювати масштабовані та високоякісні зображення.
40
6. HTML може використовувати веб-шрифти, щоб забезпечити більшу
кількість шрифтів для веб-сторінок, які можна використовувати для
стилізації тексту.
7. мета-теги в HTML використовуються для визначення метаданих
сторінки, таких як заголовок, опис та ключові слова для оптимізації
пошукової оптимізації (SEO).
8. HTML дозволяє вставляти JavaScript-код та інші скрипти для створення
інтерактивності на веб-сторінках.
9. з використанням CSS або JavaScript можна створювати анімаційні
ефекти на сторінках.
10.HTML підтримує використання різних мов та інтернаціоналізацію для
створення мультилінгвальних сторінок.
HTML постійно розвивається, і нові версії мови вводять нові
можливості та функції для полегшення розробки веб-сторінок [18].
Принципи завантаження контенту за допомогою chunk. У контексті
передачі даних через мережу термін "chunk" (чанк) вказує на невеликий
фрагмент даних, який був розділений великим обсягом даних для передачі
мережею. Чанки використовуються для розділення великих файлів або
потокового відео- та аудіоконтенту на менші порції, які можна передавати
мережею по одному чи декілька наразі.
Зазвичай кожен чанк супроводжується інформацією про його розмір,
щоб отримувач міг коректно зібрати та відновити оригінальний обсяг даних.
Такий підхід є особливо корисним у випадках, коли важко чи неефективно
передавати великий файл цілком, і коли необхідно забезпечити потокову
передачу даних без зайвих затримок на завершення завантаження всього
файлу.
Використання чанків часто спостерігається при використанні
протоколу HTTP і передачі даних через Інтернет. Наприклад, при
використанні HTTP/1.1 можливо включити заголовок "Transfer-Encoding:
chunked" в HTTP-відповідь для вказання на використання передачі чанками.
41
Кожен чанк починається з інформації про його розмір, а після нього йде сам
фрагмент даних. Після передачі всіх чанків додається пустий чанк, що
позначає кінець передачi [19].
Основні принципи цього методу включають дані, які потрібно
передати, розбиваються на невеликі частини, які можуть бути передані
окремо. У HTTP-запиті або відповіді додається заголовок "Transfer-Encoding:
chunked", що вказує на використання передачі чанками. Кожен чанк
передається окремо, і після кожного чанку відправляється розмір наступного
чанку у вигляді шістнадцяткового числа (у форматі "розмір\r\n", де "\r\n" - це
символи нового рядка). Перед завершенням передачі додається пустий чанк з
розміром 0, який позначає закінчення передачі. Цей метод передачі особливо
корисний для стрімінгового відтворення медіа-контенту, такого як відео або
аудіо, де дані можуть бути відправлені до браузера або іншого клієнта по мірі
їх надходження, а не чекаючи завершення завантаження всього файла.
Використання такої передачі дозволяє ефективно передавати великі файли
без необхідності чекати завершення передачі перед початком обробки даних
на стороні клієнта [20].
Недоліки такого методу для великих файлів ефективна, але для інших
вона може призвести до більшого накладу на мережевий трафік через
додаткові HTTP-заголовки та символи нового рядка, які супроводжують
кожен чанк.
Загальною перевагою є зменшення затримок та забезпечення кращої
користувацької взаємодії при передачі великих файлів або стрімінговому
відтворенні контенту на веб-сторінках.
2.2 Вибір технологій
Основна причина вибору хмарних технологій полягає в їх потужності
та масштабованості.
42
Масштабованість (англ. scalability) - це властивість системи або
програми, яка визначає її здатність ефективно збільшувати ресурси і
продуктивність, щоб відповісти на зростаюче навантаження або обсяг даних
без значного зниження продуктивності або відмов. У вузькому сенсі,
масштабованість означає можливість збільшення потужності
обчислювальних, мережевих, зберігальних або інших ресурсів системи без
значних перерв у роботі або змін в її архітектурі. Масштабованість є
важливою для багатьох систем, особливо для веб-сервісів, додатків, хмарних
обчислень та інфраструктур, оскільки вона дозволяє пристосовувати систему
до змінних умов і забезпечувати високу доступність та продуктивність.
Хмарні платформи, такі як Amazon Web Services (AWS), Google Cloud
Platform (GCP) та Microsoft Azure, надають широкий спектр інструментів і
ресурсів для оптимізації рендерингу сторінок. Вони дозволяють легко
масштабувати обчислювальні потужності відповідно до потреб проекту.
Amazon Web Services (AWS) - це найбільший у світі провайдер
хмарних обчислень і надає широкий спектр хмарних послуг, включаючи
обчислювальні ресурси, зберігання даних, бази даних, інструменти для
розробки програмного забезпечення, аналітику, машинне навчання та багато
інших послуг. AWS є підрозділом компанії Amazon.com і був запущений у
2006 році. AWS є популярним вибором для підприємств та розробників
завдяки своїй гнучкості, масштабованості та надійності. Користувачі можуть
використовувати AWS для розгортання та керування веб-серверами,
розвитку програм, аналізу даних, машинного навчання, а також для багатьох
інших завдань у сфері обчислювальних послуг.
Google Cloud Platform (GCP) - це хмарна платформа та набір хмарних
обчислювальних, зберігання даних, машинного навчання та інших послуг, які
надається компанією Google. GCP дозволяє користувачам розгортати,
керувати і масштабувати свої додатки та сервіси в хмарному середовищі, яке
надійно, швидко та масштабовано. GCP використовується як розробниками
та стартапами, так і великими корпораціями для розгортання та управління
43
додатками, зберіганням та аналізом даних, машинним навчанням і багатьма
іншими завданнями в хмарному середовищі. Ключовою перевагою GCP є
його ефективність, масштабованість та доступність різних інструментів і
сервісів для вирішення різних завдань.
Microsoft Azure, також відомий просто як Azure, це хмарна платформа
та набір хмарних обчислювальних, зберігання даних, розробницьких
інструментів, та інших послуг, розроблений компанією Microsoft. Azure
надає користувачам і організаціям можливість розгортати, керувати та
масштабувати свої додатки та послуги в хмарному середовищі. Microsoft
Azure використовується розробниками, підприємствами та організаціями для
розгортання, керування і масштабування інфраструктури, додатків та послуг
в хмарному середовищі. Він є конкурентом для інших хмарних платформ,
таких як Amazon Web Services (AWS) і Google Cloud Platform (GCP), і надає
різноманітні інструменти і ресурси для вирішення різних бізнес-завдань.
Використання Content Delivery Network (CDN) може бути важливим
аспектом оптимізації. В цьому контексті CDN може використовуватися для
поліпшення швидкості завантаження веб-сторінок і зменшення навантаження
на веб-сервери.
Content Delivery Network (CDN) - це мережа серверів, розташованих у
різних географічних областях, яка призначена для швидкої та ефективної
доставки веб-контенту користувачам. Основна ідея полягає в тому, щоб
надавати користувачам можливість отримувати сторінки вебсайту,
зображення, відео та інший контент з сервера, який знаходиться фізично
ближче до них. Це допомагає зменшити час завантаження сторінок та
поліпшити загальний користувацький досвід. CDN також допомагає
зменшити навантаження на основний веб-сервер, захищає від атак та сприяє
стабільності та доступності вебсайту в умовах високого трафіку. Вона є
важливим інструментом для оптимізації роботи вебсайтів та покращення їх
продуктивності.
44
Нижче наведено кілька способів, якими CDN може бути використаний
в рамках дипломної роботи:
1. Зменшення часу завантаження сторінок. Під час роботи з CDN,
контент вашого вебсайту (зображення, статичні файли, стилі CSS, JavaScript
тощо) розподіляється на сервери CDN, розташовані у різних географічних
областях. Це дозволяє клієнтам отримувати цей контент від найближчого
сервера CDN, що значно зменшує час завантаження сторінок та поліпшує
загальний користувацький досвід;
2. Зменшення навантаження на веб-сервер. CDN відсилає запити на
свої сервери для отримання статичного контенту, таким чином, відсилаючи
менше запитів до вашого основного веб-сервера. Це допомагає зменшити
навантаження на веб-сервер та поліпшує його продуктивність;
3. Масштабування вебсайту. Завдяки CDN, ви можете легко
масштабувати ваш вебсайт для обслуговування великої кількості
користувачів без великих інвестицій у додаткові сервери. CDN забезпечує
стабільну роботу вебсайту навіть під час великих навантажень;
4. Захист від DDoS атак і спаму. Багато CDN також надають захист від
DDoS-атак та фільтрацію спаму, що покращує безпеку вашого вебсайту;
5. Аналіз продуктивності. Деякі CDN надають інструменти для
моніторингу та аналізу продуктивності вебсайту, включаючи швидкість
завантаження сторінок та використання ресурсів. Це може бути корисним
для оцінки результатів оптимізації рендерингу сторінок.
Amazon S3 (Simple Storage Service) - це служба зберігання об'єктів в
хмарному середовищі, яка надає можливість зберігання і керування великими
обсягами даних в Інтернеті. Amazon S3 є однією з ключових послуг в
хмарному публічному хмарному середовищі Amazon Web Services (AWS)
[21].
Основні риси Amazon S3 включають в себе:
1. Безпека даних. Amazon S3 забезпечує рівень безпеки для зберігання
даних, включаючи шифрування даних в спокої та під час передачі, контроль
45
доступу на рівні об'єктів, автентифікацію та ідентифікацію користувачів.
2. Масштабованість. S3 дає можливість масштабувати зберігання від
одного об'єкта до петабайтів даних. Ви можете додавати та вилучати об'єкти
без перерви в роботі.
3. Доступність і надійність. Amazon S3 гарантує високий рівень
доступності, і ваші дані дублюються в різних центрах даних для
забезпечення надійності.
4. Простий доступ до даних. Ви можете легко отримувати доступ до
своїх даних через API Amazon S3 або веб-інтерфейс.
5. Версіонування і журналювання. S3 підтримує версіонування
об'єктів, що дозволяє вам відстежувати та відновлювати попередні версії
даних. Також доступні можливості журналювання подій для ваших
збережених даних.
6. Інтеграція з іншими послугами AWS. Amazon S3 може бути легко
інтегрована з іншими службами AWS, такими як Amazon CloudFront для
розподілення контенту, Amazon Lambda для автоматизації обробки даних і
багато інших.
7. Amazon S3 широко використовується для зберігання даних, а також
для різних веб-проектів, резервного копіювання, аналізу даних, стрімінгу
мультимедіа і багатьох інших застосувань. Вона дозволяє користувачам
зручно та надійно зберігати та керувати своїми даними в хмарному
середовищі.
Використання Amazon S3 разом з Content Delivery Network (CDN),
таким як Amazon CloudFront, дозволяє покращити розподіл та швидкість
доставки контенту користувачам у всьому світі.
Статичний контент вашого вебсайту, такий як HTML файли,
зображення, CSS файли, JavaScript та інші статичні файли, можна зберігати в
бакетах Amazon S3. S3 надає надійне та безпечне зберігання об'єктів.
Також є можливість налаштувати Amazon S3 бакет для використання з
Amazon CloudFront як дистрибуцію CDN. Це означає, що контент буде
46
розподілено на сервери CloudFront, розташовані в різних географічних
областях.
Після налаштування CloudFront є можливість використовувати URL-
адреси, згенеровані CDN, для доступу до контенту. Це дозволяє
користувачам отримувати контент із найближчого до них сервера CDN, що
покращує швидкість завантаження.
Загалом, використання Amazon S3 і CDN спільно допомагає покращити
швидкість, доступність, надійність та масштабованість рендерингу сторінки
вебсайту, що робить цей підхід обґрунтованим та ефективним для
поліпшення користувацького досвіду.
Вибір мови програмування перед початком розробки проекту теж має
велике значення і може значно вплинути на успіх та продуктивність проекту.
Різні мови програмування мають свої сильні та слабкі сторони, і деякі з них
можуть бути більш відповіднм для конкретних функціональних потреб
вашого проекту. Наприклад, якщо ви розробляєте високопродуктивний
серверний додаток, то мови, такі як C++ або Go, можуть бути більш
відповідними.
Вибір мови програмування може вплинути на доступність багатьох
корисних бібліотек і інструментів. Деякі мови мають розвинену екосистему,
що полегшує розробку та підтримку проекту.
Якщо вже є обрана команда розробників, то важливо враховувати їхні
навички та досвід у виборі мови програмування. Розробники, які вже
володіють певною мовою, можуть бути більш продуктивними і швидко
розробляти проекти.
При виборі мови програмування важливо враховувати можливість
масштабування та розширювання проекту. Деякі мови можуть бути більш
гнучкими та підходити для розробки великих і складних систем.
При виборі мови програмування для розробки клієнтського додатку
проекту важливо враховувати кілька ключових факторів, таких як цілі
проекту, вимоги до швидкодії, зручність для розробників та підтримка
47
інструментів і бібліотек. Розглянемо мови програмування, які часто
використовуються при розробці клієнтських додатків:
JavaScript є основною мовою програмування для фронтенд розробки
вебсайтів і веб-додатків. Він має велику екосистему бібліотек і фреймворків,
таких як React, Angular і Vue.js, які спрощують розробку і полегшують
створення інтерактивних і динамічних інтерфейсів.
TypeScript є суперсетом JavaScript і надає статичну типізацію, що
полегшує виявлення помилок на ранніх етапах розробки. Він стає все більш
популярним для великих та складних проектів, оскільки допомагає зберігати
код більш структурованим і простіше підтримувати.
HTML і CSS є основними мовами для структури і стилізації веб-
сторінок. Вони завжди використовуються разом з JavaScript для створення
повноцінних веб-інтерфейсів.
HTML, CSS і JavaScript є стандартами веб-розробки, що підтримуються
всіма сучасними браузерами. Вибір цих мов гарантує сумісність і доступність
вашого додатку для широкого кола користувачів без необхідності
встановлення додаткових плагінів чи інших технологій.
HTML, CSS і JavaScript дотримуються веб-стандартів, що дозволяє
створювати додатки, які коректно відображаються на різних пристроях і
браузерах. Ви можете бути впевнені, що ваш додаток буде працювати
спільно з іншими веб-ресурсами та сервісами.
Для HTML, CSS і JavaScript існує безліч інструментів, фреймворків і
бібліотек, які полегшують розробку. Наприклад, для роботи з інтерфейсом
користувача використовують фреймворки, такі як React, Angular, або Vue.js,
а для стилізації - бібліотеки, як Bootstrap або Materialize.
React (старі назви: React.js, ReactJS) — відкрита JavaScript бібліотека
для створення інтерфейсів користувача, яка покликана вирішувати проблеми
часткового оновлення вмісту вебсторінки, з якими стикаються в розробці
односторінкових застосунків. Розробляється Meta (раніше Facebook) і
спільнотою індивідуальних розробників.
48
React дозволяє розробникам створювати великі вебзастосунки, які
використовують дані, котрі змінюються з часом, без перезавантаження
сторінки. Його мета полягає в тому, щоб бути швидким, простим,
масштабованим. React обробляє тільки користувацький інтерфейс у
застосунках. Це відповідає видові у шаблоні модель-вид-контролер (MVC), і
може бути використане у поєднанні з іншими JavaScript бібліотеками або в
великих фреймворках MVC, таких як AngularJS. Він також може бути
використаний з React на основі надбудов, щоб піклуватися про частини без
користувацького інтерфейсу побудови вебзастосунків. Як бібліотеку
інтерфейсу користувача React найчастіше використовують разом з іншими
бібліотеками, такими як Redux.
Виходячи з вищеперерахованого для реалізації поставлених цілей
можна використати мови програмування HTML, CSS та JS. Для спрощення
розробки на мові програмування JS можна обрати бібліотеку React. Для
збільшення швидкодії роботи клієнтського додатка можна обрати мережу
CDN та технологію AWS S3.
2.3 Висновки до розділу 2
У другому розділі було розглянуто основні аспекти веб-розробки та
оптимізації. Було визначено, що таке хостинг та як відбувається
завантаження контенту через HTTP, HTTPS та UDP. Для розробки веб-
додатка обрані мови програмування HTML, CSS і JS, а також використано
бібліотеку React на основі JS. Для підвищення швидкодії клієнтського
додатка використано мережу CDN та технологію AWS S3. Ці технічні вибори
створюють основу для подальшої оптимізації та розвитку системи.
49
РОЗДІЛ 3 ОПТИМІЗАЦІЯ МЕТОДІВ РОБОТИ РЕНДЕРИНГУWEB-
СТОРІНКИ ЗА ДОПОМОГОЮ ХМАРНИХ ТЕХНОЛОГІЙ
3.1 Структура системи для впровадження оптимізаційних
методів рендерингу WEB-сторінки
Розробка програмної системи є важливим завданням даної
кваліфікаційної роботи. Метою розробки такої системи є впровадження
оптимізаційних методів рендерингу WEB-сторінки для покращення
продуктивності швидкості відображення у різних видах застосунків.
Програмне забезпечення (ПЗ), також відоме як програми або софт, є
сукупністю інструкцій, програмних кодів, даних та алгоритмів, які керують
роботою комп'ютера та дозволяють йому виконувати різноманітні завдання.
ПЗ є ключовою складовою сучасної інформаційної технології та
використовується в різних галузях, включаючи комп'ютерну науку, бізнес,
науку, освіту, розваги та інші.
Браузерне клієнтське програмне забезпечення (client software) - це
програми або додатки, які веб-браузером користувача і використовуються
для взаємодії з WEB-сайтами та WEB-додатками через Інтернет. Це може
включати в себе веб-сторінки, які використовують JavaScript, HTML, CSS та
інші веб-технології для надання користувачам різноманітних функцій та
послуг.
Завантаження контенту в браузерному програмному забезпеченні може
виникати через різні проблеми або різноманітні фактори. Розглянемо деякі з
найбільш поширених проблем, з якими може зіткнутися WEB-майстер при
розробці подібних додатків.
Помітна затримка завантаження сторінки. В добу швидкого
Інтернету і високопродуктивних комп'ютерів, користувачі мають високі
очікування щодо швидкості та надійності вебсайтів. Помітні затримки
50
руйнують користувацький досвід та можуть призвести до негативного
враження від сайту.
Також, користувачі мають тенденцію залишати вебсайти, які
завантажуються повільно. Це може призвести до втрати аудиторії та
погіршення конверсії для власників сайту.
Повільні сайти можуть отримувати меншу позицію у результатах
пошукових систем, оскільки Google та інші пошукові системи враховують
швидкість завантаження як один із факторів рейтингу. Це може вплинути на
видимість сайту в пошукових результатах і його відвідуваність.
Помітна затримка може ускладнити взаємодію користувача з
вебсайтом. Наприклад, якщо кнопки і елементи керування не реагують
негайно, це може призвести до помилок або невідповідних відгуків від
користувача.
У підсумку, помітна затримка завантаження сторінки є серйозною
проблемою, яка може вплинути на користувацький досвід, відвідуваність
сайту і репутацію бренду чи організації. Швидкість завантаження сторінок
важлива як для користувачів, так і для власників вебсайтів, і вона завжди
варто оптимізовувати для досягнення найкращих результатів.
Помітне збільшення навантаження на ресурси компʼютера при
відвідуванні WEB-сайту. Велика кількість важких ресурсів на WEB-сайті
(наприклад, великі зображення, відео, складні скрипти) може спричинити
повільну роботу комп'ютера. Це може призвести до затримок при
завантаженні сторінок, мерехкотіння екрана та зависання програм.
Велике навантаження вебсайту може споживати велику кількість
системних ресурсів, таких як центральний процесор (CPU), оперативна
пам'ять (RAM) та графічний адаптер. Це може призвести до зниження
продуктивності комп'ютера та зменшення доступної потужності для інших
програм.
Велике навантаження може спричинити збільшення обсягу трафіку,
який використовується для завантаження сторінок. Це може вплинути на
51
вартість Інтернету (якщо є обмеження на обсяг трафіку), а також може
затримувати завантаження сторінок на повільних з'єднаннях.
Велике навантаження вебсайту може бути особливо проблематичним
на мобільних пристроях, оскільки вони мають обмежені ресурси та
швидкість з'єднання. Сайти, які надто важкі для завантаження на мобільних
пристроях, можуть відлякувати користувачів і погіршити їхній досвід.
Повільні вебсайти можуть погіршити показники SEO (пошукової
оптимізації), оскільки швидкість завантаження є одним із факторів рейтингу
в пошукових системах. Це може призвести до меншої видимості сайту в
пошукових результатах.
Усі ці аспекти підкреслюють важливість оптимізації вебсайту для
швидкого завантаження та ефективного використання ресурсів комп'ютера
користувача. Більшість веб-розробників і власників сайтів стараються
забезпечити максимально швидке та ефективне взаємодію користувачів зі
своїми веб-ресурсами, щоб забезпечити позитивний досвід та покращити
репутацію свого сайту.
Для того, щоб мати можливість розробити нові алгоритми оптимізації
рендерингу сторінки, було розроблено тестову систему для менеджменту
студентів на факультеті. Розроблена система складається тільки з клієнтської
частини та не потребує наявність серверної частини.
Клієнтське програмне забезпечення та серверне програмне
забезпечення (серверне ПЗ) виконують різні завдання та функції в
обчислювальних системах, і вони мають важливі відмінності.
Клієнтське ПЗ встановлюється та працює на комп'ютерах, смартфонах,
планшетах та інших пристроях користувачів. Воно призначене для надання
функціональності та інтерфейсу для користувачів, дозволяючи їм
взаємодіяти з додатками та службами. Дане програмне забезпечення
встановлюється та працює на локальних пристроях користувачів.
Користувачі мають доступ та контроль над цим програмним забезпеченням.
52
Також дане ПЗ має обмежені обчислювальні ресурси, зазвичай обмежені
потужністю пристрою, на якому його встановлено.
Серверне ПЗ встановлюється та працює на серверах або в центральних
обчислювальних системах. Воно призначене для забезпечення послуг та
ресурсів для клієнтського ПЗ, обробки запитів, зберігання даних, керування
мережею тощо.
Це лише деякі з відмінностей між клієнтським та серверним
програмним забезпеченням. Кожен тип програмного забезпечення виконує
свої унікальні функції та грає важливу роль в архітектурі комп'ютерних
систем та мереж.
Для виконання цілей даної роботи немає потреби в розробці будь-якого
серверного додатка, тому було обрано розробка системи з використанням
тільки клієнтського ПЗ.
Для збереження користувацьких даних було обрано вбудовано в
браузер базу даних IndexedDB.
IndexedDB (Indexed Database) - це вбудована база даних браузера, яка
дозволяє веб-розробникам зберігати структуровані дані в локальному
сховищі, яке може бути легко доступним та опрацьованим на стороні клієнта.
IndexedDB - це частина веб-технологій, які призначені для забезпечення
браузерам можливості працювати з великими обсягами даних без постійного
звернення до сервера.
Основні характеристики та поняття, пов'язані з IndexedDB.
Об'єктні сховища (Object Stores). В IndexedDB дані зберігаються у
вигляді об'єктів, і ці об'єкти розміщуються в об'єктних сховищах. Об'єктні
сховища дозволяють розміщувати дані з різною структурою та індексам.
Транзакції. Робота з базою даних у IndexedDB відбувається в межах
транзакцій. Транзакції забезпечують консистентність та ізоляцію даних під
час їх зчитування та запису.
53
Асинхронність. Операції з базою даних у IndexedDB зазвичай
виконуються асинхронно, щоб не блокувати виконання інших скриптів на
сторінці.
Індекси. Для полегшення пошуку та фільтрації даних можна
створювати індекси, які забезпечують ефективний доступ до даних за
певними полями.
Підтримка багатьох типів даних. IndexedDB підтримує зберігання
різних типів даних, включаючи тексти, числа, об'єкти та бінарні дані.
IndexedDB стала важливою частиною WEB-розробки, оскільки
дозволяє веб-додаткам працювати офлайн, зберігати дані на клієнтському
боці, а також поліпшує продуктивність та відзначається гнучкістю в роботі з
даними. Додатковою перевагою IndexedDB є підтримка багатьох сучасних
веб-браузерів, що робить її доступною для великої кількості веб-розробників.
Розроблене програмне забезпечення надасть можливість користувачам
системи робити дамп (Dump) бази даних для можливості імпорту цих даних
на інших системах.
Дамп бази даних (Database Dump) - це процес або результат процесу
створення резервної копії (знімка) структури та даних, які зберігаються в базі
даних. Дамп бази даних може бути використаний для збереження інформації
та відновлення бази даних в майбутньому у випадку втрати даних, помилок
або для копіювання бази даних на інший сервер.
Розроблене програмне забезпечення побудоване на базі фреймворку
React та дає можливість просто доповнювати його з використанням
загальновідомих підходів в розробці на даному типу фреймворку.
React - це бібліотека для розробки інтерфейсу користувача (UI), яка
використовується для створення веб-додатків зі зручним та ефективним
відображенням та взаємодією користувача. React був розроблений компанією
Facebook і випущений як відкрите програмне забезпечення. Однією з
ключових особливостей React є віртуальний DOM (Document Object Model),
54
що дозволяє швидко і ефективно оновлювати вебсторінка без необхідності
повного перезавантаження сторінки. Основні риси та особливості React:
- Компонентний підхід. React сприяє розробці додатків у вигляді
компонентів. Кожен компонент може бути незалежним модулем, який
відповідає за власну логіку та відображення. Це спрощує структуру
додатка та полегшує його розуміння та підтримку;
- Віртуальний DOM. React використовує віртуальний DOM для
оптимізації взаємодії з DOM реальної сторінки. Віртуальний DOM є
абстракцією реального DOM і дозволяє React розраховувати зміни, які
потрібно внести до сторінки, і оновлювати її ефективно, зменшуючи
навантаження на браузер;
- Односторінковий додаток (SPA). React дозволяє легко створювати SPA,
в яких зміст сторінки оновлюється без перезавантаження. Це поліпшує
швидкодію та відзначається більш приємним користувацьким
досвідом.
- Управління станом. React допомагає керувати станом додатка, що
дозволяє розробникам легко визначати та відслідковувати зміни в стані
компонентів та додатків;
- Розширюваність. Можливість використовувати різноманітні бібліотеки
та модулі для розширення функціональності React, такі як React Router
для навігації, Redux для управління станом тощо;
React є однією з популярних технологій у веб-розробці та дозволяє
швидко створювати сучасні та інтерактивні веб-додатки.
React є один з фреймворків, які слідують концепції WEB Components та
дає можливість розбивати клієнтський інтерфейс на частини, кожна з яких
буде управлятися різним кодом програми.
Web Components - це технологія веб-розробки, яка дозволяє
створювати власні повторно використовувані HTML-компоненти та елементи
із закріпленим в них виглядом і поведінкою. Вони є нативною частиною веб-
платформи і можуть бути використані в будь-якому сучасному браузері без
55
потреби в додаткових бібліотеках або фреймворках. Серед переваг цих
компонентів наступне:
- Можливість повторного використання;
- Ізоляція коду;
- Розділення обов'язків.
Хоча WEB-компоненти є потужним інструментом для створення веб-
додатків, їх використання також вимагає певного рівня знань і розуміння веб-
технологій.
Для того, щоб оптимізувати швидкодію рендерингу розробленої
сторінки, спочатку потрібно розглянути структуру системи та визначити, на
які логічні частини можна розбити розроблене програмне забезпечення, яка
зображена на рисунку 3.1.
Рисунок 3.1 - Опис структури системи
Модуль "Менеджер стану" - це ключовий компонент програмної
системи, який відповідає за керування та збереження стану програмного
забезпечення. Він є надзвичайно важливим для забезпечення стабільної та
56
ефективної роботи додатка або системи. Основною метою цього модулю є
забезпечення консистентності даних та взаємодії між різними компонентами
та модулями програмного забезпечення. Даний модуль може слідкувати за
подіями та діями в системі, які можуть впливати на стан програми, і вчасно
реагувати на ці події. Модуль гарантує, що стан додатка завжди перебуває в
коректному та консистентному стані, запобігаючи суперечностям та
помилкам.
Модуль "Менеджер стану" є важливим елементом архітектури
програми, який допомагає створити добре організовану та легко управляєму
систему. Він дозволяє розробникам ефективно працювати зі станом програми
та реагувати на зміни у внутрішньому стані, що робить його незамінним для
розробки складних та високопродуктивних програмних продуктів.
Усі інші модулі системи є сторінками користувацького додатка та
побудовані на базі компонентів, які відкриваються по вказаному роутингу.
Роутинг (Routing) - це процес визначення та керування шляхами (URL)
у веб-додатках. Це важливий аспект розробки веб-додатків, який дозволяє
користувачам переходити між різними сторінками чи відображати різний
вміст на одній та самій сторінці в залежності від поточного URL.
У веб-розробці роутинг може бути реалізований за допомогою різних
бібліотек та фреймворків, таких як React Router для React-додатків, Vue
Router для Vue.js-додатків, Express.js для серверної розробки на Node.js та
інших. Роутинг робить веб-додатки більш навігаційно зручними та допомагає
організовувати структуру вебсайту або додатка для зручності користувачів.
Комунікація WEB додатку з базою даних відбувається за допомогою
браузероного WEB API.
API (Application Programming Interface) - це набір правил, протоколів та
інструментів, які дозволяють одному програмному засобу (часто веб-серверу
або сервісу) взаємодіяти з іншим програмним засобом (наприклад, з
додатком чи іншим веб-сервісом). API визначає, які запити та операції
57
можуть бути виконані, а також які дані можуть бути передані між
програмами.
API використовується в багатьох сферах, включаючи веб-розробку,
мобільний розробку, розробку ігор, інтернет вещей (IoT), робототехніку та
інші області. Вони дозволяють різним програмам та системам спілкуватися,
обмінюватися даними та функціональністю, що робить їх важливими для
розробки різноманітних програмних продуктів.
Системи, розроблені за допомогою сучасних фреймворків, зазвичай
мають великий розмір, що значно збільшує час завантаження сторінку та
рендеренгу. Розроблена система має багатомодульну структуру яка дає
можливість WEB майстру мати можливість оптимізувати завантаження
сторінки й рендеренгу.
3.2 Опис функцій системи
Завантаження браузерного веб-додатку - це складний процес, який
передбачає послідовні дії для відображення клієнтського додатку в браузері
користувача. Процес розпочинається, коли користувач вводить URL-адресу в
адресному рядку браузера та натискає "Enter".
Початок цього процесу починається з введення URL (Uniform Resource
Locator) в адресному рядку браузера. URL вказує на місцезнаходження веб-
сторінки або ресурсу в Інтернеті.
Після передачі даних про домен, браузер перетворює доменну частину
URL на IP-адресу за допомогою служби DNS (Domain Name System). Це
дозволяє знайти потрібний веб-сервер.
Після отримання IP-адреси браузер відправляє HTTP-запит до веб-
сервера, де зберігається вміст сторінки. Запит містить інформацію про те,
який ресурс необхідно завантажити базуючись на запиті клієнту.
Далі, браузер отримує відповідь від сервера і розпочинає обробку та
відображення сторінки. Цей процес включає в себе рендеринг HTML-
58
структури, застосування CSS-стилів та виконання JavaScript-коду для
інтерактивності.
Зазвичай на даному етапі адміністратор ресурсу й стикається з
проблемою довгого завантаження та рендерингу сторінки.
Для того, щоб збільшити швидкість завантаження сторінки, розроблена
система використовує потужність хмарних технологій AWS для
завантаження ресурсів з хмарного сховища. Під хмарним сховищем мається
на увазі сервіс AWS S3, який дозволяє завантажувати та зберігати контент
сторінки.
Amazon S3 (Simple Storage Service) - це публічний хмарний сервіс для
зберігання та управління об'єктами даних в масштабованих і розподілених
зберігальних сховищах. Amazon S3 є однією з ключових послуг в рамках
Amazon Web Services (AWS) і надає надійний та доступний спосіб зберігання
та резервного копіювання даних в хмарному середовищі.
Amazon S3 надає простий API для завантаження та зберігання об'єктів
даних, що робить його легким для використання навіть для початківців.
Сервіс може масштабуватися від невеликих обсягів даних до великих
петабайтових сховищ. Також він забезпечує високу доступність та надійність
даних завдяки розподіленим серверам та механізмам резервного копіювання.
Amazon S3 використовується для зберігання вебсайтів, резервного
копіювання даних, роботи з мультимедійним вмістом, обробки аналітичних
даних та багатьох інших завдань.
Для того, щоб користувач мав можливість отримати дані швидше, було
використано також ще один сервіс системи AWS, який дає можливість
отримувати контент WEB сайту з різних куточків світу, при тому сервер буде
обрано в залежності від місцеперебування користувача.
Amazon CloudFront - це хмарна служба від Amazon Web Services
(AWS), яка надає CDN (Content Delivery Network) для прискорення доставки
веб-вмісту до користувачів по всьому світу. Основна мета Amazon CloudFront
полягає в підвищенні швидкості та надійності доставки статичних та
59
динамічних веб-ресурсів, таких як HTML-сторінки, CSS-стилі, JavaScript-
файли, зображення, аудіо, відео та інші об'єкти, які розміщені на різних
серверах. Завдяки Amazon CloudFront компанії можуть покращити швидкість
завантаження свого веб-вмісту, підвищити доступність та надійність, а також
скоротити навантаження на сервери.
Через те, що розроблена система поділена на логічні модулі, було
прийнято рішення розбити систему на частини відповідно до модулів. Тобто
кожний модуль може бути завантажено окремо. Фреймворк React навіть
можливість динамічно завантажувати частини програми в залежності від
того, коли вони потрібні користувачеві.
Lazy loading (лінива завантаження) - це техніка оптимізації
завантаження вмісту на веб-сторінках з метою покращення швидкості
завантаження та ефективності роботи веб-додатків. Головна ідея лінивого
завантаження полягає в тому, щоб завантажувати або відображати лише той
вміст, який дійсно потрібен користувачеві в цей момент, а не весь вміст
сторінки разом із її першим завантаженням.
Основні особливості лінивого завантажування включає:
- Зображення і відео. Зображення та відео можуть бути завантажені
лише тоді, коли вони стають видимими на екрані користувача під час
прокручування сторінки. Це дозволяє зекономити пропускну здатність
мережі та покращити швидкість завантаження сторінки;
- Завантаження скриптів та стилів. JavaScript-файли та CSS-стилі можуть
бути завантажені асинхронно, щоб не блокувати рендеринг сторінки.
Це допомагає сторінці відобразитися швидше;
- Вміст на запит. Інші ресурси, такі як додаткові сторінки, дані або
компоненти, можуть завантажуватися тільки відповідно до дій
користувача або за запитом, а не заздалегідь;
- Кешування. Завантажений контент може бути кешований, щоб
уникнути повторного завантаження вмісту, який користувач уже
переглянув.
60
При вході в систему користувачу завантажується базовий каркас
програми, який називається App Shell. App Shell (або App Shell Architecture) -
це архітектурний підхід в розробці веб-додатків, який спрямований на
покращення швидкодії та продуктивності веб-додатків, особливо на
мобільних пристроях. Основна ідея App Shell - це розділення веб-додатка на
дві основні частини: оболонку (shell) і вміст (content).
Оболонка - це мінімальна частина веб-додатка, яка завантажується при
першому запуску та забезпечує загальну структуру та основний інтерфейс
додатка. Вона включає в себе статичні елементи і ресурси, такі як заголовок,
меню, панель навігації, CSS-стилі, JavaScript-скрипти та інші компоненти, які
не змінюються при переході між сторінками.
Вміст - це динамічна частина додатка, яка завантажується після
оболонки та містить специфічний вміст для кожної сторінки чи дії
користувача. Вміст може бути завантажений асинхронно за допомогою
AJAX-запитів чи інших методів, і включає в себе дані, які можуть
змінюватися в залежності від контексту.
Основна перевага App Shell полягає в тому, що оболонка
завантажується один раз і кешується на стороні клієнта, що дозволяє швидше
відображати вміст та покращити користувацький досвід. Коли користувач
переходить між різними сторінками або діями в додатку, вміст
завантажується динамічно, що допомагає зменшити час завантаження та
зекономити пропускну здатність мережі.
App Shell особливо корисна для прогресивних веб-додатків (Progressive
Web Apps - PWA), які спрямовані на створення веб-додатків з аналогічними
функціями та швидкістю роботи, що наближені до нативних додатків для
мобільних пристроїв.
У розробленому програмному додатку App Shell було використано для
відображення елементів меню та навігації, які не будуть змінюватися під час
роботи з додатком. Тому немає сенсу кожен раз браузеру завантажувати та
рендерити цей інтерфейс. Дані елементи будуть завантажені через AWS S3 та
61
CloudFront та будуть кешовані браузером один раз при першому вході в
додаток.
Кешування (англ. caching) - це техніка зберігання копії даних або
ресурсів (наприклад, веб-сторінок, зображень, даних з бази даних) на
локальному пристрої чи на проміжному сервері, з метою прискорення
доступу до цих даних і зниження навантаження на джерело, з якого ці дані
беруться.
Приклад завантаження App Shell для розробленої системи зображений
на рисунку 3.2.
Рисунок 3.2 - Приклад завантаження App Shell для розробленої системи
Як видно з рисунку 3.2 система завантажує тільки основний контент
створеного додатка. Основний контент залежить від відкритої сторінки та
буде завантажено окремо. При переході між сторінками додаток кешує
62
завантажений результат в памʼять браузер та не буде повторно намагатися
отримати ці дані з AWS S3.
При оновлені контенту в хмарному сховищі, сервер буде отримувати
інформацію через headers запиту, який буде відправлено асинхронно. Даний
запит не буде впливати на завантаження сторінки та дасть інформацію
браузера про те, що в наступний раз при завантаженні контенту потрібно
завантажити вже оновлений контент.
Заголовки запиту (request headers) - це частина HTTP-запиту, яка
містить метадані або додаткову інформацію про запит, яку браузер або клієнт
передає на веб-сервер при взаємодії з ним. Заголовки запиту допомагають
серверу розуміти та обробляти запит і можуть містити інформацію про тип
запиту, кешування, типи даних, які користувач бажає отримати, та багато
іншого.
Для налаштування кешування на веб-сервері та вказання клієнтам, які
ресурси можуть бути закешовані, використовуються різні заголовки запиту
та відповіді. Заголовки запиту для кешування допомагають клієнтам і
серверам визначати, які ресурси можна кешувати та наскільки тривало це
може бути зроблено. Основні заголовки, які використовуються для цієї мети,
включають:
- Cache-Control. Цей заголовок вказує на клієнтові та серверу, які
правила повинні бути використані для кешування ресурсу. Наприклад,
"public" вказує, що ресурс може бути закешований не тільки на клієнті,
але і на проксі-серверах, "private" означає, що ресурс може бути
закешований тільки на клієнті, "max-age" визначає, на скільки секунд
ресурс може бути закешований;
- Expires. Цей заголовок вказує на дату та час, коли ресурс стає
застарілим та не може бути використаним з кешу. Він вказує
конкретний момент часу;
- ETag. Цей заголовок містить унікальний ідентифікатор ресурсу. Він
використовується для перевірки, чи ресурс був змінений з моменту
63
останнього запиту, і якщо так, то новий ресурс буде завантажений з
сервера;
- If-None-Match. Цей заголовок використовується клієнтом для передачі
ETag ресурсу, який він має в кеші. Сервер перевіряє, чи відповідає
ETag актуальному стану ресурсу, і відправляє 304 Not Modified, якщо
ресурс не був змінений;
- If-Modified-Since. Цей заголовок вказує серверу дату та час останньої
модифікації ресурсу в кеші клієнта. Сервер може перевірити, чи ресурс
був змінений після цієї дати, і відправити 304 Not Modified, якщо
ресурс не був змінений.
Завдяки цим заголовкам, веб-сервери та браузери можуть ефективно
керувати кешуванням ресурсів, що дозволяє покращити продуктивність та
знизити навантаження на мережу та сервер.
Після завантаження основного контенту, клієнтський додаток почне
завантажувати додатковий контент сторінки, який залежить від роутингу.
Наприклад, якщо користувач системи відкриває сторінку “Викладачі”,
система виконує завантаження частини системи, яка відповідає за цей модуль
рисунок 3.3.
Також в створеній системі розроблено метод завантаження контенту до
того, як користувач зайде на вибрану сторінку. Даний метод починає
завантажувати весь потрібний контент в той час, поки клієнт переглядає
першу сторінку додатку.
Pre-fetching (попереднє завантаження) сторінки - це техніка оптимізації
веб-додатків, коли браузер або додаток завчасно завантажують ресурси
(зазвичай сторінки або додаткові файли) перед тим, як користувач взаємодіє з
ними. Головна мета попереднього завантаження - зменшити час очікування
користувача, коли він переходить на нову сторінку або виконує дії, що
призводять до завантаження додаткового вмісту.
64
Рисунок 3.3 - Повне завантаження сторінки
Переваги попереднього завантаження включають зменшення часу
завантаження сторінок, покращення користувацького досвіду та можливість
зниження навантаження на сервер. Однак важливо використовувати цю
техніку ретельно та з урахуванням ресурсів, оскільки не потрібне попереднє
завантаження може призвести до зайвого навантаження на мережу і сервер.
Виходячи з вищесказаного було виконано оптимізацію існуючих
методів оптимізації сторінки за допомогою використання технологій
попереднього завантаження, а також використання CDN мережі як хмарного
сховища, що в сукупності дає великий приріст в швидкодії завантаження та
рендерингу сторінки.
65
3.3 Забезпечення захисту інформації при роботі зі створеною
системою
Забезпечення захисту інформації в сучасному цифровому світі є
надзвичайно важливою завданням з численними обґрунтуваннями та
наслідками.
Захист конфіденційної інформації є однією з основних причин. Багато
організацій мають конфіденційні дані, такі як особисті дані клієнтів,
фінансову інформацію, комерційні секрети та багато іншого. Порушення
конфіденційності може призвести до серйозних правових проблем, втрати
довіри та репутації, а також фінансових втрат.
Забезпечення цілісності даних гарантує, що дані не були змінені чи
пошкоджені незаконно. Це особливо важливо для даних, які можуть
впливати на прийняття рішень, такі як медична інформація, фінансові записи
та інше.
Забезпечення доступності даних гарантує, що вони будуть доступні
відповідним користувачам у відповідний час. Атаки на доступність, такі як
DDoS (розподілені атаки з відмовою в обслуговуванні), можуть призвести до
відключення вебсайту чи інших служб, що може завдати серйозного збитку.
Програмні продукти, системи та мережі можуть містити різноманітні
уразливості, які можуть бути використані зловмисниками для
несанкціонованого доступу. Забезпечення безпеки допомагає виявляти та
ліквідовувати ці уразливості.
У багатьох країнах і галузях існують закони та нормативи, що
стосуються захисту інформації, такі як GDPR в Європейському Союзі.
Недотримання цих законів може призвести до великих штрафів та інших
юридичних наслідків.
Порушення безпеки інформації може сильно вразити репутацію
організації або особи. Публічність щодо інциденту безпеки може викликати
негативну реакцію від клієнтів, партнерів і громадськості.
66
Розробка і виконання заходів забезпечення захисту може зменшити
ризики інцидентів безпеки, що може призвести до заощадження ресурсів, які
інакше були б витрачені на відновлення та виправлення проблем.
Забезпечення захисту інформації - це складний і постійно змінюючийсь
процес, який вимагає систематичного аналізу загроз, вживання заходів для їх
запобігання та реагування на інциденти безпеки, щоб забезпечити
інформаційну безпеку і довіру в користувачів і споживачів.
Через те, що розроблена система являє собою лише клієнтським
додаток, слід розуміти те, що люба комунікації даного ПЗ з сервером не
повинна містити будь-яких даних, які можуть бути використані
зловмисниками в майбутньому.
Під час створення додатка було використано підхід “тонкого клієнту”.
Тонкий клієнт (Thin Client) - це тип комп'ютера або програмного
забезпечення, який має обмежену функціональність і зазвичай залежить від
сервера або хмарних обчислювальних ресурсів для виконання великої
частини завдань та обробки даних. Основна ідея тонкого клієнта полягає в
тому, що він використовує мінімальні дані в самому додатку, а основні
операції проводяться над даними збереженими в хмарному сховищі або
доданими даними користувача.
У нашому випадку дані, які зберігаються на AWS S3 - це лише код
клієнтського додатка. Користувач, який буде працювати з програмним
забезпеченням завжди буде мати копію бази даних на локальному
комп'ютері.
Захист локальних даних - це важлива частина забезпечення безпеки
інформації на вашому пристрої, такому як комп'ютер, смартфон чи планшет.
Ця інформація може містити особисті дані, фотографії, документи, паролі та
багато іншого. Ось кілька основних принципів та практичних порад щодо
захисту локальних даних:
- Системний пароль і біометрична ідентифікація. Встановіть сильний
системний пароль на вашому пристрої. Більшість сучасних пристроїв
67
також підтримують біометричну ідентифікацію, таку як сканування
відбитків пальців або розпізнавання обличчя, що може бути
додатковим засобом захисту;
- Оновлення системи. Важливо регулярно оновлювати операційну
систему та програмне забезпечення на вашому пристрої. Оновлення
зазвичай містить патчі безпеки, які виправляють виявлені уразливості;
- Антивірусне програмне забезпечення. Встановіть надійне антивірусне
програмне забезпечення для захисту від вірусів, троянських коней і
іншого шкідливого програмного забезпечення. Регулярно оновлюйте
антивірусну базу даних;
- Шифрування даних. Використовуйте шифрування для захисту
важливих даних на вашому пристрої. Операційні системи та багато
програм надають засоби шифрування для зберігання файлів в
зашифрованому вигляді;
- Захист паролів. Використовуйте сильні паролі для доступу до вашого
пристрою та різних акаунтів. Не використовуйте однакові паролі для
різних сервісів. Розгляньте можливість використання менеджера
паролів для збереження та керування паролями;
- Використання бекапів: Регулярно створюйте резервні копії важливих
даних і зберігайте їх в безпечному місці. Це може бути на зовнішньому
жорсткому диску, в хмарному сховищі або на іншому пристрої;
- Обмеження доступу. Встановіть обмеження доступу до вашого
пристрою. Наприклад, використовуйте пароль для розблокування, і не
дозволяйте невідомим особам користуватися вашим пристроєм;
- Уважність в мережі. Уникайте підключення до невідомих та
ненадійних мереж Wi-Fi, особливо в громадських місцях. Це може
запобігти атакам типу "Man-in-the-Middle.";
- Захист від втрати чи крадіжки: Не залишайте свій пристрій без нагляду
в громадських місцях і використовуйте функцію віддаленого
вимкнення у випадку втрати чи крадіжки.
68
Захист локальних даних - це постійний процес і вимагає уважності і
своєчасних заходів. Відповідна практика безпеки допоможе захистити ваші
особисті та конфіденційні дані від втрати, крадіжки та несанкціонованого
доступу.
Також, для додаткового захисту даних було використано алгоритм
шифрування AES-256, який додає необхідний рівень безпеки даних,
збережених на локальному комп'ютері.
AES-256 (Advanced Encryption Standard 256-bit) - це сучасний і дуже
надійний алгоритм блочного шифрування, який використовується для
захисту конфіденційності даних. Цей алгоритм є частиною стандарту
Advanced Encryption Standard (AES), який був визнаний американським
Національним інститутом стандартів і технологій (NIST) у 2001 році. Завдяки
своїй високій ступені безпеки та надійності AES-256 є стандартом для
шифрування конфіденційної інформації у багатьох галузях та додатках, і він
є важливою складовою кібербезпеки.
3.4 Технічні вимоги для роботи з системою
Технічні вимоги - це набір обов'язкових характеристик і специфікацій,
які повинні бути виконані або задоволені для успішної розробки,
впровадження чи використання системи, програмного забезпечення,
пристрою або послуги. Технічні вимоги визначають, як система повинна
працювати, які функції вона повинна виконувати і які технічні обмеження
мають бути враховані.
Функціональні вимоги - це опис того, що система повинна робити. Це
включає в себе функції, операції, можливості та інші характеристики, які
повинні бути доступні в системі. Функціональні вимоги часто описуються у
вигляді сценаріїв використання чи списків функцій.
Нефункціональні вимоги - це технічні обмеження та характеристики,
які не стосуються конкретних функцій системи, але визначають якість,
69
продуктивність та надійність системи. Наприклад, до нефункціональних
вимог можуть входити швидкість роботи, безпека, доступність,
масштабованість, сумісність та інші.
Апаратні та програмні вимоги - це вимоги до апаратної та програмної
інфраструктури, на якій повинна працювати система. Вони можуть містити
вимоги до операційної системи, версії браузера, обсягу оперативної пам'яті,
швидкість процесора, обсяг дискового простору та інші технічні
характеристики.
Для запуску розробленої системи в режимі розробника потрібно
встановити та налаштувати технологію Node.js, яка дає можливість запускати
мову програмування Javascript в серверному середовищі.
Node.js - це вільна, відкрита платформа, яка базується на JavaScript і
призначена для створення серверних додатків і мережевих застосунків. Він
включає в себе середу виконання JavaScript, яка дозволяє виконувати
JavaScript на стороні сервера. І хоча Node.js сам по собі є серверною
технологією, він має важливе значення для розробників користувацьких
додатків
Фронтенд розробники зазвичай використовують JavaScript для
створення користувацьких інтерфейсів на клієнтському боці. Node.js
дозволяє використовувати JavaScript як на стороні клієнта, так і на стороні
сервера. Це означає, що ви можете використовувати одну мову
програмування для розробки як фронтенду, так і бекенду, що полегшує обмін
кодом між командами і підвищує ефективність розробки.
Node.js включає пакетний менеджер NPM (Node Package Manager),
який дозволяє розробникам клієнтських додатків легко встановлювати,
оновлювати та керувати залежностями в їхніх проектах. Велика кількість
пакетів та бібліотек, доступних через NPM, спрощує розробку і дозволяє
використовувати готові рішення для різних завдань.
Node.js дозволяє розробникам клієнтських додатків створювати
різноманітні інструменти і скрипти, які полегшують розробку та
70
автоматизацію завдань, такі як збірка проектів, тестування, оптимізація та
інші.
Для того, щоб код розробленого додатка працював в браузері клієнту,
потрібно виконати компіляцію вихідного коду. Хоча код програми
написаний з використанням ECMAScript 2023, в такому вигляді код не може
бути завантажений в хмару через те, що не всі клієнти можуть його
використовувати через сумісність браузерів.
ECMAScript (скорочено ES) - це стандарт, який визначає мову
програмування JavaScript. ECMAScript встановлює правила та специфікації,
які реалізації JavaScript повинні дотримуватися, щоб забезпечити сумісність
між різними середовищами виконання та браузерами.
ECMAScript є основою для JavaScript і багатьох інших мов
програмування. Реалізації JavaScript, такі як V8 (використовується у браузері
Chrome) та Node.js, дотримуються стандарту ECMAScript, щоб забезпечити
сумісність і однаковий результат виконання коду в різних середовищах.
Для компіляції програми рекомендовано використовувати ECMAScript
2017 року, який працює правильно на всіх сучасних браузерах.
Для більш легкої підтримки сумісності браузерів рекомендовано
використовувати інструмент Browserslist. Browserslist - це інструмент, який
використовується в розробці веб-додатків для визначення, які браузери
підтримуються вашим проектом. Він дозволяє вам вказати список браузерів
та їх версій, які ви хочете підтримувати, і використовувати цю інформацію
для оптимізації інтернет-ресурсів, таких як CSS та JavaScript, а також для
генерації відповідних префіксів для CSS, які підтримуються вказаними
браузерами. Використання Browserslist допомагає покращити сумісність
вашого веб-додатку з різними браузерами та зменшити обсяг коду, який
потрібно підтримувати для застарілих браузерів, що підвищує
продуктивність і швидкість завантаження сторінок.
Через те, що код програми буде знаходитися в хмарі та буде
розповсюджений через AWS CloudFront, будь-хто з усього світу матиме
71
можливість отримати доступ до коду цього сайту. Для цього потрібно
обмежити країни, з яких користувач матиме можливість відкрити
розроблений WEB-сайт.
Рекомендовано регулярно оновлювати обмеження доступу, якщо це
необхідно, і слідкувати за налаштуваннями безпеки облікового запису
CloudFront розподіленого контенту для забезпечення оптимального
забезпечення доступу для вашої цільової аудиторії.
3.5 Оцінка ефективності застосування системи
Оцінка ефективності застосування системи є важливою частиною
процесу розробки та впровадження будь-якої інформаційної технології. Вона
дозволяє визначити, наскільки добре система виконує свої функції та
відповідає поставленим цілям і вимогам. Оцінка ефективності може бути
проведена на різних етапах життєвого циклу системи.
Першим кроком є визначення конкретних метрик, які будуть
використанні для оцінки системи. Метрики можуть містити продуктивність,
надійність, доступність, швидкодію, витрати, задоволеність користувачів і
багато інших показників.
Збір даних є необхідним для вимірювання метрик ефективності.
Потрібно використовувати різні інструменти та системи моніторингу, щоб
збирати дані про роботу системи в реальному часі.
Оцінка ефективності передбачає аналіз зібраних даних для визначення,
як добре система працює. Можна порівнювати зібрані дані зі заздалегідь
визначеними метриками та порівняльними даними (якщо такі є).
Оцінка ефективності системи допомагає забезпечити її високу якість та
відповідність вимогам користувачів. Цей процес також допомагає виявляти
та усувати проблеми та забезпечувати ефективну роботу системи з плином
часу.
72
Для перевірки розробленої системи буде використано наступні
показники:
- Швидкість завантаження сторінки;
- Ресурси, які були витрачені для рендерингу сторінки;
- Швидкість рендерингу сторінки;
Для аналізу ефективності розробленої системи можна використати
інструмент Lighthouse.
Lighthouse - це відкритий інструмент для аналізу та оцінки якості та
продуктивності веб-сторінок та веб-додатків. Він був розроблений командою
Google і доступний як частина інструментів розробника Chrome, а також як
окремий інструмент команди Google Chrome Labs.
Lighthouse оцінює продуктивність веб-сторінок, враховуючи різні
аспекти, такі як швидкість завантаження, швидкість відображення сторінки,
кешування ресурсів і багато інших. Він визначає загальний бал з
продуктивності та надає рекомендації для покращення швидкості та
ресурсомісткості сторінки.
Lighthouse генерує детальні звіти з результатами аналізу, які
включають в себе оцінку на кожну з перевірених категорій та рекомендації
для покращення сторінки. Звіти можна переглядати у веб-браузері або
експортувати у різні формати, приклад зображений на рисунку 3.4.
Через те, що ціллю даної роботи була оптимізація методів роботи
рендерингу сторінки, порівнювати потрібно аналогічну систему. При цьому
система повинна працювати як з оптимізованими методами рендерингу, так і
зі звичайним завантаженням.
Для аналізу роботи рендерингу було використано наступні метрики:
- First Contentful Paint;
- Largest Contentful Paint;
- Total Blocking Time;
- Speed Index;
73
Рисунок 3.4 - Аналіз ефективності розробленої системи
First Contentful Paint (FCP) - це метрика, яка вимірює час, який потрібен
для відображення першого візуального елемента на сторінці під час
завантаження. Цей елемент може бути текстом, зображенням, фоновим
зображенням або іншими видимими елементами контенту. FCP є важливою
метрикою продуктивності, оскільки вона відображає, наскільки швидко
користувачі бачать перший вміст на вашому вебсайті, і це може вплинути на
їх перше враження від сторінки.
FCP вимірюється в мілісекундах (ms) і являє собою момент, коли вміст
починає рендеритися на екрані. Чим менше значення FCP, тим краще,
оскільки це означає, що користувачі бачать вміст швидше.
74
FCP є однією з ключових метрик, які використовуються для
вимірювання швидкості завантаження сторінки, і він може бути покращений
шляхом оптимізації ресурсів, зменшення розміру зображень, використання
кешування та інших технік для прискорення завантаження сторінки. Багато
веб-розробників і маркетологів використовують FCP для вимірювання
продуктивності своїх вебсайтів і покращення їх швидкодії для кращого
досвіду користувачів.
Largest Contentful Paint (LCP) - це метрика продуктивності веб-
сторінок, яка вимірює час завантаження та відображення найбільшого за
розміром змістовного елемента на сторінці. Цей елемент може бути текстом,
зображенням, відео чи іншими видимими компонентами сторінки. LCP є
важливою метрикою, оскільки вона вказує на те, коли користувачі бачать
основний та значущий контент на сторінці.
Total Blocking Time (TBT) - це метрика продуктивності веб-сторінок,
яка вимірює сумарний час, протягом якого сторінка блокується для взаємодії
користувача під час завантаження. Ця метрика вказує на те, наскільки довго
користувачі не можуть взаємодіяти зі сторінкою, навіть якщо вона
відображається на екрані.
Speed Index - це метрика продуктивності веб-сторінок, яка вимірює,
наскільки швидко сторінка стає візуально повноцінною під час завантаження.
Ця метрика вказує на загальну швидкість відображення вмісту на сторінці, а
не просто на перший видимий елемент, як у метриці First Contentful Paint
(FCP). Аналіз ефективності оптимізації методів рендерингу зображений в
таблиці 3.1.
Як видно з результату аналізу ефективності оптимізації методів
рендерингу, швидкість доступності сторінки для користувача з
використанням оптимізації методів рендерингу за допомогою хмарних
технологій значно вище, чим з використанням звичайних підходів.
75
Таблиця 3.1 - Аналіз ефективності оптимізації методів рендерингу.
Система FCP LCP TBT Speed Index
З
використанням
оптимізованих 0.6s 1.0s 0s 0.6s
методів
рендерингу
Звичайний
рендеринг 3.4s 3.8s 1s 3.4s
Розроблена система працює значно швидше своїх аналогів як в режимі
персонального комп'ютера, так і в мобільних пристроях з використанням
стільникових мереж.
3.6 Висновки до розділу 3
У третьому розділі роботи була представлена докладна інформація про
структуру розробленої програмної системи, що використана для тестування
та оцінки впровадження оптимізаційних методів рендерингу WEB-сторінки.
У цьому розділі описано функціональні можливості програмної системи та
завдання, які вона вирішує. Окрема увага приділена заходам забезпечення
безпеки та захисту інформації у системі.
Подано вимоги до взаємодії користувачів з системою та основні
вимоги до її функціональності. Це допомагає чітко визначити, як система
повинна працювати та які задачі вона повинна виконувати.
На завершення розділу була проведена оцінка ефективності
застосування розробленої системи. Ця оцінка може містити аналіз
продуктивності, витрат ресурсів та інших параметрів, які важливі для
визначення успішності системи у виконанні своїх завдань.
Усе це відображає глибокий аналіз та детальне планування роботи над
системою, а також важливість врахування функціональних і безпекових
аспектів у процесі розробки та впровадженням програмних застосунків.
76
ВИСНОВКИ
У даній кваліфікаційній роботі магістра була проведена глибока
аналітична робота та розробка методів оптимізації рендерингу web-сторінок з
використанням хмарних технологій. Результати цього дослідження та
розробки відкривають широкі можливості для вдосконалення продуктивності
та швидкодії веб-додатків у сучасному цифровому середовищі. Робота має
важливу актуальність з численних причин.
По-перше, в сучасному світі спостерігається надзвичайно швидкий ріст
обсягу даних та складності веб-сайтів. Користувачі очікують швидкого та
плавного відображення вмісту, а це вимагає від розробників звернути
особливу увагу на оптимізацію роботи рендерингу.
По-друге, збільшується використання мобільних пристроїв для доступу
до Інтернету. Це ставить підвищені вимоги до продуктивності веб-додатків,
оскільки на мобільних пристроях обмежені ресурси, і швидкодія є ключовою.
По-третє, оптимізація рендерингу веб-сторінок впливає на рейтинг в
пошукових системах та SEO (пошукову оптимізацію), що є критичним для
просування веб-сайтів у пошукових результатах.
По-четверте, оптимізація може призвести до економії витрат на
інфраструктуру та ресурси серверів, що є важливим для компаній, які мають
обмежені бюджети та ресурси.
По-п'яте, оптимізація покращує користувацький досвід, зменшує
відсоток відмов та споживання енергії, що важливо для збереження довкілля.
Метою цієї роботи було впровадження оптимізаційних методів
рендерингу web-сторінок для покращення продуктивності та швидкодії в
різних видах застосунків. Цю мету було досягнуто через створення та аналіз
нових методів оптимізації, які використовують хмарні технології. Для
демонстрації придатності цих методів була розроблена тестова програмна
система для менеджменту студентів на факультеті. Програмна система була
77
спроектована з використанням хмарних ресурсів та має тільки клієнтську
частину, не потребуючи наявності серверної.
Задачі, які були вирішені в цій роботі, включали в себе оцінку сучасних
методів рендерингу веб-сторінок та хмарних технологій, розробку стратегій
та методів оптимізації рендерингу, вибір технологій для розробки системи та
їх інтеграцію, оптимізацію та налаштування системи, а також оцінку
складності реалізації методів.
Об’єкт дослідження нашої роботи полягає у процесі рендерингу веб-
сторінок та його взаємодії з хмарними технологіями. Детально розглянуто
цей об'єкт та вивчено всі аспекти, які впливають на роботу рендерингу веб-
сторінок.
Предметом нашого дослідження є оптимізація рендерингу веб-
сторінок, зокрема використання розподілених обчислювальних ресурсів,
хмарних технологій та впровадження їх у веб-розробку. У роботі основну
увагу було сфокусовано на розробці та аналізі нових підходів щодо
рендерингу веб-сторінок за допомогою хмарних ресурсів.
Отримані результати мають важливе практичне значення для веб-
розробників та інженерів, які займаються розробкою веб-додатків, а також
для компаній, що використовують хмарні технології. Розроблені методи та
рекомендації дозволять покращити продуктивність та ефективність роботи,
зменшити час рендерингу та забезпечити більш зручний та швидкий доступ
до вмісту для користувачів.
Загальна структура кваліфікаційної роботи включає три розділи, кожен
з яких містить важливу інформацію за тематикою розробки. У першому
розділі був проведений аналіз предметної області, включаючи етапи
завантаження контенту для вебсайту, вивчено хмарні технології та їх
переваги та недоліки, а також детально розглянуто процес рендерингу
сторінки браузера та способи завантаження контенту з хостингу. У другому
розділі було розглянуто хостинг та принципи завантаження контенту за
допомогою різних протоколів, таких як chank, HTTP, HTTPs та UDP. Для
78
реалізації поставлених завдань обрано мови програмування HTML, CSS та
JS, а також використали бібліотеку React для спрощення розробки та мережу
CDN та технологію AWS S3 для збільшення швидкодії роботи клієнтського
додатку. У третьому розділі описано структуру створеної програмної
системи, функції, які вона виконує, та розроблено заходи забезпечення
безпеки інформації. Також визначено вимоги до роботи із тестовою
програмною системою та проведено оцінку її ефективності.
У підсумку, кваліфікаційна робота магістра відкриває нові можливості
для оптимізації роботи рендерингу веб-сторінок з використанням хмарних
технологій. Для досягнення основної цілі роботи використано сучасні методи
та розроблено нові підходи, які допоможуть покращити продуктивність та
ефективність веб-додатків. Результати мають важливе практичне значення
для розробників та компаній, що працюють у сфері веб-розробки та хмарних
технологій.
79
ПЕРЕЛІК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ
CDN - Content Delivery Network (мережа доставки контенту).
HTML - HyperText Markup Language (мова гіпертекстових розміток).
CSS - Cascading Style Sheets (каскадні таблиці стилів).
JS - JavaScript (мова програмування JavaScript).
AWS - Amazon Web Services (хмарні обчислювальні послуги Amazon).
S3 - Simple Storage Service (сервіс простого зберігання).
HTTP - HyperText Transfer Protocol (протокол передачі гіпертексту).
HTTPS - HyperText Transfer Protocol Secure (захищений протокол
передачі гіпертексту).
UDP - User Datagram Protocol (протокол користувацьких дейтаграм).
SEO - Search Engine Optimization (оптимізація для пошукових систем).
API - Application Programming Interface (інтерфейс програмування
додатків).
CPU - Central Processing Unit (центральний процесор).
GPU - Graphics Processing Unit (графічний процесор).
DOM - Document Object Model (модель об'єктів документа).
UI - User Interface (користувацький інтерфейс).
UX - User Experience (користувацький досвід).
RAM - Random Access Memory (оперативна пам'ять).
API - Application Programming Interface (інтерфейс програмування
додатків).
GPU - Graphics Processing Unit (графічний процесор).
UX - User Experience (користувацький досвід).
UI - User Interface (користувацький інтерфейс).
HTML5 - HyperText Markup Language version 5 (п'ята версія мови
гіпертекстової розмітки).
80
CSS3 - Cascading Style Sheets version 3 (третя версія каскадних таблиць
стилів).
SPA - Single Page Application (односторінкова програма).
CMS - Content Management System (система управління вмістом).
SSL - Secure Sockets Layer (протокол захищених сокетів).
TLS - Transport Layer Security (протокол захисту транспортного рівня).
API - Application Programming Interface (інтерфейс програмування
додатків).
81
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Ben Schwarz. Web Performance Optimization. Birmingham: Packt
Publishing, 2018. 320 p.
2. Lee Atchison. Architecting for Scale: High Availability for Your Growing
Applications. Sebastopol: O'Reilly Media, 2016. 230 p.
3. Ikram Hawramani. Cloud Computing for Complete Beginners: Building and
Scaling High-Performance Web Servers on Amazon Web Services.
Independently Published, 2019. 180 p.
4. Steve Souders. Web Performance: The Definitive Guide. Guy Podjarny.
Sebastopol: O'Reilly Media, 2016. 794 p.
5. Lara Callender Hogan. Designing for Performance: Weighing Aesthetics and
Speed. Sebastopol: O'Reilly Media, 2014. 214 p.
6. Martin Targett. JavaScript Performance. Birmingham: Packt Publishing,
2014. 224 p.
7. Steve Souders. High Performance Web Sites: Essential Knowledge for
Front-End Engineers. Sebastopol: O'Reilly Media, 2007. 170 p.
8. John Allspaw s. Web Operations: Keeping the Data On Time. Jesse Robbin -
Sebastopol: O'Reilly Media, 2010. 338 p.
9. Artur Ejsmont. Web Scalability for Startup Engineers. Independently
Published, 2016. 200 p.
10.Jeremy Wagner. Web Performance in Action. Sergey Chernyshev - Shelter
Island: Manning Publications, 2019. 384 p.
11.Greg L. Turnquist. Cloud Native Web Development with Spring Boot,
Spring Cloud, and Angular. Sebastopol: O'Reilly Media, 2020. 750 p.
12.Sam Newman. Building Microservices: Designing Fine-Grained Systems. -
Sebastopol: O'Reilly Media, 2015. 280 p.
82
13.Thomas Erl. Cloud Computing: Concepts, Technology & Architecture."
Upper Saddle River: Prentice Hall, 2013. 528 p.
14.Ethan Brown. Web Development with Node and Express: Leveraging the
JavaScript Stack. Zaigham Mahmood, та Ricardo Puttini - Sebastopol:
O'Reilly Media, 2014. 330 p.
15.Justin Garrison. Cloud Native Infrastructure: Patterns for Scalable
Infrastructure and Applications in a Dynamic Environment. Sebastopol:
O'Reilly Media, 2017. 202 p.
16.Nicholas C. High-Performance JavaScript: Build Faster Web Application
Interfaces. Zakas - Sebastopol: O'Reilly Media, 2010. 226 p.
17.Rajkumar Buyya. Cloud Computing Principles and Paradigms. James
Broberg, та Andrzej M. Goscinski. Hoboken: Wiley, 2011. 688 p.
18.Paul Bruce. Web Performance Testing and Optimization. Tammy Everts,
Sebastopol: O'Reilly Media, 2014. 338 p.
19.Peter Sbarski. Serverless Architectures on AWS: With Examples Using
AWS Lambda. Shelter Island: Manning Publications, 2017. 384 p.
20.Josh Long. Cloud-Native Applications in Java. Sebastopol: O'Reilly Media,
2020. 330 p.
21.Josha Stella. Scalable Cloud Ops with Fugue: Declare, Deploy, and
Automate the Cloud. Yuvall Kind- Sebastopol: O'Reilly Media, 2017. 344 p.
ДОДАТОК А
«ЗАТВЕРДЖУЮ»
Завідувач кафедри ІБ та КІ
д.т.н., професор Віра БАБЕНКО
__________________
“___” _____________ 2023р.
Оптимізація методів роботи рендерингу WEB-сторінки за
допомогою хмарних технологій
Специфікація
482.ЧДТУ.32280-01
Листів 2
Розробник _______________ Давид КОВАЛЬЧУК
Керівник _______________ Володимир РУДНИЦЬКИЙ
Черкаси 2023
2
482.ЧДТУ.32280-01
Позначення Найменування Примітка
Документація
482.ЧДТУ.32280-01 12 01 Текст програми
482.ЧДТУ.32280-01 34 01 Інструкція користувача
ДОДАТОК Б
Оптимізація методів роботи рендерингу web-сторінки
за допомогою хмарних технологій
Текс програми
482.ЧДТУ.32280-01 12 01
Листів 12
Розробник _______________ Давид КОВАЛЬЧУК
Черкаси 2023
2
482.ЧДТУ.32280-01 12 01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=no">
<meta name="theme-color" content="#fff">
<meta name="description" content="Use your own budget in intelligent way">
<link rel="preload" href="/icons/webfonts/fa-regular-400.woff2" as="font"
crossorigin="anonymous">
<link rel="preload" href="/icons/webfonts/fa-solid-900.woff2" as="font"
crossorigin="anonymous">
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&a
mp;display=swap">
<link rel="stylesheet" href="/icons/css/all.min.css">
<title>Магістерська дипломна</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>
import React from 'react';
import { createRoot } from 'react-dom/client';
import {
BrowserRouter,
Routes,
Route
} from 'react-router-dom';
const StudentsPage = dynamicImport('./pages/students');
const SchedulePage = dynamicImport('./pages/schedules');
const TeachersPage = dynamicImport('./pages/teachers');
const AdminPage = dynamicImport('./pages/admin');
import './index.scss';
3
482.ЧДТУ.32280-01 12 01
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={<StudentsPage/>} />
<Route path="/schedule" element={<SchedulePage/>} />
<Route path="/teachers" element={<TeachersPage/>} />
<Route path="/admin" element={<AdminPage/>} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);
import { openDB } from 'idb';
const dbPromise = openDB('my-database', 1, {
upgrade(db) {
if (!db.objectStoreNames.contains('students')) {
const studentsStore = db.createObjectStore('students', { keyPath: 'id' });
studentsStore.createIndex('name', 'name');
}
},
});
export async function addStudent(student) {
const db = await dbPromise;
const tx = db.transaction('students', 'readwrite');
const store = tx.objectStore('students');
await store.add(student);
await tx.done;
}
export async function getAllStudents() {
const db = await dbPromise;
const tx = db.transaction('students', 'readonly');
const store = tx.objectStore('students');
return store.getAll();
}
import React, { useState, useEffect } from 'react';
import { addStudent, getAllStudents } from './IndexedDB';
4
482.ЧДТУ.32280-01 12 01
const StudentsPage = () => {
const [students, setStudents] = useState([]);
const [newStudent, setNewStudent] = useState({ name: '', age: '' });
const [editingStudent, setEditingStudent] = useState(null);
const [filterName, setFilterName] = useState('');
const [filterAge, setFilterAge] = useState('');
const [sortField, setSortField] = useState(null);
const [sortOrder, setSortOrder] = useState('asc');
useEffect(() => {
async function fetchStudents() {
const studentsData = await getAllStudents();
setStudents(studentsData);
}
fetchStudents();
}, []);
useEffect(() => {
const filteredAndSortedStudents = students
.filter((student) => {
return student.name.toLowerCase().includes(filterName.toLowerCase()) &&
student.age.toString().includes(filterAge);
})
.sort((a, b) => {
if (sortField === 'name') {
return sortOrder === 'asc' ? a.name.localeCompare(b.name) :
b.name.localeCompare(a.name);
} else if (sortField === 'age') {
return sortOrder === 'asc' ? a.age - b.age : b.age - a.age;
}
return 0;
});
setStudents(filteredAndSortedStudents);
}, [students, filterName, filterAge, sortField, sortOrder]);
const handleAddStudent = async () => {
if (newStudent.name && newStudent.age) {
await addStudent(newStudent);
setNewStudent({ name: '', age: '' });
fetchStudents();
}
5
482.ЧДТУ.32280-01 12 01
};
const handleEditStudent = (student) => {
setEditingStudent(student);
setNewStudent({ name: student.name, age: student.age });
};
const handleUpdateStudent = () => {
if (newStudent.name && newStudent.age && editingStudent) {
const updatedStudents = students.map((student) =>
student.id === editingStudent.id ? { ...student, ...newStudent } : student
);
setStudents(updatedStudents);
setEditingStudent(null);
setNewStudent({ name: '', age: '' });
}
};
const handleDeleteStudent = (student) => {
const updatedStudents = students.filter((s) => s.id !== student.id);
setStudents(updatedStudents);
};
return (
<div>
<h1>Список студентів</h1>
<div>
<label>Фільтр за ім'ям: </label>
<input
type="text"
value={filterName}
onChange={(e) => setFilterName(e.target.value)}
/>
</div>
<div>
<label>Фільтр за віком: </label>
<input
type="text"
value={filterAge}
onChange={(e) => setFilterAge(e.target.value)}
/>
</div>
<table>
<thead>
<tr>
6
482.ЧДТУ.32280-01 12 01
<th>ID</th>
<th>
Ім'я{' '}
<button onClick={() => setSortField('name')}>
{sortField === 'name' && sortOrder === 'asc' ? '↑' : '↓'}
</button>
</th>
<th>
Вік{' '}
<button onClick={() => setSortField('age')}>
{sortField === 'age' && sortOrder === 'asc' ? '↑' : '↓'}
</button>
</th>
<th>Дії</th>
</tr>
</thead>
<tbody>
{students.map((student) => (
<tr key={student.id}>
<td>{student.id}</td>
<td>
{editingStudent === student ? (
<input
type="text"
value={newStudent.name}
onChange={(e) =>
setNewStudent({ ...newStudent, name: e.target.value })
}
/>
) : (
student.name
)}
</td>
<td>
{editingStudent === student ? (
<input
type="text"
value={newStudent.age}
onChange={(e) =>
setNewStudent({ ...newStudent, age: e.target.value })
}
/>
) : (
student.age
)}
7
482.ЧДТУ.32280-01 12 01
</td>
<td>
{editingStudent === student ? (
<button onClick={handleUpdateStudent}>Зберегти</button>
) : (
<>
<button onClick={() =>
handleEditStudent(student)}>Редагувати</button>
<button onClick={() =>
handleDeleteStudent(student)}>Видалити</button>
</>
)}
</td>
</tr>
))}
</tbody>
</table>
<div>
<h2>Додати студента</h2>
<input
type="text"
placeholder="Ім'я"
value={newStudent.name}
onChange={(e) => setNewStudent({ ...newStudent, name: e.target.value })}
/>
<input
type="text"
placeholder="Вік"
value={newStudent.age}
onChange={(e) => setNewStudent({ ...newStudent, age: e.target.value })}
/>
<button onClick={handleAddStudent}>Додати</button>
</div>
</div>
);
};
export default StudentsPage;
const DB_NAME = 'adminAppDB';
const STUDENTS_STORE = 'studentsStore';
const TEACHERS_STORE = 'teachersStore';
const SCHEDULE_STORE = 'scheduleStore';
8
482.ЧДТУ.32280-01 12 01
const openDB = () => {
return new Promise((resolve, reject) => {
const request = indexedDB.open(DB_NAME, 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains(STUDENTS_STORE)) {
db.createObjectStore(STUDENTS_STORE, { keyPath: 'id', autoIncrement: true });
}
if (!db.objectStoreNames.contains(TEACHERS_STORE)) {
db.createObjectStore(TEACHERS_STORE, { keyPath: 'id', autoIncrement: true });
}
if (!db.objectStoreNames.contains(SCHEDULE_STORE)) {
db.createObjectStore(SCHEDULE_STORE, { keyPath: 'id', autoIncrement: true });
}
};
request.onsuccess = () => {
resolve(request.result);
};
request.onerror = () => {
reject(request.error);
};
});
};
const addData = (storeName, data) => {
return openDB().then((db) => {
return new Promise((resolve, reject) => {
const transaction = db.transaction([storeName], 'readwrite');
const store = transaction.objectStore(storeName);
const request = store.add(data);
request.onsuccess = () => {
resolve();
};
request.onerror = () => {
reject(request.error);
};
});
});
};
9
482.ЧДТУ.32280-01 12 01
const getAllData = (storeName) => {
return openDB().then((db) => {
return new Promise((resolve, reject) => {
const transaction = db.transaction([storeName], 'readonly');
const store = transaction.objectStore(storeName);
const request = store.getAll();
request.onsuccess = () => {
resolve(request.result);
};
request.onerror = () => {
reject(request.error);
};
});
});
};
export { addData, getAllData };
import React, { useState, useEffect } from 'react';
import { addData, getAllData } from './indexedDB';
// ...
const StudentsTabContent = () => {
// ...
const handleAddStudent = () => {
if (newStudent.name && newStudent.age) {
addData('students', newStudent)
.then(() => {
setStudents([...students, newStudent]);
setNewStudent({ name: '', age: '' });
})
.catch((error) => {
console.error('Помилка додавання студента:', error);
});
}
};
useEffect(() => {
getAllData('students')
.then((data) => {
setStudents(data);
})
10
482.ЧДТУ.32280-01 12 01
.catch((error) => {
console.error('Помилка отримання даних студентів:', error);
});
}, []);
// ...
};
const TeachersTabContent = () => {
// ...
const handleAddTeacher = () => {
if (newTeacher.name && newTeacher.subject) {
addData('teachers', newTeacher)
.then(() => {
setTeachers([...teachers, newTeacher]);
setNewTeacher({ name: '', subject: '' });
})
.catch((error) => {
console.error('Помилка додавання викладача:', error);
});
}
};
useEffect(() => {
getAllData('teachers')
.then((data) => {
setTeachers(data);
})
.catch((error) => {
console.error('Помилка отримання даних викладачів:', error);
});
}, []);
// ...
};
const ScheduleTabContent = () => {
// ...
const handleAddScheduleItem = () => {
if (newItem.day && newItem.time && newItem.subject) {
addData('schedule', newItem)
.then(() => {
setSchedule([...schedule, newItem]);
11
482.ЧДТУ.32280-01 12 01
setNewItem({ day: '', time: '', subject: '' });
})
.catch((error) => {
console.error('Помилка додавання елемента до розкладу:', error);
});
}
};
useEffect(() => {
getAllData('schedule')
.then((data) => {
setSchedule(data);
})
.catch((error) => {
console.error('Помилка отримання даних розкладу:', error);
});
}, []);
// ...
};
async function loadImageAsync(imageUrl) {
try {
const response = await fetch(imageUrl);
if (!response.ok) {
throw new Error(`Помилка завантаження зображення: ${response.status}`);
}
const blob = await response.blob();
const imageUrlObject = URL.createObjectURL(blob);
return imageUrlObject;
} catch (error) {
console.error('Помилка завантаження зображення:', error);
throw error;
}
}
import React, { useState, useEffect } from 'react';
import { loadImageAsync } from './imageLoader';
function ImageComponent({ imageUrl }) {
const [imageSrc, setImageSrc] = useState(null);
12
482.ЧДТУ.32280-01 12 01
useEffect(() => {
async function loadAndSetImage() {
try {
const loadedImageSrc = await loadImageAsync(imageUrl);
setImageSrc(loadedImageSrc);
} catch (error) {
console.error('Помилка завантаження зображення:', error);
}
}
loadAndSetImage();
}, [imageUrl]);
return (
<div>
{imageSrc ? (
<img src={imageSrc} alt="Зображення" />
) : (
<p>Завантаження зображення...</p>
)}
</div>
);
}
export default ImageComponent;
import CryptoJS from 'crypto-js';
const generateAESKey = () => {
return CryptoJS.lib.WordArray.random(32);
};
const encryptAES = (data, key) => {
const ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), key);
return ciphertext.toString();
};
const decryptAES = (ciphertext, key) => {
const bytes = CryptoJS.AES.decrypt(ciphertext, key);
return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
};
ДОДАТОК В
Оптимізація методів роботи рендерингу web-сторінки
за допомогою хмарних технологій
Інструкція користувача
482.ЧДТУ.32280-01 34 01
Листів 4
Розробник _______________ Давид КОВАЛЬЧУК
Черкаси 2023
2
482.ЧДТУ.32280-01 34 01
Процес створення компіляції для створеного додатку - це крок, який
перетворює вихідний код створеної системи в оптимізований і готовий до
використання набір файлів для вебсайту.
Коли створене програмне забезпечення готове для використання,
потрібно виконати компіляцію вихідного кода, запустивши команду npm run
build. Під час цього процесу, вихідний код React та всі його залежності
компілюються в JavaScript, HTML, CSS та інші файли. Код також
оптимізується шляхом видалення зайвих пробілів, зведення змінних та
іншими методами для покращення продуктивності та безпеки.
Результатом компіляції є тека, яку називають build. Ця тека містить всі
файли, необхідні для роботи вашого додатка. Включаючи головний HTML-
файл, стилі, JavaScript-файли та інші ресурси.
Після створення компіляції, у користувача зʼявляється можливість
завантажити його на веб-сервер або хмарний хостинг. Це може бути ваш
власний сервер або послуга хостингу, така як Amazon S3, Netlify, Vercel
тощо. Для завантаження файлів на віддалений хостинг потрібен бути доступ.
Процес завантаження створеного React додатку на Amazon S3 доволі
простий і може бути виконаний за декілька кроків. Amazon S3 - це обліковий
сервіс для зберігання файлів у хмарі Amazon Web Services (AWS), і він може
бути використаний для розгортання статичних вебсайтів, таких як React
додатки.
Спочатку потрібно створити bucket S3, в якому ви будете зберігати
вашу компіляцію. У Amazon Simple Storage Service (Amazon S3), "bucket"
(відрізок) є основним контейнером для зберігання об'єктів, таких як файли,
зображення, відео, документи та багато інших видів даних. Bucket є
основною одиницею організації та керування об'єктами в Amazon S3.
3
482.ЧДТУ.32280-01 34 01
Для створення “bucket” потрібно виконати наступні кроки:
1. Увійдіть в консоль AWS за адресою https://aws.amazon.com/;
2. Виберіть Amazon S3 зі списку послуг AWS;
3. Натисніть на кнопку "Створити bucket" (Create Bucket);
4. Введіть унікальну назву для вашого WEB-сайту та виберіть регіон
зберігання;
5. Пройдіть крізь інші налаштування (необов'язково).
Після створення bucket зʼявиться можливість налаштувати WEB сайт
для завантаженого програмного додатка. Public website на Amazon S3 - це
статичний вебсайт, який розгортаний і хоститься на Amazon Simple Storage
Service (Amazon S3) і доступний для загального перегляду через інтернет.
Public website на S3 може використовуватися для розгортання статичних
вебсайтів, таких як статичні сторінки, блоги, лендінги, портфоліо та інші
статичні ресурси.
Для налаштування public website на Amazon S3 потрібно виконати
декілька кроків. Ось загальний план, як це зробити:
1. Виберіть Bucket S3 в консолі AWS;
2. Перейдіть до вкладки "Властивості" (Properties);
3. У розділі "Статичний вебсайт" (Static website hosting), ввімкніть опцію
"Включити статичний вебсайт" (Enable static website hosting);
4. Введіть ім'я файлу індексу (наприклад, "index.html") та файлу помилки
(якщо необхідно);
5. Збережіть налаштування.
Якщо потрібно використовувати власне доменне ім'я для вашого
вебсайту, то потрібно налаштувати DNS-записи, які вказують на ваш Bucket
S3. Можливо використовувати Amazon Route 53 або інший DNS-сервіс для
цього.
4
482.ЧДТУ.32280-01 34 01
Після цих кроків ваш public website на Amazon S3 буде доступним для
загального перегляду через інтернет за URL, який ви визначили. Також
можна додавати та оновлювати файли вашого вебсайту, завантажуючи їх в
Bucket S3, і змінювати налаштування, коли це необхідно.