简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > js-Tutorial > Hauptteil

Async vs. Defer: Eine einfache Erklärung des Skriptladens

Linda Hamilton
Freigeben： 2024-11-08 08:29:02
Original
636 Leute haben es durchsucht

Wenn es darum geht, JavaScript in eine Website zu laden, ist es wichtig zu verstehen, wie sich verschiedene Lademethoden auf die Leistung und das Verhalten Ihrer Website auswirken können. JavaScript kann auf verschiedene Arten geladen werden, hauptsächlich mit der Standardlademethode „Async“ und „Defer“. Jede dieser Methoden hat ihre eigenen Eigenschaften und Anwendungsfälle. In diesem Beitrag untersuchen wir diese drei Methoden, die Ihnen helfen sollen, fundierte Entscheidungen für Ihre Projekte zu treffen.

Async vs. Defer: A Simple Explanation of Script Loading

Standardladung

Standardmäßig werden JavaScript-Dateien synchron geladen, wenn sie in ein HTML-Dokument eingebunden werden. Das bedeutet, dass der Browser die Analyse des HTML-Dokuments unterbricht, um die JavaScript-Datei herunterzuladen und auszuführen, bevor er fortfährt.

So fügen Sie normalerweise ein Skript mit der Standardmethode ein:

<script src="script.js"></script>
Nach dem Login kopieren

Asynchrones Laden

Das async-Attribut ermöglicht es dem Browser, die JavaScript-Datei asynchron herunterzuladen, während er weiterhin das HTML-Dokument analysiert. Sobald das Skript heruntergeladen ist, wird es sofort ausgeführt, möglicherweise bevor die HTML-Analyse abgeschlossen ist.

<script src="script.js" async></script>
Nach dem Login kopieren

Laden verzögern

Das Defer-Attribut lädt die JavaScript-Datei auch asynchron herunter, der Hauptunterschied besteht jedoch darin, dass das Skript erst ausgeführt wird, nachdem das HTML-Dokument vollständig analysiert wurde.

<script src="script.js" defer></script>
Nach dem Login kopieren

Vergleich der drei Methoden

Async vs. Defer: A Simple Explanation of Script Loading

Schnelle Tipps

  1. Verwenden Sie Async für nicht kritische Skripte: Für Skripte wie Analysen, Werbung und andere Integrationen von Drittanbietern, die nicht vom DOM abhängen.
  2. Verwenden Sie defer für DOM-abhängige Skripte: Für Skripte, die das DOM manipulieren oder in einer bestimmten Reihenfolge ausgeführt werden müssen.
  3. Standardmäßiges Skriptladen minimieren: Vermeiden Sie das standardmäßige synchrone Laden für große Skripte oder Skripte, die asynchron geladen werden können.
  4. Skripts unten im Text laden: Wenn Sie das Standardladeverhalten verwenden müssen, platzieren Sie Ihr
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！