HTML5 - HTML
Asynchroniczne ładowanie skryptów <script src async>
W jaki sposób załadować skrypt JavaScript (JS) asynchronicznie, aby nie blokował szybkiego wyświetlania strony WWW?
<script src="lokalizacja" async></script>
- lokalizacja
- Ścieżka dostępu albo adres URL wskazujące na miejsce, skąd ma zostać załadowany zewnętrzny plik ze skryptem
Na stronach internetowych można załączać dynamiczne skrypty, napisane w języku JavaScript. Zwykle zapisuje się je w osobnych plikach z rozszerzeniem *.js i osadza na stronie przy użyciu znacznika SCRIPT - podając do nich odnośnik w atrybucie src="...". W trybie domyślnym wczytywanie dokumentu zostaje zatrzymane po napotkaniu tak osadzonego skryptu i kontynuowane dalej, dopiero kiedy w całości się on załaduje. Często tylko niepotrzebnie wydłuża to czas, po którym użytkownik może już przeglądać pozostałą treść strony.
Korzystniej by było od razu wyświetlić podstawową treść tekstową strony, tak aby czytelnik mógł już się zacząć z nią zaznajamiać, a w tym czasie w tle doładować wszystkie potrzebne pliki dynamicznych skryptów. W języku HTML 4.01 służył do tego atrybut logiczny defer. Oznaczony nim skrypt ładuje się dopiero po wczytaniu wszystkich znaczników z dokumentu, tzn. po osiągnięciu </html>. HTML5 wprowadza dodatkowy atrybut logiczny - async - dzięki któremu pliki skryptów zostaną załadowane tak szybko, jak to będzie możliwe (być może jeszcze przed wczytaniem wszystkich znaczników dokumentu).
Pytania i odpowiedzi <script src async defer>
Jakie są sposoby umieszczania skryptu w dokumencie HTML?
Skrypt można umieścić w dokumencie HTML na trzy główne sposoby: bezpośrednio w tagu <script> w sekcji <head> lub <body>, zewnętrzny skrypt za pomocą atrybutu src w tagu <script>, jak w <script src="script.js"></script>, lub za pomocą async lub defer dla ładowania asynchronicznego i odroczonego.
Co to jest skrypt src w HTML?
Skrypt src w HTML to atrybut tagu <script>, który określa ścieżkę do pliku JavaScript, który ma być załadowany. Na przykład: <script src="script.js"></script>. Używając src, zamiast pisać kod JavaScript bezpośrednio w tagu <script>, możemy załadować kod z zewnętrznego pliku.
Na czym polega asynchroniczność?
Asynchroniczność polega na wykonywaniu zadań niezależnie od głównego wątku aplikacji, co pozwala na równoległe przetwarzanie i unikanie blokowania interfejsu użytkownika. W kontekście skryptów oznacza to, że skrypt jest ładowany równolegle z innymi zasobami, a jego wykonanie następuje, gdy zostanie całkowicie pobrany, co nie wpływa na wczytywanie reszty strony. Na przykład, <script src="script.js" async></script> załaduje skrypt asynchronicznie.
Jak załadować skrypt asynchronicznie?
Skrypt można załadować asynchronicznie, używając atrybutu async w tagu <script>. Na przykład: <script src="script.js" async></script>. Skrypt załadowany w ten sposób jest pobierany równolegle z resztą strony i wykonywany, gdy zostanie załadowany, bez blokowania renderowania strony.
Co to jest skrypt asynchroniczny?
Skrypt asynchroniczny to skrypt, który jest ładowany równolegle z resztą strony i wykonywany, gdy zakończyło się już jego pobieranie, bez blokowania renderowania strony. Można to osiągnąć, używając atrybutu async w tagu <script>, jak w <script src="script.js" async></script>.
Co jest lepsze, asynchroniczne czy odroczone?
Wybór między asynchronicznym a odroczonym ładowaniem skryptów zależy od potrzeb aplikacji. Skrypty asynchroniczne są ładowane i wykonywane w miarę ich dostępności, co może być korzystne, gdy taki skrypt nie zależy od innych skryptów umieszczonych na stronie. Skrypty odroczone są ładowane równolegle, ale wykonywane po pełnym załadowaniu dokumentu, co jest lepsze, gdy skrypt zależy od DOM. Na przykład, <script src="script.js" defer></script> zapewnia, że skrypt zostanie wykonany po załadowaniu strony.
Jak opóźnić ładowanie skryptów?
Aby opóźnić ładowanie skryptów, można użyć atrybutu defer w tagu <script>, jak w <script src="script.js" defer></script>. Skrypty z atrybutem defer są ładowane równolegle z resztą strony, ale wykonywane są dopiero po załadowaniu całego dokumentu, co pozwala uniknąć blokowania renderowania strony.
Czy mogę używać jednocześnie asynchronizacji i odroczenia?
Tak, można używać atrybutów async i defer jednocześnie w tagu <script>, chociaż specyfikacja HTML5 wskazuje, że jest to nietypowa konfiguracja. Gdy oba atrybuty są użyte, zachowanie skryptu zależy od przeglądarki: nowoczesne przeglądarki ignorują defer i traktują skrypt jako asynchroniczny, natomiast starsze przeglądarki, które obsługują tylko defer, zastosują opóźnione ładowanie. Na przykład: <script src="script.js" async defer></script>.