Wydajność nowoczesnych frameworków JavaScript

Zaktualizowaliśmy ten tekst dla Ciebie!
Data aktualizacji: 18.12.2024
Autor aktualizacji: Mateusz Machnio

Wielu deweloperów, zaczynając budować kolejną aplikację JavaScript, nie myśli o ważnej rzeczy, jaką jest wydajność aplikacji internetowej. Zajmijmy się tym istotnym aspektem tworzenia oprogramowania.

Wprowadzenie

Społeczność JavaScript rośnie z dnia na dzień. Wiele osób używa frameworków na co dzień, aby przyspieszyć proces tworzenia aplikacji. Jednak wielu z nich nie myśli o dwóch ważnych kwestiach podczas budowy kolejnej aplikacji JavaScript – o bezpieczeństwie i wydajności. Zajmijmy się drugą z nich. Dodając framework do aplikacji, dodajemy sporo kodu, który będzie pobrany i wykonany w przeglądarce użytkownika. Powinniśmy być także świadomi faktu, że JavaScript wykonuje się asynchronicznie w przeglądarce, ale wykorzystuje tylko jeden proces. Czy powinienem używać frameworka?

To bardzo ważne pytanie, które każdy deweloper powinien zadać sobie przed stworzeniem nowej aplikacji, która korzysta z „dodatkowego” frameworka JavaScript. Wiele rzeczy można zrobić bez nich, co może zaoszczędzić mnóstwo zasobów i czasochłonnych obliczeń. Takie podejście, niestety, wymaga nieco więcej pracy od dewelopera przy projekcie.

Co z urządzeniami mobilnymi?

Deweloperzy powinni również wiedzieć, że liczba urządzeń mobilnych, takich jak telefony komórkowe, tablety, nadal rośnie, a aplikacje powinny być przyjazne dla urządzeń mobilnych. Chodzi tu nie tylko o projektowanie interfejsu, ale także o wydajność i rozmiar pobieranych danych – użytkownicy mogą mieć wolne połączenie 3G zamiast LTE czy Wi-Fi. Procesory w urządzeniach mobilnych zwykle nie są demonami prędkości. Duża ilość obliczeń (lub ponownych renderów) również szybko wyczerpuje baterię urządzenia.

Czas na testy

W tym artykule chcę porównać kilka popularnych frameworków, takich jak:

• VanillaJS ????
• AngularJS (1.6.7)
• Angular (19.0.5)
• React (18.0)
• Vue.js (3.5.13)

To są najpopularniejsze i najczęściej używane frameworki w momencie pisania artykułu. Chciałem znaleźć zadanie, które każdy z nich może wykonać. Wybrałem warstwę widoku. Będziemy mierzyć, jak szybko losowe dane są wyświetlane w tabeli oraz ogólny wpływ frameworka na czas ładowania strony. Do tego celu użyjemy specjalnej klasy, która wygeneruje tablicę z 5000 wierszy, zawierających 3 właściwości. Wygenerowane dane będą przetwarzane przez każdy z frameworków i wyświetlane w przeglądarce użytkownika. Do stylizacji użyjemy frameworka CSS – Twitter Bootstrap. Wszystkie testy można pobrać i uruchomić po ściągnięciu repozytorium: https://github.com/GrzegorzWziatek/speedTest

Vanilla.js

Ten test obejmuje przypadek, w którym deweloper nie używa żadnego frameworka. Aby rozpocząć test, otwórz pobrane repozytorium i wpisz:

cd vanillajs 

npm install 

npm start

Otwórz swoją przeglądarkę i przejdź do http://localhost:8080, test rozpocznie się po jednej sekundzie.

Całkowity rozmiar pobranych plików to 125 KB. Czas pełnego ładowania bez użycia cache wynosi około 800 ms. Tabela poniżej pokaże zebrane dane.

AngularJS (1.6.7)

Ten test obejmuje przypadek, w którym deweloper używa frameworka AngularJS. Aby rozpocząć test, otwórz pobrane repozytorium i wpisz:

cd angularjs
npm install
npm start

Otwórz swoją przeglądarkę i przejdź do http://localhost:8080, test rozpocznie się po jednej sekundzie.

Całkowity rozmiar pobranych plików to 292 KB. Czas pełnego ładowania bez użycia cache wynosi około 2000 ms. Tabela poniżej pokaże zebrane dane.

Angular 5.0.0

Ten test dotyczy przypadku, gdy deweloper używa frameworka Angular 5 (następcy AngularJS). Aby rozpocząć test, otwórz pobranie repozytorium i wpisz:

cd angular
npm install
npm run-script build
npm run-script start-prod

Otwórz swoją przeglądarkę i przejdź do http://localhost:8080, test rozpocznie się po jednej sekundzie.

Całkowity rozmiar pobranych plików to 331 KB. Całkowity czas ładowania bez cache wynosi około 350 ms. Tabela poniżej pokaże zebrane dane.

React (16.2.0)

Ten test obejmuje przypadek, gdy deweloper używa frameworka React. Aby uruchomić test, otwórz pobrane repozytorium i wykonaj następujące kroki:

cd reactjs
npm install
npm run-script build
npm run-script start-prod

Otwórz przeglądarkę i przejdź do http://localhost:8080, test rozpocznie się po jednej sekundzie.

Całkowity rozmiar pobranych plików wynosi 141 KB. Czas pełnego załadowania bez pamięci podręcznej to około 300 ms. Poniższa tabela pokaże zebrane dane.

VueJS 2.5.12

Ten test dotyczy sytuacji, gdy deweloper używa frameworka Vue.js. Aby rozpocząć test, otwórz pobrane repozytorium i wykonaj następujące kroki:

cd vue
npm install
npm start

Otwórz przeglądarkę i przejdź do http://localhost:8080, test rozpocznie się po jednej sekundzie.

Całkowity rozmiar pobranych plików wynosi 211 KB. Czas pełnego załadowania bez pamięci podręcznej to około 1100 ms. Poniższa tabela pokaże zebrane dane.

Podsumowanie

Teraz czas na podsumowanie naszego testu. Dwa frameworki (a może powinienem nazwać je bibliotekami?) React i Vue.js mają czasy bardzo zbliżone do testu wykonanego w czystym JavaScript. Można zauważyć jedną interesującą rzecz – czas regeneracji widoku (aktualizacji) w React był mniejszy niż w przypadku czystego JavaScript. Ten wynik osiągnięto dzięki implementacji Virtual DOM w React. Więcej o Virtual DOM można przeczytać tutaj: https://www.codecademy.com/articles/react-virtual-dom

Zauważamy również, że wydajność Angulara 5.0 w porównaniu do jego starszego brata AngularJS poprawiła się – czas ładowania znacząco się skrócił, podobnie jak inne wyniki.

Podczas testu zaobserwowaliśmy wpływ frameworków na wydajność aplikacji. Używanie frameworków ułatwia i przyspiesza kodowanie, ale ma swoją cenę. Frameworki to narzędzia, które są używane po to, aby nie pisać każdej aplikacji od podstaw.