Оптимізація повторного рендерингу у вебзастосунках: аналіз проблеми та рішення на основі React
DOI:
https://doi.org/10.30837/0135-1710.2025.184.090Ключові слова:
повторний рендеринг, оптимізація, вебзастосунок, React, пріоритизація, віртуальний DOMАнотація
Досліджено проблему надмірного повторного рендерингу в сучасних вебзастосунках, зокрема в React-додатках, яка призводить до зниження продуктивності та погіршення користувацького досвіду. Проаналізовано основні JavaScript-фреймворки (React, Vue, Angular) та їхні підходи до управління оновленнями DOM. Особливу увагу приділено механізмам віртуального DOM, примирення та алгоритмам дифінгу в React, а також проблемі непотрібних повторних рендерів компонентів.
Розроблено комплексний підхід до оптимізації процесу рендерингу вебзастосунків, розроблених на базі сучасного JavaScript-фреймворка, який враховує множинні фактори при прийнятті рішень про оновлення компонентів, що дозволяє мінімізувати повторні рендери та в цілому підвищити продуктивність усієї системи. Запропоновано модель пріоритизації для оптимізації повторного рендерингу, яка базується на оцінці видимості, важливості та вкладеності компонентів із використанням вагових коефіцієнтів. Модель дозволяє зменшити кількість непотрібних повторних рендерів, оптимізуючи використання обчислювальних ресурсів. Проведено порівняльний аналіз продуктивності з та без оптимізації, який показав зменшення середнього часу рендерингу (з 7,50 мс до 7,37 мс) та зниження пікового використання пам’яті (з 64 МБ до 61 МБ).
Переваги запропонованих результатів порівняно з існуючими методами, такими як React.memo чи useMemo, полягають у комплексному підході до пріоритизації, який враховує не лише залежності, а й контекст використання компонентів. Визначено перспективи адаптації моделі для інших фреймворків (Vue.js, Angular) та інтеграції з новими технологіями, такими як WebAssembly. Дослідження закладає основу для подальшого розвитку методів оптимізації рендерингу в вебзастосунках.
Посилання
Rippon C. Learn React with TypeScript. Packt Publishing, 2023. 474 р.
Agnihotri K., Dahale P. React Development using TypeScript: Modern web app development using advanced React techniques (English Edition). BPB Publications, 2024. 332 p.
Emmanni P.S. Comparative Analysis of Angular, React, and Vue.js in Single Page Application Development. International Journal of Science and Research. 2023. Vol. 12, Iss. 6. P. 2971-2974. URL: https://dx.doi.org/10.21275/SR24401230015
Kinfe K. Mastering 'useMemo' in React with TypeScript: 5 Different Use-Cases for 'useMemo'. DEV Community. URL: https://dev.to/kirubelkinfe/mastering-usememo-in-react-with-typescript-4-different-use-cases-for-usememo-5gal (дата звернення: 12.03.2025).
Ollila R., Makitalo N., Mikkonen T. Modern Web Frameworks: A Comparison of Rendering Performance. Journal of Web Engineering. 2022. Vol. 23, Iss. 3. P. 789–814. URL: https://doi.org/10.13052/jwe1540-9589.21311
Shah H. Server-Side Rendering vs Static Site Generation: Choosing the Right Approach for Your Next.js Project. DEV Community. URL: https://dev.to/shahharsh/server-side-rendering-vs-static-site-generation-choosing-the-right-approach-for-your-nextjs-project-39op (дата звернення: 12.03.2025).
Singh P., Srivastava M., Kansal M., Singh A.P., Chauhan A., Gaur A. A Comparative Analysis of Modern Frontend Frameworks for Building Large-Scale Web Applications. 2023 International Conference on Disruptive Technologies (ICDT). Greater Noida, India, 2023. P. 531-535. URL: https://doi.org/10.1109/ICDT57929.2023.10150911
Mrawen S. Mastering Advanced React: Strategies for Efficient Rendering and Re-Rendering. DEV Community. URL: https://dev.to/marwenshili/mastering-advanced-react-strategies-for-efficient-rendering-and-re-rendering-390p (дата звернення: 12.03.2025).
Morby G. ReRender a child component in Vue.js. DEV Community. URL: https://dev.to/grahammorby/rerender-a-child-component-in-vue-1462 (дата звернення: 12.03.2025).
Nishanthan K. Understanding Angular Rendering, Re-rendering, and Change Detection for Optimal Performance. DEV Community. URL: https://dev.to/nishanthan-k/understanding-angular-rendering-re-rendering-and-change-detection-for-optimal-performance-2dle (дата звернення: 12.03.2025).
Aslamiyah S. Implementation of the Kano Model and Importance and Performance Analysis in the Development of a Web-Based Knowledge Management System. Journal of Information Systems and Technology Research. 2022. Vol. 2, Iss. 1. P. 1–12. URL: https://doi.org/10.55537/jistr.v2i1.552