JavaScript - Tag skryptu - Async & Defer

Podczas testowania strony internetowej lub witryny może istnieć wymóg obserwowania upłyniętego czasu w funkcjonalności ładowania. Na przykład dołączenie dodatkowych funkcji do określonego limitu. W takich przypadkach skrypt taguje „Async" I "odraczać”Atrybuty odgrywają istotną rolę w dużym stopniu pomagania programistom.

W tym artykule opisano różnicę między atrybutami asynchronizacji i odroczenia za pomocą JavaScript.

JavaScript - Tag skryptu - Async & Defer

„„Async" I "odraczać”To atrybuty„”Tag i oba mają różne funkcje:

• „„Async”Atrybut pozwala DOM pobierać i wykonywać skrypt podczas wykonywania HTML.
• „„odraczać”Atrybut pobiera plik skryptu, czeka na zakończenie wykonania DOM, a następnie wykonuje plik skryptu.

Przykład
Przejdźmy do następującego przykładu:

W powyższych wierszach kodu:

• Zawierać "”Tagi odnoszące się do oddzielnych plików zewnętrznych„Async.JS" I "odraczać.JS”W„ „”Tag.
• Następnie stworzymy „463„Przyciski przez kodowanie”przycisk kliknij*463”A następnie naciśnij Tab.

Omówmy „Async„Funkcjonalność atrybutu:

niech asyncValue = dokument.QuerySelelectionAll („przycisk”);
konsola.log („Przycisk atrybutu Async Count: $ AsynCValue.długość');

W asynchronizacji.plik JS, zastosuj następujące kroki:

• Uzyskaj dostęp do utworzonych przycisków za pomocą „QuerySelelection ()" metoda.
• Następnie zastosuj „długość„Nieruchomość w połączeniu z„Literały szablonów„Aby wyświetlić liczbę przycisków, tak aby skrypt został wykonany, podczas gdy strona będzie kontynuować parsowanie.

Teraz sprawdź „„odraczać„Funkcjonalność atrybutu:

Let DeferValue = dokument.QuerySelelectionAll („przycisk”);
konsola.log („Odrocz przycisk atrybutu liczba: $ deferValue.długość');

W powyższych wierszach kodu rozważ poniżej określone kroki:

• Podobnie, dostęp do utworzonych przycisków za pośrednictwem „QuerySelelection ()" metoda.
• Podobnie powtórz omówioną procedurę zwracania liczby przycisków za pomocą „długość" nieruchomość.
• W tym scenariuszu plik skryptu uruchomi się po pełnym zakończeniu DOM.

Wyjście

Różnica między obiema podanymi atrybutami można przeanalizować za pomocą wygenerowanej liczby.

Wniosek

W "Async„Atrybut, skrypt wykonuje się, gdy strona wciąż analizuje, podczas gdy„odraczać”Atrybut czeka, aż model obiektu dokumentu (DOM) zostanie w pełni wykonany. Ten zapis stwierdzono różnice między „Async" I "odraczać”Atrybuty w JavaScript za pomocą przykładów.