Logo David Burdelak
Słownik · Web development

Co to jest atrybut defer?

Ostatnia aktualizacja:

Atrybut defer w znaczniku <script> powoduje, że skrypt jest pobierany równolegle z HTML, ale uruchamiany dopiero po zakończeniu parsowania dokumentu. Skrypty z tym atrybutem wykonują się w kolejności, w jakiej występują w kodzie.

Jak działa defer?

Przeglądarka nie zatrzymuje budowania strony na skrypcie z defer, a po zbudowaniu DOM uruchamia je kolejno, jeszcze przed zdarzeniem DOMContentLoaded. Dzięki temu skrypt ma dostęp do całego dokumentu, a użytkownik widzi treść szybciej.

Defer czy async?

Defer zachowuje kolejność, więc nadaje się do skryptów zależnych od siebie, np. biblioteki i kodu z niej korzystającego. Async nie gwarantuje kolejności i lepiej pasuje do niezależnych dodatków. Skrypty modułowe, czyli type="module", są domyślnie odroczone.

Dobre praktyki

Własne skrypty strony warto ładować z defer i umieszczać w sekcji head, co pozwala rozpocząć pobieranie jak najwcześniej. Atrybut nie działa na skryptach wbudowanych bez atrybutu src.

Ma to wpływ na szybkość reakcji strony, którą poprawia refaktoryzacja JavaScript pod kątem INP.

Zobacz w praktyce

Powiązane pojęcia

Wszystkie hasła z kategorii Web development