CC BY
1
УДК 004.413
https://doi.Org/10.35546/kntu2078-4481.2023.3.12
ORCID: 0000-0002-5939-4484
Л. М. ОЛЕЩЕНКО
кандидат техшчних наук, доцент кафедри програмного забезпечення комп'ютерних систем Нацюнальний техшчний ушверситет Украши «Кшвський пол^ехшчний iнститут iменi 1горя Сшорського»
ORCID: 0000-0001-9908-7422
МЕТОД П1ДВИЩЕННЯ ПРОДУКТИВНОСТ1 ВЕБДОДАТКУ В ЕКОСИСТЕМ1 ФРЕЙМВОРКУ REACT
У cmammi розглянуто наявнi методи пiдвищення npodyxmuenocmi вебдодатку в eKocucmeMi фреймворку React, 1х переваги та недолЫи, зокрема, використання React.memo, PureComponent, shouldComponentUpdate, Lazy Loading, Code Splitting та мемоаацп селекmорiв. Запропоновано оптим1зований метод, який дозволяе скоротити час виконання програми в середньому на 17%. Основна iдея запропонованого методу полягае в роздшенн стану даних вебдодатку на атомарт фрагменти. Кожна суттсть мае свш власний фрагмент стану, що 1золюе його вiд тших. Ц фрагменти використовуються React Context API для передачi конф^урацИ суmносmi, включаючи данi та функцП для ii змти. Context API використовуеться для забезпечення обробки усШ програми. Стан роздi-ляеться на атомарш фрагменти, що дозволяе реал1зувати ix гзоляцт. За допомогою функцП hook отримуеться доступ до цих фрагменmiв та ix змти. Компоненти, як використовують цей метод, автоматично реагують на змти стану i оновлюються, якщо стан змтився. Головною перевагою такого пiдxоду е можливiсmь використання технологи замикання та передавання функцП обробниюв стану. Запропонований метод базуеться на пiдxодi, який було запозичено з бiблiоmеки Recoil. Цей пiдxiд е схожим на стандарты функцП-хуки у фреймворку React, для якого було розроблено запропонований метод. Було використано переваги та недолжи використання попу-лярних бiблiоmек для керування станом у вебдодатках. Метою модифжацП було уникнення надмiрниx операцш, коли поточний та новий стани не вiдрiзняюmься, покращення продукmивносmi при додаваннi велико1 кiлькосmi елеменmiв та забезпечення можливосmi використання схожих частин коду багаторазово. Особливу увагу придi-лено проблемi надмiрниx операцш, як виникають, коли ва компоненти, що тдписаю на змту стану, автоматично оновлюються, навimь якщо самi значення стану не змтились. Додано можливiсmь перевiрки рiвносmi статв перед 1х оновленням, що дозволяе заощадити ресурси та зберегти продуктивнкть. Такожреализовано спрощено роботу з функщями змти стану, щоб 1х можна було знову використовувати без повторення коду.
Ключовi слова: методи тдвищення продукmивносmi вебдодатюв, екосистема фреймворку React, Context API, PureComponent, React.memo, shouldComponentUpdate, Redux, Recoil, Lazy Loading, Code Splitting, мемоiзацiя селекmорiв, концепцiя керування станом.
The article describes the available methods for improving the performance of a web application in the React framework ecosystem, their advantages and disadvantages, in particular, the use of React.memo, PureComponent, shouldComponentUpdate, Lazy Loading, Code Splitting and memoization of selectors. An optimized method is proposed,
P. V. BURCHAK
Postgraduate Student at the Computer Systems Software Department National Technical University of Ukraine "Igor Sikorsky Kyiv Polytechnic Institute" ORCID: 0000-0002-5939-4484
L. М. OLESHCHENKO
Candidate of Technical Sciences,
Associate Professor at the Computer Systems Software Department National Technical University of Ukraine "Igor Sikorsky Kyiv Polytechnic Institute" ORCID: 0000-0001-9908-7422
METHOD FOR INCREASING THE PERFORMANCE OF A WEB APPLICATION IN THE REACT FRAMEWORK ECOSYSTEM
which allows to reduce the program execution time by an average of 17%. The main idea of the proposed method is to divide the state into atomic fragments. Each entity has its own state fragment that isolates it from others. These fragments are used by the React Context API to pass entity configuration, including data and functions to modify it. The Context API is used to provide stateful application-wide handling. The state is divided into atomic fragments, which allows their isolation. These fragments are accessed and modified using the hook function. Components that use this method automatically respond to state changes and are updated if the state has changed. The main advantage of this approach is the possibility of using the closing technology and transferring the function of state handlers. The proposed method is based on an approach that was borrowed from the Recoil library. This approach is similar to the standard hook functions in the React framework, for which the proposed method was developed. The advantages and disadvantages of using popular state management libraries in web applications were discussed. The goal of the modification was to avoid redundant operations when the current and new states are indistinguishable, to improve performance when adding large numbers of items, and to allow similar parts of the code to be used multiple times. Special attention is paid to the problem of redundant operations, which occurs when all components subscribed to a state change are automatically updated, even if the state values themselves have not changed. Added the ability to check the equality of states before updating them, which allows to save resources and preserve performance. Also implemented simplified handling of state change functions so that they can be used again without repeating code.
Key words: methods to improve performance of web applications, React framework ecosystem, React, Context API, PureComponent, React.memo, shouldComponentUpdate, Redux, Recoil, Lazy Loading, Code Splitting, memoization of selectors, concept of state management.
Постановка проблеми
Шдвищення продуктивносп вебдодатшв в eKOCTcreMi фреймворку React супроводжуеться рiзними проблемами i викликами, особливо в комплексних або великих додатках. Наприклад, React може виконувати реренде-ринг компоненпв, навиъ якщо !хш властивосп не змшилися. Це може призвести до зайвих витрат часу на обчис-лення i малопродуктивно! роботи вебдодатку. У великих додатках юльшсть компоненпв та елеменпв DOM може бути дуже великою, що призводить до пов№ного рендерингу та завантаження сторшок. Велика кшьшсгь обчис-ленъ або машпуляцш з DOM може блокувати основний попк браузера, що призводить до ввдчутного збою продуктивность Також неошгашзований стан компоненпв або надмiрне використання властивостей (props) можуть призвести до зайвого ререндерингу та обчислювальних операцш. Не оптимiзованi мережевi запити або надмiрна мережева взаемодiя можуть впливати на продуктившсть додатка та збшьшувати час завантаження. Некоректно налаштоваш компоненти, як зациклюються у безшнечних рендерах, можуть спричинити збо! в робоп додатка та сповшьнити його роботу. Використання неоптимiзованих запипв до локального сховища даних, такого як Redux, може призвести до надмiрного оновлення стану. Завантаження великих обсяпв даних на ктентську частину вебдодатку також може збшьшити час завантаження сторшки i затримати вщгук додатка. Зайве використання пам'ят може також спричинити зм^ використання дискового простору та вплинути на продуктившсть. Не оптимiзованi CTrai i макети також можуть призвести до повшьного рендерингу i зб№шити час завантаження.
Метою статт е дослвдження наявних метсдов програмно! оптишзаци продуктивносп вебдодатшв в екосис-темi фреймворку React та пропозищя модифжованого методу, який дозволить скоротити час виконання програми у порiвняннi наявними аналогами.
Програмш методи имвищення продуктивное^ вебдодатшв в eraraereMi фреймворку React
Загальною метою оптишзаци продуктивносп вебзастосуншв в React е забезпечення плавно! та ефективно! роботи додатка для користувачiв та зменшення витрат ресурав. Оптимiзацiя продуктивносп вебдодатшв в еко-системi фреймворку React включае в себе рiзнi аспекти розробки, щоб забезпечити швидку та ефективну роботу додатка.
Розглянемо вiдомi програмш методи оптимiзацi! продуктивностi вебдодатк1в в екосистемi фреймворку React.
Метод React.memo та його аналог для класових компоненпв - клас PureComponent використовуються для уникнення зайвого перерендерингу компоненпв, якщо !х властивостi не змшилися. Це зменшуе витрати на рендеринг та покращуе продуктивнiстъ. Складш обчислення, як1 не змiнюютъся тд час рендерингу, можна винести за меж1 рендер-методу i кешувати !х результати для зменшення навантаження. Використання клкшв при рендерингу списшв допомагае React iдентифiкувати компоненти i ефективно оновлювати !х при змш порядку чи кiлъкостi елементiв.
Приклад коду використання React.memo:
import React from 'react';
const MyComponent = React.memo(function MyComponent(props) { /* код компонента */
});
Оптимьзащя ререндерингу компоненmiв здшснюеться завдяки використанню методiв shouldComponentUpdate, memo, або Hooks useMemo i useCallback для керування повторного рендерингу компоненпв.
Метод shouldComponentUpdate е одним i3 методiв життевого циклу компонента в React, що дозволяе розроб-нику контролювати здiйснення оновлення компонента тсля змiни стану або пропав. Розробник може визначити власнi умови, за якими компонент повинен оновлюватися, i повернути true, якщо оновлення потрiбно, або false, якщо оновлення не потрiбно. Сигнатура методу shouldComponentUpdate виглядае так:
shouldComponentUpdate(nextProps, nextState)
nextProps - це новi властивостi, як компонент отримае пiсля оновлення;
nextState - це новий стан компонента, який буде встановлений тсля оновлення.
Метод shouldComponentUpdate повинен повертати булеве значення (true або false). Якщо вш повертае true, то компонент буде оновлено. Якщо вш повертае false, то компонент залишиться без змш. Основними випадками вико-ристання shouldComponentUpdate е оптимiзацiя оновлень компонента, зменшення навантаження та заборона онов-лень певних компонентiв.Розробник вебдодатку може перевiряти, чи дiйсно ввдбулися змши в станi або пропсах, яш вплинуть на рендер компонента, i виключити зайвi оновлення. Це особливо корисно для великих компоненпв або в раз^ коли розробник знае, що змши не вплинуть на ввдображення. Розробник може зменшити юльюсть зайвих рендерiв i оновлень, що пол1пшить продуктивнiсть додатка. Наприклад, можна перевiряти, чи справдi змiнилися лише певт пропси перед тим, як рендерити компонент. Також можуть бути певш компоненти, як1 не повинш оновлюватися пiсля змiн стану або пропав. За допомогою shouldComponentUpdate можна гарантувати, що щ компоненти залишаються сталими. Приклад використання shouldComponentUpdate для ошгашзаци оновлень компонента:
import React, { Component } from 'react';
class MyComponent extends Component {
shouldComponentUpdate(nextProps, nextState) { // nopiBHweMO попереднi i HOBi пропси або стан if (this.props.someProp === nextProps.someProp) {
return false; // Не n0Tpi6H0 оновлювати, якщо "someProp" залишилось незмiнним
}
return true; // Оновлювати, якщо e iншi зм^и
}
render() {
// Рендер компонента
}
}
Зауважимо, що shouldComponentUpdate - це метод оптимiзацil, який необхвдно обережно використовувати, оскшьки невiрне визначення умови оновлення може призвести до неправильно! роботи компонента. Також в сучасних вер^х React можна використовувати HookReact.memo для досягнення подiбного ефекту для функць ональних компонентiв.
Використання Lazy Loading i Code Splitting: роздшення програмного коду на меншi фрагменти та 1х «лшиве завантаження» (lazy loading) допомагае зменшити час завантаження додатка i пiдвищити продуктивнiсть. Використання кешування, HTTP/2, та багатопоточних запитiв також дозволяе покращити швидк1сть завантаження даних з сервера. Використання SSR (Server-Side Rendering) або SSG (Static Site Generation) може покращити швидшсть завантаження сторшок, особливо на стартових сторшках.
Використання реактивних сmилiв i оптимгзованих CSS забезпечуе мiнiмiзацiю витрат на машпулювання DOM i використання оптимiзованих CSS пiдходiв, таких як CSS-in-JS або PostCSS.
Мемоiзацiя селекmорiв (або мемоiзованi селектори) - це техшка оптишзаци в управлшш станом i витягуваннi даних зi стану в екосистемi фреймворку React та бiблiотеках керування станом, таких як Redux або Reselect. Використання бiблiотеки Reselect допомагае мемоiзувати результата селекторiв, як1 використовуються для вибору частин стану. Селектори - це функци, якi використовуються для вибору i обробки даних зi стану, яш потiм використовуються в компонентах React для рендерингу. Мемоiзацiя селекторiв полягае в збереженнi результатiв виклишв селектора для певних вхiдних даних та повторного використання цих результата при подальших викли-ках селектора з тими самими вхщними даними. Це дозволяе уникнути повторних i обчислювально дорогих обчис-лень та зменшити зайвi оновлення компонентiв. Reselect надае функци createSelector, яка автоматично мемоiзуе результати селекторiв i використовуе 1х для оптимiзацil вибiрки даних зi стану.
Приклад використання MeM0i30BaH0r0 селектора за допомогою Reselect:
import { createSelector } from 'reselect';
const selectData = (state) => state.data;
const memoizedSelector = createSelector( [selectData], (data) => {
// Обчислення результату на ocHOBi вибраних даних return /* результат */;
}
);
Хоча мемоiзaцiя селекторiв мае сво! недолiки i обмеження, вона залишаеться корисною технiкою для оптимь зацп продуктивностi додатшв React 3i складним станом i великою кiлькiстю даних.
Оптимгзацгя стану i Redux: якщо для розроблення програмного забезпечення використовуеться Redux, потрiбно використовувати так1 бiблiотеки, як Reselect i Redux Toolkit, яш суттево пiдвищують продуктивнiсть роботи вебдодатку.
Використання Web Workers забезпечуе виконання обчислень в окремому потоцi, що не блокуе основний потiк браузера i покращуе реaктивнiсть додатка.
Таблиця 1
Порiвняння поширених програмних методiв пщвищення продуктивностi вебдодаткiв
в екосистемi фреймворку React
Програмний метод Переваги методу Недолжи методу
Використання React. memo i PureComponent 1. Не потр1бно додаткового коду для визначення умови оновлення компонента. 2. Зменшення навантаження, уникнення зайвих оновлень компонента шд час !хнього рендерингу, що може покращити продуктивнкть. 1.Оптимiзацiя не завжди потрiбна: не ва компоненти мають навантаження, яке варто опгашзувати. 2. Iнодi можуть залишитися сценари, де вiдбуваються зайвi оновлення.
Використання shouldComponentUpdate 1. Можливкть точного керування оновленнями компонента. 2. Можливкть оптим1зувати др1бш оновлення. 1. Вимагае бiльше коду та явно! реатзаци методу. shouldComponentUpdate. 2. Може стати складним при робот! з великими компонентами.
Використання 51льш др1бних компонентiв 1. Збер1гае код бшьш структурованим i шдтримуваним. 2. Може сприяти реюзабельност компонента. Додаткова складшсть управлшня багатьма компонентами.
Використання Redux або MobX 1. Централ1зований стан, який забезпечуе одноразове джерело true для стану додатка. 2. Прозоркть i вщстежуванкть змш стану. 3. Зручне керування великими додатками. 1. Додатковий шар складносп, який вимагае додаткового коду для визначення дш та редюсерiв. 2. Може бути зайвим для невеликих додатюв.
Мемоiзацiя селекторiв 1. Покращення продуктивност завдяки уникненню повторних обчислень селектор1в при тих самих вхщних даних. 2. Зменшення навантаження: завдяки використанню мемо1зованих селектор1в зменшуеться кшьккть зайвих рендер1в компонента, оскшьки результати селектор1в залишаються сталими, якщо вхщш даш не змшилися. 3. Збереження стабшьносп: завдяки мемоiзaцil можна бути впевненим, що результати селектор1в завжди залишаються незмшними для одних i тих самих даних. 4. Зменшення витрат ресурав: заощадження ресурс1в обчислення, оскшьки мемо1зоваш селектори не потребують зайвих обчислень при однакових вхщних даних. 1.Складшсть реатзаци. 2. Додаткова пам'ять. 3. Можливкть появи помилок: неправильне використання мемоiзацil селекторiв може призвести до неправильно! роботи додатка. Невiрно визначена умова мемоiзацi! може призвести до неправильно! кешування результата. 4. Додатковий код: впровадження мемоiзацi! вимагае додаткового коду для визначення i кешування результата селекторiв, що може робити код складшшим i менш зрозумiлим. 5. Обмеженкть використання: мемоiзацiя селекторiв корисна в основному для оптимiзацi! виборки даних зi стану. Не допомагае уникати шших видiв оновлень компонентiв, таких як оновлення через змшу пропсiв.
Керування локальним станом даних вебдодатку в екосистемi фреймворку React е важливим аспектом розробки для досягнення збереження стану вебдодатка та оновлення iнтерфейсу користувача. Керування станом дозволяе збертати та оновлювати даш, як1 використовуються в вебдодатку. Це може бути шформащя, введена користувачем, стан компонентiв тощо. Змiнa стану вебдодатка спричиняе оновлення iнтерфейсу користувача. Вебдодаток може реагувати на ди користувача, поди в системi або змiни в мереж! шляхом оновлення ввдображення на вебсторiнцi.
React дозволяе створювати реактивш додатки, де змша стану автоматично спричиняе оновлення вiдображення. Це полегшуе розробку додатк1в, якi реагують на змiни в реальному чай. Керування станом допомагае уникнути розповсюдження одних i тих же даних по всьому додатку. Розробник може створити одну централiзовану точку керування станом i забезпечити l'i единим джерелом truth для даних. Керування станом дозволяе розробнику збе-ртати стан додатка мгж сеансами роботи користувача. Це корисно для збереження налаштувань, даних авториза-цй' та шшо! шформацп.
Централiзоване керування станом робить код б№ш пiдтримуваним i зручним у тестуванш. Розробник може окремо тестувати редюсери, дй' та компоненти, яш використовують стан. Керування станом в React також допомагае розробнику впроваджувати iншi архггектурш патерни, так1 як Flux, Redux, MobX, для бшьшо! оргашзацп i керування станом. У React та екосистемi його фреймворшв, таких як Redux або MobX, керування локальним станом даних зазвичай вщбуваеться через використання станових змiнних (state), редюсерiв (reducers), дiй (actions) та властивостей (props).
Розглянемо загальну концепцш керування станом в React.
Становi 3míhhí (State) визначаються у компонентах за допомогою методу useState (для функцюнальних компо-нентiв) або через властивють state у класових компонентах. Наприклад:
// Функцiональний компонент з використанням useState import React, { useState } from 'react'; function Counter() {
const [count, setCount] = useState(0); const increment = () => { setCount(count + 1);
};
return ( <div>
<p>Лiчильник: {count}</p>
<button onClick={increment}>Збiльшити</button> </div>
);
}
У класових компонентах:
import React, { Component } from 'react'; class Counter extends Component { constructor() { super(); this.state = { count: 0,
};
}
increment() {
this.setState({ count: this.state.count + 1 });
}
render() { return ( <div>
<p>Лiчильник: {this.state.count}</p>
<button onClick={() => this.increment()}>Збiльшити</button> </div>
);
}
}
ДИ (Actions) - це об'екти, як1 вказують, яким чином потрiбно змiнити стан. У Redux, прикладi фреймворку для керування станом, це може виглядати так:
// Дiя (action) для зб!льшення значення лiчильника const incrementAction = { type: 'INCREMENT',
};
Редюсери (Reducers) визначають, яким чином стан додатка мае змшитися на основ! дш. У Redux це може виглядати так:
// Редюсер для зб!льшення значення лiчильника const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT':
return state + 1; default:
return state;
}
};
Store (Сховище) - об'ект, у якому збертаеться увесь стан вебдодатка. Цей об'ект мютить стан, редюсери i може виглядати так:
import { createStore } from 'redux'; const store = createStore(counterReducer);
Для передач! даних м1ж батьшвськими i доч!ршми компонентами використовуються власmивосmi (props). Наприклад:
// Передача стану через властив^ть <ChildComponent count={count} />
Це загальна концепщя керування станом в React. Конкретний метод та шдхвд може варшватися в залежносп в!д фреймворку або б!блютеки для керування станом (наприклад, Redux, MobX, тощо), як1 використовуються, а також вщ потреб та функцюнальносп конкретного вебдодатка.
Аналiз останшх дослiджень та публiкацiй Метою роботи [1] е анал!з популярно! б!блютеки керування станом Redux. У цш робот! представлено метод React Hooks, який продемонстрував деяш покращення продуктивносл вебдодатшв. Дан! результати дослщження були вим!ряш в шструменп для вим!рювання продуктивносп Google Chrome Dev Tools. У робот! [2] продук-тившсть б!блютеки Redux вим!рювалася та пор!внювалася з методом React Context API. Незважаючи на те, що б!блютека Redux проста у використанш, вона демонструе значш проблеми з продуктивною п!д час роботи з об'ектами великих даних. Також було детально проанал!зовано тдхвд хук1в, що тдтверджуе його масшта-бовашсть. Дослвдження [3-8] мютять огляд б!блютек та фреймворшв для розробки сучасних вебдодатшв. Для пор!вняння розглянутих б!блютек JavaScript було обрано дек1лька базових метрик - час виконання методу управ-лшня станом для одинищ роботи та придатшсть для використання розробником. Для пор!вняння результата про-дуктивносп вебдодатшв було використано шструменти Google Chrome Lighthouse та Sonarqube. Загалом у розглянутих публжащях не описано методи оптим!заци часу доступу до даних вебдодатку та !х змш, що впливае на продуктившсть вебдодатку, тому дослвдження оптим!зацп управлшня даними локального стану вебдодатку е актуальним завданням.
Запропонований метод пiдвищення продуктивное™ вебдодатку в екосистемi фреймворку React
Основна щея запропонованого методу полягае в роздшенш стану на атомарш фрагменти. Кожна сутшсть мае свш власний фрагмент стану, що !золюе його в!д шших. Ц фрагменти використовуються Context API для передач! даних сутносп, включаючи функци для !х змши (рис. 1).
Функщя hook надае доступ до цього фрагмента, забезпечуе взаемодш з даними та внесення змш. Програмний штерфейс може бути р!зним, оск1льки конфцуращя фрагмента стану задаеться тд час його створення.
Рис. 1. Схема алгоритму запропонованого методу
Context API використовуеться для забезпечення роботи 3i станом у всьому вебдодатку. Стан роздметься на атомарш фрагменти, що дозволяе здiйснювати ïx iзоляцiю. За допомогою функцп hook ми отримуемо доступ до цих фpaгментiв та можемо змiнювaти ïx. Компоненти, яш використовують цей метод, автоматично реагують на змiни стану i оновлюються, якщо стан дiйсно змiнився. Ми також додали оптимiзaцiï, щоб уникнути зайвих опеpaцiй, якщо стан не змшився, i спростили роботу з функц1ями змiни стану, що дозволяе ïx багаторазове вико-ристання без дублювання коду.
Для створення фрагмента стану використовуеться функцiя create:
interface create = (storeConfig) => useStoreHook;
Синтаксис (storeConfig) => useStoreHook означае, що функщя використовуе параметр типу storeConfig та повертае значення useStoreHook.
1нтерфейс функцiй створення стану:
interface create = (storeConfig) => useStoreHook;
interface storeConfig = (
set: (any) => void,
get?: (void) => any)
=> (stateConfig :Record<string, any>);
interface useStoreHook =
(selector: (any) => object) => (stateConfig: Record<string, any>);
Тип any - будь-який тип, Record<string, any> - об'ект з парами ключ-значення, рядок та будь-який тип вщпо-вщно. Методи set та get можуть бути викликанi при конфiгурацiï для наступного використання значення полiв та для шдрахунку певних значень у функщях. Метод create виконуе двi функцiï: задае початкове значення стану та описуе функци, що виконують операци над даними стану. Згенеровану методом функцiю-хук useStore викорис-тано як спосiб отримання даних стану безпосередньо для застосування у користувацькому iнтерфейсi. Головною перевагою такого шдходу е можливiсть використання технологiï замикання та передавання функцiï обробник1в стану. Запропонований метод загалом базуеться на пвдхода, який було запозичено з бiблiотеки Recoil. Цей пiдхiд е схожим на стандартш функцiï-хуки у фреймворку React, для якого було розроблено запропонований метод. Ми вдосконалили його, порiвнюючи з шшими популярними бiблiотеками для керування станом у вебзастосунках. Метою було уникнення надмiрних операцiй, коли поточний та новий стани не вiдрiзняються, покращити продуктившсть при додаванш велико1' шлькосп елементiв та забезпечити можливiсть використання схожих частин коду багаторазово. Шд час розробки оптимiзованого методу було також враховано недолiки iнших пiдходiв. Особливу увагу придiлено проблемi надмiрних операцiй, якi виникають, коли вс компоненти, що пiдписанi на зм^ стану, автоматично оновлюються, навiть якщо самi значення стану не змшились. Було додано можливiсть перевiрки рiвностi станiв перед 1'х оновленням, що дозволяе заощадити ресурси та зберегти продуктивнiсть. Також було спрощено роботу з функщями змiни стану, щоб 1'х можна було використовувати знову без повторення коду.
Результати дослщження
Для дослiдження та порiвняння програмних методiв були обранi бiблiотеки Redux, MobXState-Tree, Recoil. Аналiз методiв виконано за допомогою утилiти SonarQube. Для оцшки результiв дослщження використано браузер Google Chrome та утилгга DevTools. Для розробки клiентськоï частини програмного забезпечення та проведения дослщження була обрана мова JavaScript для створення скриппв вебсторiнок, яка надае можливiсть на сторонi ктента взаемод1яти з користувачем, керувати браузером, а також асинхронно обмшюватися даними з сервером, змiнювати структуру та зовшшнш вигляд вебсторiнки. Для спрощення процесу налаштування та розробки вебдодатку була обрана бiблiотека React через ïï сумiснiсть з обраними бiблiотеками та наявнiсть React Dev Tools для вимiрювання часу програмних методiв та оцiнки якостi хх роботи. Для оцiнки швидкодiï програмних методiв використовувався веббраузер Google Chrome для вимiрювання часу роботи вебдодатку за певний перюд часу та перегляду дiаграм розподiлу часу роботи додатка для конкретних дш, таких як рендеринг, системш операцiï та програмний код виконання. Враховуючи описаш вимоги, у програмному забезпеченнi було створено умови для того, щоб кожен iз обраних для дослщження методiв використовувався в бiблiотеках i демонструвалась !х робота на основi певних даних. Основною вимогою до програмного забезпечення, що надае виведення в графiчний iнтерфейс користувача результапв роботи рiзних методiв даного дослщження була пщтримка Google Chrome 95+, React 17+ та Node 16+. Для порiвняння точности методи використовувались в однакових умовах, були оброблеш однаковi данi та вiдповiдно до !х кiлькостi, над даними також були виконанi однаковi дiï: додавання сегментiв даних, редагування, видалення.
Щоб оцiнити час роботи метсдав, як1 працюють над локальним станом даних вебдодатку, було використано великий обсяг даних (до 100 000 елеменпв), даш вiдповiдають структурi масиву з великою кiлькiстю елемен-тiв. Апаратне забезпечення, яке використовувалось для проведенш дослiдження: MacBook Pro, процесор 2 GHz Quad-Core Intel Core i5, Intel Iris Plus Graphics 1536 MB, 16 GB пам'яп 3733 MHz LPDDR4X. Операцшна система - macOS Ventura 13.0.1. Програмне забезпечення: Google Chrome 108, React v18.0.1, Node v16.13.1. На при-кладi використання бiблiотеки Redux збiльшення часу виконання непропорцшно зростае зi збiльшенням кiлькостi елеменпв.
При збiльшеннi кiлькостi елементiв до 100 000 результат бiблiотеки MobX був отриманий майже за 250 секунд, що в 3 рази повшьшше аналопв. Бiблiотеки Redux i Recoil показують приблизно однаковi результати за ~80 секунд, що потребуе покращення. Аналiзуючи данi, отриманi пщ час тестування швидкостi додавання елеменпв, можна зробити висновок, що бiблiотеки Redux i Recoil показують кращi результати при додаванш
бшьшо! шлькосп елеменпв. Було порiвняно продуктивнiсть рiзних програмних методiв та продуктивнiсть запропонованого ошгашзованого методу. Запропонована оптимiзацiя, яка мiнiмiзуе залежнiсть ввд стороннiх бiблiотек, дае кращi результати пвд час додавання елементiв до масиву порiвняно з iншими методами. Однак при великш кiлькостi елементiв покращення е незначним. При скиданш до порожнього масиву запропонований метод займае 3844 мс для простих даних i 3979 мс для складних даних. У вйх сценарiях тестування швидкосп запропонований метод перевершуе альтернативи, особливо пвд час додавання або редагування елементiв масиву. Незалежно вiд розмiру масиву, запропонований метод незмiнно перевершуе конкуренпв, маючи перевагу на 12% для 1000 елеменпв, 16% для 5000 i 18% для 10 000 елеменпв. Це демонструе стабшьшсть i масштабованють запропонованого методу. Порiвнюючи популярш бiблiотеки, було виявлено, що MobX чудово справляеться з невеликими наборами даних, але мае труднощi тд час бiльшого навантаження. Навпаки, Redux зберiгае стабiльну продуктившсть у рiз-них тестах.
Висновки та подальша робота
У статтi розглянуто наявш методи пiдвищення продуктивностi вебдодатку в екосистемi фреймворку React, 1'х переваги та недол^, зокрема, використання React.memo, shouldComponentUpdate, Lazy Loading, Code Splitting та мемоiзацil селекторiв. Запропоновано модифшэваний метод керування локальним станом даних вебдодатшв для створення додатк1в в екосистемi фреймворку React, що дозволяе скоротити час виконання програми в середньому на 17%, порiвнюючи кожен зi сценарпв тестування методу. Осшльки запропоний метод показав кращi результати, н1ж популярнi iснуючi рiшення вщносно часу виконання програми, можна сказати, що мета дослвдження була досягнута. Аналiз програмних методiв та оцшку якостi ввдсканованого коду виконувався за допомогою утилгга SonarQube. Для аналiзу та оцiнки результатiв розглянутих методiв використовувалася утилiта браузера Google Chrome DevTools. Дослiдження робить деяк1 висновки щодо варiантiв використання к1лькох популярних рiшень. Наприклад, використання бiблiотеки Recoil у бшьшосп випадкiв показуе продуктившсть навиъ кращу, шж за використання шших бiблiотеки. Крiм того, подальший розвиток i вдосконалення оптимiзованого методу може стати достатньо зршим для комерцшного використання та перевершити поточш рiшення.
Подальшi напрями дослвдження - це аналiз складностi програмних методiв з використанням метрик циклома-тично! та когштивно1 складностi, аналiз кожного файлу, пов'язаного з використанням бiблiотечних iнструментiв, тестування даних метрик за допомогою запропонованого методу. Крiм того, подальше дослщження в цiй галузi також включае в себе б№ш глибокий аналiз iнших популярних програмних ршень i тестових випадк1в для них. У майбутньому на основi отриманих результатiв, якщо буде доведено ефектившсть запропонованого методу для бшьшосп випадюв, метод можна буде опубл^вати як бiблiотеку для загального користування.
Список використаноТ лiтератури
1. Pronina D., Kyrychenko I. (2022) Comparison of Redux and React Hooks Methods in Terms of Performance.
COLINS-2022: 6th International Conference on Computational Linguistics and Intelligent Systems, May 12-13, Gliwice, Poland, pp. 3-7.
2. Shailesh Shivakumar, P.V. Suresh (2018) A Survey and Analysis of Techniques and Tools for Web Performance Optimization, Journal of Information Organization, Vol. 8, No. 2, pp. 31-57.
3. Chi, Xiaoni, Liu, Bichuan, Niu, Qi, Wu, Qiuxuan (2012) Web Load Balance and Cache Optimization Design Based Nginx under High-Concurrency Environment, Third International Conference on Digital Manufacturing & Automation, pp. 1029-1032.
4. Yanan Wang, Huarui Wu and Feng Huang (2014) High-performance concurrent Web application system analysis and research, Computer Engineering and Design Optimization, vol. 08, pp. 2976-2981.
5. Y. Yao and J. Xia (2016) Analysis and research on the performance optimization of Web application system in high concurrency environment, 2016 IEEE Information Technology, Networking, Electronic and Automation Control Conference, pp. 321-326, doi: 10.1109/ITNEC.2016.7560374.
6. Mohammed Zagane, Mustapha Kamel Abdi (2019) Evaluating and Comparing Size, Complexity and Coupling Metrics as Web Applications Vulnerabilities Predictors. International Journal of Information Technology and Computer Science (IJITCS), Vol.11, No.7, pp.35-42, DOI: 10.5815/ijitcs.2019.07.05
7. Ruqia Bibi, Munazza Jannisar, Mamoona Inayet (2016) Quality Implication for Prognoses Success in Web Applications. IJMECS, Vol.8, No.3, pp.37-44, DOI: 10.5815/ijmecs.2016.03.05
8. Oleshchenko, L., Burchak, P. (2023) Web Application State Management Performance Optimization Methods. In: Hu, Z., Dychka, I., He, M. (eds) Advances in Computer Science for Engineering and Education VI. ICCSEEA 2023. Lecture Notes on Data Engineering and Communications Technologies, vol. 181. Springer, Cham. https://doi.org/10.1007/978-3-031-36118-0 6
