JavaScript - Skript -Tag - Async & Defer

Beim Testen einer Webseite oder auf der Website kann die verstrichene Zeit beim Laden von Funktionen beobachtet werden. Zum Beispiel die Anhängen der zusätzlichen Funktionen an eine bestimmte Grenze anhängen. In solchen Fällen sind die Skript -Tags "asynchron" Und "verschieben”Attribute spielen eine wichtige Rolle bei der Unterstützung des Entwicklers in hohem Maße.

Dieser Artikel beschreibt den Unterschied zwischen asynchronen und aufschiebenden Attributen mit JavaScript.

JavaScript - Skript -Tag - Async & Defer

Der "asynchron" Und "verschieben”Sind die Attribute der“Tag und beide haben unterschiedliche Funktionen:

• Der "asynchronDas Attribut ermöglicht es DOM, das Skript abzurufen und auszuführen, während die HTML ausgeführt wird.
• Der "verschiebenAttribut lädt die Skriptdatei herunter, wartet, um die DOM -Ausführung zu beenden und dann die Skriptdatei auszuführen.

Beispiel
Lassen Sie uns das folgende Beispiel durchlaufen:

In den obigen Codezeilen:

• Umfassen die ""Tags, die sich auf die separaten externen Dateien beziehen"asynchron.JS" Und "verschieben.JS" innerhalb der "" Schild.
• Danach werden wir erschaffen “463"Tasten durch Codierung"Schaltfläche klicken*463Und dann drücken Sie die Registerkarte.

Lassen Sie uns die "diskutieren"asynchronFunktionalität des Attributs:

Lassen Sie AsyncValue = Dokument.QuerySelectorAll ('Taste');
Konsole.Log ('Async Attribut -Schaltfläche Anzahl: $ asyncValue.Länge');

Im Async.JS -Datei wenden Sie die folgenden Schritte an:

• Greifen Sie mit der “die erstellten Schaltflächen zu“ zu "QuerySelectorAll ()" Methode.
• Danach anwenden Sie die “Länge”Eigenschaft in Kombination mit dem“VorlagenliteraleUm die Anzahl der Schaltflächen so anzuzeigen, dass das Skript ausgeführt wird, während die Seite die Parsen fortsetzt.

Schauen Sie sich nun das an "verschiebenFunktionalität des Attributs:

Lassen Sie DeferValue = Dokument.QuerySelectorAll ('Taste');
Konsole.LOG ('Defer Attribut -Schaltfläche Anzahl: $ DeferValue.Länge');

Betrachten Sie in den obigen Codezeilen die folgenden Schritte:

• Zu den erstellten Schaltflächen über die “zugreifenQuerySelectorAll ()" Methode.
• Wiederholen Sie in ähnlicher Weise die besprochene Prozedur für die Rückgabe der Schaltflächenzahl über die “Länge" Eigentum.
• In diesem Szenario wird die Skriptdatei ausgeführt, nachdem die DOM -Parsen vollständig abgeschlossen ist.

Ausgang

Der Unterschied zwischen beiden angegebenen Attributen kann mit Hilfe der generierten Anzahl analysiert werden.

Abschluss

Im "asynchron”Attribut, das Skript wird ausgeführt, während die Seite noch analysiert, während die“verschiebenDas Attribut wartet, bis das Dokumentobjektmodell (DOM) vollständig ausgeführt ist. In diesem Artikel wurde die Unterschiede zwischen den angegebenasynchron" Und "verschieben”Attribute in JavaScript mit Hilfe von Beispielen.