Удосконалений метод цільового оновлення інтерфейсу користувача для підвищення ефективності вебзастосунків на основі реактивних потоків  та віртуального DOM

Максим В’ячеславович Гаватюк; Інна Олександрівна Саяпіна

doi:10.26642/ten-2025-1(95)-259-265

Автор(и)

Максим В’ячеславович Гаватюк Національний технічний університет України «Київський політехнічний інститут імені Ігоря Сікорського», Україна https://orcid.org/0009-0009-4596-7235
Інна Олександрівна Саяпіна Національний технічний університет України «Київський політехнічний інститут імені Ігоря Сікорського», Україна https://orcid.org/0000-0003-1541-1681

DOI:

https://doi.org/10.26642/ten-2025-1(95)-259-265

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

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

Анотація

На даний момент у світі існує безліч вебзастосунків, які в основному зосереджені на взаємодії даних та користувача. Саме через це гостро постає питання маніпуляції даних та їх швидкості оновлення на сторінці користувачів. Тому стаття присвячена розробці удосконаленого та ефективного методу оптимізації оновлення графічного інтерфейсу користувача шляхом поєднання реактивного програмування, віртуального DOM (Document Object Model) та власної системи керування станом. Проаналізовано сучасні підходи до оновлення інтерфейсу, зокрема пряме маніпулювання реальним DOM як засіб оновлення інтрерфейсу найпростішим способом та типові стейт-менеджери, що дають змогу зберігати дані вебзастосунків структуровано та в одному місці. Запропоновано модифікований метод, що дозволяє вибірково оновлювати лише змінені компоненти інтерфейсу, зменшуючи навантаження на систему. Проведено порівняльне дослідження ефективності нового підходу щодо існуючих рішень. Надано також можливості його подальшого вдосконалення та інтеграції у сучасні вебтехнології.

Посилання

Marang, A.Z. (2018), «Analysis of web performance optimization and its impact on user experience», [Online], available at: https://kth.diva-portal.org/smash/get/diva2:1228341/FULLTEXT01.pdf

Shvedov, I. (2024), «Doslidzhennia dotsilnosti, metodiv ta shliakhiv optimizatsii programnoho zabezpechennia zadlia pryshvydshennia roboty veb zastosunkiv», Herald of Khmelnytskyi National University. Technical sciences, doi: 10.31891/2307-5732-2024-337-3-51.

Boliubash, N. and Oliinyk, M. (2023), «Metody pidvyshchennia produktyvnosti prohresyvnoho vebzastosunku biblioteky na osnovi modeli RAIL», Information Technology and Society, doi: 10.32689/maup.it.2023.1.2.

Shivakumar, S.K. (2020), Modern Web Performance Optimization, Apress, Berkeley, CA, doi: 10.1007/978-1-4842-6528-4.

Ollila, R., Mäkitalo, N. and Mikkonen, T. (2022), «Modern Web Frameworks: A Comparison of Rendering Performance», Journal of Web Engineering, doi: 10.13052/jwe1540-9589.21311.

ReactJS: A Comprehensive Analysis of its features, Performance, and Suitability for Modern Web Development (2023), IJSREM Journal, doi: 10.55041/ijsrem25667.

«React: Performance Optimization», [Online], available at: https://vaishnavineema.medium.com/react-performance-optimization-4db330ac60b2

Hochbergs, G., «Reactive programming and its effect on performance and the development process», [Online], available at: https://lup.lub.lu.se/luur/download?fileOId=8932147&func=downloadFile&recordOId=8932146

Białecki, G. and Pańczyk, B. (2021), «Performance analysis of Svelte and Angular applications», Journal of Computer Sciences Institute, Vol. 19, рр. 139–143, doi: 10.35784/jcsi.2633.

Kryk, J. and Plechawska-Wójcik, M. (2025), «Multi-aspect comparative analysis of JavaScript programming frameworks – React.js and Solid.js», Journal of Computer Sciences Institute, Vol. 34, рр. 68–75, doi: 10.35784/jcsi.6712.

Docas, A., Kayode, S. and Paul, J., «Managing Global State with Flux and Redux Patterns», [Online], available at: https://www.researchgate.net/publication/385384161_Managing_Global_State_with_Flux_and_Redux_Patterns

Chęć, D. and Nowak, Z., «The Performance Analysis of Web Applications Based on Virtual DOM and Reactive User Interfaces», [Online], available at: https://link.springer.com/chapter/10.1007/978-3-319-99617-2_8

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

Marang A.Z. Analysis of web performance optimization and its impact on user experience / A.Z. Marang [Electronic resource]. – Access mode : https://kth.diva-portal.org/smash/get/diva2:1228341/FULLTEXT01.pdf.

Шведов І. Дослідження доцільності, методів та шляхів оптимізації програмного забезпечення задля пришвидшення роботи веб застосунків / І.Шведов // Herald of Khmelnytskyi National University. Technical sciences. DOI: 10.31891//2307-5732-2024-337-3-51.

Болюбаш Н. Методи підвищення продуктивності прогресивного вебзастосунку бібліотеки на основі моделі RAIL / Н.Болюбаш, М.Олійник // Information technology and society. – 2023. DOI: 10.32689/maup.it.2023.1.2.

Shivakumar S.K. Modern Web Performance Optimization / S.K. Shivakumar. – Berkeley, CA : Apress, 2020. DOI: 10.1007/978-1-4842-6528-4.

Ollila R. Modern Web Frameworks: A Comparison of Rendering Performance / R.Ollila, N.Mäkitalo, T.Mikkonen // Journal of Web Engineering. – 2022. DOI: 10.13052/jwe1540-9589.21311.

ReactJS: A Comprehensive Analysis of its features, Performance, and Suitability for Modern Web Development / IJSREM Journal. DOI: 10.55041/ijsrem2566.

React: Performance Optimization [Electronic resource]. – Access mode : https://vaishnavineema.medium.com/react-performance-optimization-4db330ac60b2.

Hochbergs G. Reactive programming and its effect on performance and the development process / G.Hochbergs [Electronic resource]. – Access mode : https://lup.lub.lu.se/luur/download?fileOId=8932147&func=downloadFile&recordOId=8932146.

Białecki G. Performance analysis of Svelte and Angular applications / G.Białecki, B.Pańczyk // Journal of Computer Sciences Institute. – 2021. – Vol. 19. – P. 139–143. DOI: 10.35784/jcsi.2633.

Kryk J. Multi-aspect comparative analysis of JavaScript programming frameworks – React.js and Solid.js / J.Kryk, M.Plechawska-Wójcik // Journal of Computer Sciences Institute. – 2025. – Vol. 34. – P. 68–75. DOI: 10.35784/jcsi.6712.

Docas A. Managing Global State with Flux and Redux Patterns / A.Docas, S.Kayode, J.Paul [Electronic resource]. – Access mode : https://www.researchgate.net/publication/385384161_Managing_Global_State_with_Flux_and_Redux_Patterns.

Chęć D. The Performance Analysis of Web Applications Based on Virtual DOM and Reactive User Interfaces / D.Chęć, Z.Nowak [Electronic resource]. – Access mode : https://link.springer.com/chapter/10.1007/978-3-319-99617-2_8.