Оптимізація промальовування вебзастосунку на основі об’єктів з глибокою вкладеністю та багатозалежними зв’язками

Олег Валерійович Войтюк; Дмитро Дмитрович Плечистий

doi:10.26642/ten-2023-1(91)-140-145

Автор(и)

Олег Валерійович Войтюк Державний університет «Житомирська політехніка», Україна https://orcid.org/0000-0003-2254-8977
Дмитро Дмитрович Плечистий Державний університет «Житомирська політехніка», Україна https://orcid.org/0000-0002-4803-159X

DOI:

https://doi.org/10.26642/ten-2023-1(91)-140-145

Ключові слова:

рефакторінг, кеш, фреймворк, рендерінг, React, фронтенд, промальовування вебзастосунку

Анотація

Стаття присвячена дослідженню застосування методів оптимізації промальовуювання вебзастосунків з використанням об’єктів з глибокою вкладеністю. Розглядається завдання аналізу користувацького інтерфейсу, який містить складну структуру даних, отриману від серверної частини. Для цього було сформовано спеціальний набір даних на основі аналізу багатьох вебзастосунків, у яких наявна складна система архітектури фронтенд-частини. Продемонстровано, як вона, зі свого боку, слугує основним набором на вхід системи. Показано, що фронтенд-частина розроблена на основі бібліотеки React з використанням таких технологій: JavaScript, HTML, CSS, Redux та допоміжних бібліотек для коректної роботи системи. Додаток структурує та трансформує вхідні параметри у формат, зручний для використання самою системою. З огляду на те, що система орієнтована на використання лише для фронтенд-розробки, обґрунтовано, що серверна частина додатка відсутня. За допомогою браузерних інструментів досліджено проблеми продуктивності існуючих систем, які використовують складні структури даних для промалювання вебдодатка. Доведено, що результатом роботи системи є компонент, який відмальовує оптимізовану систему даних, що має покращені показники продуктивності: швидкість відмалювання, швидкість реакції системи на користувацькі дії, зменшена кількість ітерацій промальовування інтерактивних елементів. Додатковий функціонал містить трансформації і структуризацію вхідних параметрів, унаслідок чого новий набір даних буде мати додаткові параметри та семантичну структуру об’єктів. Надалі планується розробка методу оптимізації і впровадження її у вигляді незалежної бібліотеки, яка, за можливості, замінить процес відмалювання схожих структур даних.

Посилання

Chinnathambi, K. (2019), Learning react, Addison-Wesley, 368 p.

Kyrychek, H.H. and Falkevych, V.H. (2019), «Optymizatsiia merezhevykh system iz vykorystanniam front-end tekhnolohii», Vcheni zapysky TNU imeni V.I. Vernadskoho. Ser. Tekhnichni nauky, Vol. 30 (69), Part 1, No. 5, pp. 103–108.

Critical Rendering Path: What It Is and How to Optimize It, [Online], available at: https://nitropack.io/blog/post/critical-rendering-path-optimization

Efficient React Components: A Guide to Optimizing React Performance, [Online], available at: https://www.toptal.com/react/optimizing-react-performance

Browser Rendering Optimization, [Online], available at: https://james-priest.github.io/udacity-nanodegree-mws/course-notes/browser-rendering-optimization.html

Optimizing performance in a React app, [Online], available at: https://blog.logrocket.com/optimizing-performance-react-app/

Shcherbakov, Ye.V. and Shcherbakova, M.Ie. (2022), «Doslidzhennia efektyvnosti vykorystannia biblioteky React», [Online], available at: http://nvdu.snu.edu.ua/wp-content/uploads/2022/08/2022-23-7.pdf

Voitiuk, O.V. (2022), «Optymizatsiia promalovuvannia vebzastosunku na osnovi obiektiv z hlybokoiu vkladenistiu ta bahatozalezhnymy zviazkamy», Kompiuterni tekhnolohii: innovatsii, problemy, rishennia, materialy V Vseukr. nauk.-tekhn. konf., 01-02 hrudnia, Zhytomyrska politekhnika, Zhytomyr, рр. 12–13.

Список використаної літератури:

Chinnathambi K. Learning react / K.Chinnathambi. – Addison-Wesley. – 2019. – 368 p.

Киричек Г.Г. Оптимізація мережевих систем із використанням front-end технологій / Г.Г. Киричек, В.Г. Фалькевич // Вчені записки ТНУ імені В.І. Вернадського. Сер. : Технічні науки. – 2019. – Т. 30 (69), Ч. 1, № 5. – С. 103 108.

Critical Rendering Path: What It Is and How to Optimize It [Electronic resource]. – Access mode : https://nitropack.io/blog/post/critical-rendering-path-optimization.

Efficient React Components: A Guide to Optimizing React Performance [Electronic resource]. – Access mode : https://www.toptal.com/react/optimizing-react-performance.

Browser Rendering Optimization [Electronic resource]. – Access mode : https://james-priest.github.io/udacity-nanodegree-mws/course-notes/browser-rendering-optimization.html.

Optimizing performance in a React app [Electronic resource]. – Access mode : https://blog.logrocket.com/optimizing-performance-react-app/.

Щербаков Є.В. Дослідження ефективності використання бібліотеки React / Є.В. Щербаков, М.Є. Щербакова [Електронний ресурс]. – Режим доступу : http://nvdu.snu.edu.ua/wp-content/uploads/2022/08/2022-23-7.pdf.

Войтюк О.В. Оптимізація промальовування вебзастосунку на основі об’єктів з глибокою вкладеністю та багатозалежними зв’язками / О.В. Войтюк // Комп’ютерні технології: інновації, проблеми, рішення : матеріали V Всеукр. наук.-тех. конф., 01-02 грудня. – Житомир : Житомирська політехніка, 2022. – С. 12–13.