Вирішення проблеми часткового оновлення вмісту вебсторінки через оптимізацію параметрів SPA

DOI: 10.31673/2412-9070.2023.060812

Анотація

Досвід останніх років показав, що кількість активних вебзастосунків, розроблених відповідно до засадницьких принципів функціонування односторінкових застосунків, продовжує неухильно зростати попри зменшення кількості новостворених. Це свідчить про зміщення фокусу з важливості розроблення заново на потребу в підтриманні, обслуговуванні та оптимізації вже наявного кінцевого продукту. До того ж, із розвитком та вдосконаленням технологій веброзроблення зростають потенційні очікування користувачів та виникає потреба забезпечення гідного користувацького досвіду та підвищення конкурентоспроможності застосунків. Неабияку роль при цьому відіграє процес часткового оновлення вмісту вебсторінки, що широко застосовується під час розроблення односторінкових застосунків.
Більшість сучасних JavaScript фреймворків, призначених для клієнтської веброзробки послуговуються технікою за принципом «out-of-box», надаючи в такий спосіб розробнику цілковиту повноту прийняття рішень щодо підходів її застосування. Однак автоматичне використання механізму оновлення вмісту вебсторінки не гарантує бажаних результатів, а призводить лише до середньо-статистичних, а подекуди незадовільних значень, яких можна було б уникнути.
У статті подано аналіз особливостей впливу параметрів продуктивності односторінкового вебзастосунку, розглянуто альтернативні методи розв’язання поставленої задачі, досліджено потенційні «проблемні» місця клієнтської частини застосунків, проведено порівняння функціонування механізмів оновлення вмісту вебсторінки найбільш популярних JavaScript фреймворків Angular та React.js, а також сформовано рекомендації для оптимізації роботи застосунку загалом.
Наприкінці наведено таблиці показників Core Web Vitals для оцінювання ефективності проведеної оптимізації. Запропоновано потенційні вектори подальших досліджень.

Ключові слова: часткове оновлення вмісту вебсторінки; односторінковий вебзастосунок; параметри оптимізації вебзастосунку; клієнтська веброзробка; бібліотека React.js; фреймворк Angular.