Detaillierte Erläuterung der Verwendung des Defer-Attributs und des Async-Attributs in Javascript-js-Tutorial-php.cn

Dieser Artikel enthält eine detaillierte Erklärung der Verwendung von Defer-Attributen und Async-Attributen in Javascript. Ich hoffe, dass er für Freunde hilfreich ist.

Warum Sie JS-Dateien asynchron laden müssen:

Ohne Asynchronität blockiert das Dokument beim Laden von JS-Code den Download anderer Ressourcen, was zu einer leeren Seite führt.

(1) Beim Ausführen des oben platzierten js-Skripts benötigt der Browser Zeit, um den Code der externen Linkdatei herunterzuladen und auszuführen. Dies führt zu einer offensichtlichen Verzögerung und zeigt eine leere Seite an Der Benutzer kann den Inhalt nicht durchsuchen und nicht mit der Seite interagieren.

(2) Obwohl IE8, Firefox3.5, Safari4 und Chrome2 alle das parallele Herunterladen von Javascript-Dateien ermöglichen, wirkt sich der Download-Vorgang der Skripte nicht gegenseitig aus, das Laden der Seite muss jedoch noch warten bis alle Javascript-Codes heruntergeladen und ausgeführt wurden, um fortzufahren. Aus diesem Grund wird empfohlen, das Tag am Ende des zu platzieren.

(3) Da jedes -Tag das Rendern der Seite blockiert, wird empfohlen, die Verwendung von -Tags zu reduzieren. Dies gilt nicht nur für externe Link-Skripte, sondern auch für Inline-Skripte. Jedes Mal, wenn der Browser beim Parsen einer HTML-Seite auf ein -Tag stößt, kommt es aufgrund der Ausführung des Skripts zu einer gewissen Verzögerung. Aufgrund des zusätzlichen Leistungsaufwands durch HTTP-Anfragen ist das Herunterladen einer einzelnen 100-KB-Datei außerdem schneller als das Herunterladen von vier 25-KB-Dateien.

Verwendung von defer und async:

Gleiche Punkte: defer und async werden beide verwendet, um Skripte asynchron zu laden. Beim parallelen Download erfolgt keine Blockierung während des Downloadvorgangs.

Unterschiede:

defer:

(1) kann zum Laden externer Skripte oder eingebetteter Skripte verwendet werden. Inline-Skripte sind auf IE9 und niedriger beschränkt. Mainstream-Browser basieren auf der HTML5-Spezifikation des W3C: defer wird nur wirksam, wenn das src-Attribut deklariert wird.

Zum Beispiel:

//外部脚本 //内嵌脚本 console.log("defer"); Nach dem Login kopieren Nach dem Login kopieren (2) Das -Tag mit dem Defer-Attribut kann an einer beliebigen Stelle auf der Seite platziert werden und die entsprechende Javascript-Datei wird in das -Tag geparst. Tag auf der Seite Der Download wird gestartet, aber nicht ausgeführt. Er wird ausgeführt, nachdem der DOM-Ladevorgang abgeschlossen ist (wird vor dem Onload-Ereignis aufgerufen).

async:

(1) nur für externe Skripte.

(2) Wird sofort ausgeführt, nachdem das asynchrone Laden abgeschlossen ist.

Anhang: Einzelheiten zur Browserunterstützung für das Defer-Attribut finden Sie unter: https://caniuse.com/#feat=script-defer, suchen Sie einfach nach „defer“.

Warum Sie JS-Dateien asynchron laden müssen:

Ohne Asynchronität blockiert das Dokument beim Laden von JS-Code den Download anderer Ressourcen, was zu einer leeren Seite führt.

(1) Beim Ausführen des oben platzierten js-Skripts benötigt der Browser Zeit, um den Code der externen Linkdatei herunterzuladen und auszuführen. Dies führt zu einer offensichtlichen Verzögerung und zeigt eine leere Seite an Der Benutzer kann den Inhalt nicht durchsuchen und nicht mit der Seite interagieren. (2) Obwohl IE8, Firefox3.5, Safari4 und Chrome2 alle das parallele Herunterladen von Javascript-Dateien ermöglichen und sich der Downloadvorgang der Skripte nicht gegenseitig beeinflusst, muss das Laden der Seite dennoch warten, bis alle Javascript-Dateien vorhanden sind Codes werden heruntergeladen und ausgeführt, bevor es weitergehen kann. Aus diesem Grund wird empfohlen, das -Tag am Ende des zu platzieren. (3) Da jedes -Tag das Rendern der Seite blockiert, wird empfohlen, die Verwendung von zu reduzieren. Dies gilt nicht nur für externe Link-Skripte, sondern auch für Inline-Skripte. Jedes Mal, wenn der Browser beim Parsen einer HTML-Seite auf ein -Tag stößt, kommt es aufgrund der Ausführung des Skripts zu einer gewissen Verzögerung. Aufgrund des zusätzlichen Leistungsaufwands durch HTTP-Anfragen ist das Herunterladen einer einzelnen 100-KB-Datei außerdem schneller als das Herunterladen von vier 25-KB-Dateien.

Verwendung von defer und async:

Gleiche Punkte: defer und async werden beide verwendet, um Skripte asynchron zu laden. Beim parallelen Download erfolgt keine Blockierung während des Downloadvorgangs.

Unterschiede:

defer:

(1) kann zum Laden externer Skripte oder eingebetteter Skripte verwendet werden. Inline-Skripte sind auf IE9 und niedriger beschränkt. Mainstream-Browser basieren auf der HTML5-Spezifikation des W3C: defer wird nur wirksam, wenn das src-Attribut deklariert ist.

Zum Beispiel:

//外部脚本 //内嵌脚本 console.log("defer"); Nach dem Login kopieren Nach dem Login kopieren (2) Das -Tag mit dem Defer-Attribut kann an einer beliebigen Stelle auf der Seite platziert werden und die entsprechende Javascript-Datei wird in das -Tag geparst. Tag auf der Seite Der Download wird gestartet, aber nicht ausgeführt. Er wird ausgeführt, nachdem der DOM-Ladevorgang abgeschlossen ist (wird vor dem Onload-Ereignis aufgerufen).

async:

(1) nur für externe Skripte.

(2) Wird sofort ausgeführt, nachdem das asynchrone Laden abgeschlossen ist.

Anhang: Einzelheiten zur Browserunterstützung für das Defer-Attribut finden Sie unter: https://caniuse.com/#feat=script-defer, suchen Sie einfach nach „defer“.

Das Obige ist eine detaillierte Einführung in die Verwendung von Defer-Attributen und Async-Attributen in Javascript. Wenn Sie mehr über das JavaScript-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.