Poznanie typów skryptów asynchronicznych, odraczających i dynamicznych.
W dzisiejszych czasach skrypty mogą być cięższe niż HTML i ich rozmiar pobierania jest większy, i czas przetwarzania też jest dłuższy.
Ale mogą wystąpić pewne ważne problemy, takie jak:
- Skrypty nie widzą elementów DOM znajdujących się pod nimi
- Jeśli na górze strony znajduje się nieporęczny skrypt, „blokuje on stronę”. Użytkownicy nie widzą zawartości strony dopóki skrypt nie zostanie pobrany i uruchomiony.
Możemy rozwiązać ten problem umieszczając skrypt na końcu (po html), ale to rozwiązanie zmusi skrypt do załadowania się po załadowaniu się html. Dla długich dokumentów HTML, może to być zauważalne opóźnienie, jeśli ludzie mają wolny internet.
Na szczęście istnieją dwa atrybuty <script>, które rozwiązują ten problem dla nas: defer i async.
Z atrybutem defer przeglądarka ładuje skrypt w trybie 'background’ i uruchamia go po załadowaniu.
Tryb defer zapobiega więc blokowaniu strony, a skrypty z atrybutem defer wykonują się zawsze wtedy, gdy DOM jest gotowy, ale przed zdarzeniem DOMContentLoaded.
Zdarzenie DOMContentLoaded jest wywoływane, gdy początkowy dokument HTML został całkowicie załadowany i przetworzony, bez czekania na arkusze stylów, obrazy i podramki do zakończenia ładowania.
Skrypty odroczone zachowują swoją względną kolejność, tak jak zwykłe skrypty. Jeśli więc mamy najpierw długi skrypt, a potem mniejszy, to ten drugi czeka.
Ale atrybut defer jest ignorowany, jeśli znacznik <script> nie ma src.
Async
Atrybut async oznacza, że pomaga skryptowi ładować się w trybie „niezależnym”.
Przeglądarka ładuje strony bez czekania na załadowanie się skryptów async. DOMContentLoaded i skrypty async nie czekają na siebie nawzajem (kolejność „load-first”).
Inne skrypty nie czekają na skrypty async, a skrypty async nie czekają na nie. Tryb async (podobnie jak tryb defer) nie blokuje strony.
Skrypty async są świetne, gdy integrujemy niezależne skrypty firm trzecich ze stroną: liczniki, reklamy, narzędzia analityczne i tak dalej, ponieważ nie zależą one od naszych skryptów, a nasze skrypty nie powinny na nie czekać.
Dynamiczne
Skrypt możemy również dodać dynamicznie za pomocą JavaScript:
Skrypt zaczyna się ładować zaraz po dołączeniu do dokumentu i domyślnie zachowuje się jak skrypty „async”.
To znaczy:
- Na nic nie czekają, nic na nie nie czeka.
- Skrypt, który ładuje się jako pierwszy – uruchamia się jako pierwszy (kolejność „load-first”).
Możemy jednak wyłączyć tryb async dla skryptów dynamicznych ustawiając script.async = false przed dołączeniem go do html.
Podsumowanie
Oba async i defer mają jedną wspólną cechę: pobieranie takich skryptów nie blokuje renderowania strony. Dzięki temu użytkownik może od razu przeczytać zawartość strony i zapoznać się z nią.
Dziękuję za przeczytanie. Mam nadzieję, że Ci się podobało 😎
.