Atrybuty async i defer
Ładowanie skryptów bez blokowania analizowania kodu HTML
Atrybuty async i defer to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Domyślne działanie skryptu
Zwykły element <script src="..."> bez async ani defer wstrzymuje analizowanie kodu HTML na czas pobierania i wykonywania skryptu. Renderowanie wszystkiego poniżej skryptu zostaje wstrzymane, dlatego skrypty tradycyjnie umieszczano na końcu elementu <body>.
async pobiera skrypt równolegle
<script async src="..."> pobiera skrypt równolegle z analizowaniem HTML i wykonuje go natychmiast po pobraniu. Wykonywanie nadal wstrzymuje analizowanie HTML, ale tylko na krótko — skrypt nie blokuje pobierania innych zasobów.
Kolejność wykonywania async jest nieprzewidywalna
Dwa skrypty async wykonują się w kolejności, w której zakończy się pobieranie pierwszego z nich. Nie należy używać async w przypadku skryptów zależnych od siebie (jQuery przed wtyczką jQuery), ponieważ zależność może zostać uruchomiona, zanim wymagany element będzie dostępny.
defer czeka na HTML
<script defer src="..."> pobiera skrypt równolegle, podobnie jak async, ale wykonanie jest opóźnione do czasu pełnego przeanalizowania HTML — następuje tuż przed zdarzeniem DOMContentLoaded. Skrypt nigdy nie blokuje analizowania.
<script defer src="app.js"></script>
<script defer src="analytics.js"></script>defer zachowuje kolejność
Wiele skryptów defer wykonuje się w kolejności ich deklaracji, podobnie jak zwykłe skrypty umieszczone na końcu elementu body. Dzięki temu defer jest właściwym wyborem dla skryptów zależnych: narzędzia są ładowane przed kodem, który z nich korzysta, bez konieczności ręcznego sterowania kolejnością.
Wybór między async a defer
Należy używać async w przypadku niezależnych fragmentów kodu firm trzecich (analityka, reklamy), które nie modyfikują DOM i nie mają zależności. defer należy stosować do własnego kodu aplikacji, który potrzebuje DOM i zależy od innych skryptów.
Moduły są domyślnie odroczone
<script type="module"> automatycznie zachowuje się jak defer — jest pobierany równolegle, wykonywany po przeanalizowaniu dokumentu i zachowuje kolejność. Dodanie defer do modułu jest dozwolone, ale zbędne; dodanie async przywraca zachowanie charakterystyczne dla async.
Skrypty wbudowane ignorują async/defer
async i defer dotyczą tylko zewnętrznych skryptów (z atrybutem src). Wbudowany element <script> wykonuje się natychmiast niezależnie od atrybutów, dlatego atrybuty te są po cichu ignorowane w przypadku <script>console.log(1)</script>.
Umiejscowienie ma mniejsze znaczenie
W przypadku defer (lub modułów) tagi <script> mogą znajdować się w <head> bez blokowania analizowania dokumentu — a umieszczenie ich tam pozwala przeglądarce wykryć je i rozpocząć pobieranie wcześniej niż w przypadku umieszczenia ich na końcu <body>.
<head>
<script defer src="app.js"></script>
</head>Łączenie z preload
W przypadku skryptów wrażliwych na opóźnienia należy połączyć <link rel="preload" as="script" href="..."> w nagłówku z odroczonym elementem <script> poniżej. preload natychmiast rozpoczyna pobieranie, a defer zapewnia prawidłową kolejność wykonywania.
Typowa pułapka
Oznaczenie skryptu jako async bez sprawdzenia, czy nie ma on żadnych zależności, jest najczęstszą przyczyną wyścigów typu „u mnie działa, na produkcji nie”. W razie wątpliwości należy wybrać defer — jest wyrozumiały tam, gdzie async bywa bezwzględny.
Sprawdzenie wiedzy
Jaka jest różnica między async i defer w przypadku dwóch skryptów, gdy drugi zależy od pierwszego?
Podsumowanie
async i defer pobierają skrypty równolegle z analizowaniem HTML. async wykonuje skrypt natychmiast po pobraniu, w nieprzewidywalnej kolejności — należy używać go w przypadku niezależnych fragmentów kodu firm trzecich. defer wykonuje skrypty po przeanalizowaniu dokumentu, w kolejności deklaracji — należy używać go do kodu aplikacji z zależnościami. Moduły domyślnie działają jak defer.
Często zadawane pytania
Czy lekcja „Atrybuty async i defer” jest bezpłatna?
Tak — pełny tekst „Atrybuty async i defer” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Atrybuty async i defer”?
Ładowanie skryptów bez blokowania analizowania kodu HTML Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Atrybuty async i defer”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Atrybuty async i defer
- Preload, prefetch i preconnect
- Leniwe ładowanie obrazów — loading=lazy
- Wskazówki dotyczące zasobów — modulepreload