Asynchroniczność JS na stronie – jak działa?
3 min
3 min
Na skróty
Jeśli zaczynasz przygodę z JavaScript, prawdopodobnie spotkasz się z takim pojęciem jak asynchroniczność. Co to oznacza? Dlaczego mówi się, że kod JavaScript jest asynchroniczny? Czy ma to jakiekolwiek znaczenie z punktu widzenia użytkownika strony WWW?
Dzięki procesom asynchronicznym można tworzyć dynamiczne, szybko reagujące aplikacje. Standardowo JavaScript wykonuje operacje jedną po drugiej. W praktyce jednak zdarza się, że dane działanie nie może być zrealizowane od razu. Dzięki asynchroniczności kod będzie dalej wykonywany, a dana operacja pozostaje uruchomiona w tle.
Asynchroniczność jest przeciwieństwem synchroniczności. Znaczna część JavaScript działa właśnie synchronicznie, czyli przetwarzane są kolejne linijki kodu, jedna po drugiej. W praktyce język JavaScript nie jest asynchroniczny sam w sobie. Robi się taki dopiero po połączeniu z przeglądarką lub node.js (to środowisko uruchomieniowe do tworzenia aplikacji typu server-side napisanych w JavaScript).
Asynchroniczny kod pozwala budować płynnie działające aplikacje, ale też stanowi wyzwanie, gdyż trzeba zapanować nad kolejnością wykonywania asynchronicznych fragmentów. Jeśli kod jest synchroniczny i jakaś jego część wykonuje się dłużej, np. czytanie zawartości pliku, dalsza część kodu jest blokowana. To potrafi zamrozić ładowanie strony. Dzięki asynchroniczności możliwe jest wykonywanie kilku zadań równocześnie.
W JavaScript do obsługi asynchroniczności wykorzystuje się głównie obiekt Promise. Dzięki niemu można wykonać jakiś kod, by później odpowiednio zareagować na jego realizację. Zasadę działania tego obiektu obrazuje poniższa grafika. Tworzy się obietnicę i odpowiednio reaguje w zależności od jej zakończenia. Obiekt pozwala zrozumieć, co się dzieje aktualnie i co będzie mieć miejsce w przyszłości. To oznacza, że można określić, kiedy będą załadowane określone dane.
Obiekt Promise może występować w następujących stanach:
Prawdopodobnie zdarzyło Cię nie raz trafić na stronę WWW, która się zablokowała podczas ładowania skryptów JS. Dzięki asynchroniczności możliwe jest wykonywanie różnych operacji jednocześnie, dojdzie do przetwarzania kolejnych linijek kodu. To oznacza, że, np. czytanie zawartości pliku nie spowoduje, że dalsza część kodu zostanie zablokowana. Linijka dotycząca danego elementu może się znajdować wysoko, ale w wyniku działania kodu zostanie zrealizowana jako ostatnia. To nie oznacza, że program wykonywał je nie po kolei. Po prostu ta operacja zajęła najwięcej czasu, a wcześniej udało się wykonać inne. Dlatego została zakończona jako ostatnia, ale jej przetwarzanie rozpoczęło się przed innymi.
Asynchroniczne ładowanie skryptów JavaScript jest jednym ze sposobów na przyspieszenie witryny. Szczególnie dużą różnicę robi to w przypadku wykorzystywania na stronie skryptów znajdujących się na zdalnych serwerach – ich pobieranie może znacznie opóźniać ładowanie serwisu.
Dzięki asynchroniczności witryna może się ładować szybciej, co jest oczywiście pozytywne pod kątem SEO. To ma również wpływ na konwersję – internauci oczekują, że strona będzie ekspresowo do ich dyspozycji. Jeśli ładowanie się przycina, dojdzie do blokowania przeglądarki, trudno oczekiwać, aby wizyta zakończyła się zakupem.
Asynchroniczne ładowanie zasobów ma nie tylko zalety z punktu widzenia optymalizacji pod algorytm Google. Boty wyszukiwarki nie zawsze czekają na załadowanie wszystkich elementów. Dlatego należy używać atrybutów async i defer, aby kontrolować, jak ładowane i wykonywane są zasoby. Przeglądarka może dalej analizować kod witryny, kiedy ładuje się skrypt.
Przedsiębiorca związany z branżą SEO od 2004 roku. Tworzy content o tematyce marketingu online, finansów, nieruchomości i podróży. Rozwija własne serwisy tematyczne.
