Atrybut async w HTML <script>

Tag HTML <script>

Definicja i użycie

async Atrybut jest logicznym atrybutem.

Jeśli ustawiono async Atrybut, skrypt będzie pobierany równolegle podczas analizowania strony i natychmiast wykonany, gdy będzie dostępny. Po pełnym pobraniu skryptu, analiza strony zostanie przerwana, skrypt zostanie wykonany, a następnie kontynuowana analiza reszty strony.

Uwaga:async Atrybut jest dostępny tylko dla zewnętrznych skryptów (i powinien być używany tylko, gdy istnieje atrybut src).

Uwaga:Zewnętrzne skrypty można wykonywać na wiele sposobów:

  • Jeśli ustawiono async: skrypt będzie pobierany równolegle podczas analizowania strony i natychmiast wykonany, gdy będzie dostępny (przed zakończeniem analizowania strony)
  • Jeśli ustawiono defer (ale nie async): skrypt będzie pobierany równolegle podczas analizowania strony i wykonany po zakończeniu analizowania strony
  • Jeśli nie ma ani async, ani defer: skrypt jest natychmiast pobierany i wykonywany, blokując analizowanie strony, aż skrypt zostanie wykonany

Przykład

Wskazane skrypty będą pobierane równolegle podczas analizowania strony i natychmiast wykonywane, gdy będą dostępne:

<script src="demo_async.js" async></script>

Spróbuj sam

Gramatyka

<script async>

Asynchroniczne wykonywanie skryptów

Domyślnym zachowaniem przeglądarki podczas napotkania elementu script jest zatrzymanie przetwarzania strony podczas ładowania i wykonywania skryptu. Każdy element script wykonywany jest sekwencyjnie (według określonej kolejności) synchronicznie (w trakcie ładowania i wykonywania skryptu nie zajmuje się niczym innym).

Jako domyślny sposób przetwarzania skryptów, synchroniczne wykonywanie w kolejności ma swoje znaczenie. Jednak niektóre skrypty nie wymagają takiego przetwarzania, dla tego typu skryptów można użyć async Atrybut poprawia jego wydajność. Przykładem tego jest skrypt śledzący (tracking script). Taki skrypt może raportować historię odwiedzin użytkownika na stronie, aby reklamy mogły być dostosowane i wyświetlane na podstawie nawyków użytkownika, lub zbierać statystyki odwiedzających strony do analizy, itp. Te skrypty są samowystarczalne i zazwyczaj nie wymagają interakcji z elementami dokumentu HTML. Opóźnienie wyświetlania strony w oczekiwaniu na ich załadowanie i wysłanie raportów do serwera nie ma sensu.

Użycie async Po dodaniu atrybutu, przeglądarka będzie ładować i wykonywać skrypt asynchronicznie, podczas gdy będzie kontynuować analizowanie innych elementów HTML (w tym innych elementów script). Jeśli używane poprawnie, może to znacznie zwiększyć ogólną wydajność ładowania.

Uwaga:Użycie async Jednym z ważnych konsekwencji atrybutu jest to, że skrypty w stronie mogą nie być wykonywane w kolejności, w której zostały zdefiniowane. Dlatego nie zaleca się używania go, jeśli skrypt używa funkcji lub wartości zdefiniowanych w innych skryptach. async Atrybut.

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 10.0 3.6 5.1 15.0

Tag HTML <script>