suchen

Heim >Web-Frontend >js-Tutorial >Beste Möglichkeit, eine Javascript-Datei in HTML hinzuzufügen

Beste Möglichkeit, eine Javascript-Datei in HTML hinzuzufügen

Barbara Streisand
Barbara StreisandOriginal
2024-10-09 20:33:28747Durchsuche

Best Way to add Javascript file in HTML

In HTML gibt es mehrere Möglichkeiten, eine JavaScript-Datei einzubinden. Ich werde vier verschiedene Methoden und ihre Nachteile erläutern und abschließend den besten Ansatz hervorheben.

1. in 

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js"></script>
</head>
<body>

</body>
</html>

Bei diesem Ansatz wird beim Parsen des Codes die Javascript-Datei zuerst vor dem HTML-Inhalt im Textkörper geladen. Wenn JavaScript versucht, Elemente im Textkörper zu manipulieren, die noch nicht analysiert wurden, kann dies zu Fehlern führen, da der HTML-Inhalt noch nicht vollständig analysiert wurde geladen.

Dieses Blockierungsverhalten verzögert das Parsen und Rendern des Rests der Seite, was sich auf die Leistung und das Benutzererlebnis auswirkt.

2. in (am Ende)

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>
<body>
    <script src="custom.js"></script>
</body>
</html>

Bei diesem Ansatz wird der HTML-Code vollständig analysiert, bevor das JavaScript geladen und ausgeführt wird, wodurch Fehler im Zusammenhang mit fehlenden DOM-Elementen vermieden werden. Dieser Ansatz ist zwar gut, aber da das HTML-Parsing und das Laden von JavaScript nacheinander erfolgen, kann es insgesamt länger dauern, da die beiden Prozesse zu unterschiedlichen Zeiten stattfinden

3. in 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js" async></script>
</head>
<body>
</body>
</html>

Bei diesem Ansatz machen wir das JavaScript asynchron, sodass es das Laden des HTML-Codes nicht blockiert. Sowohl das HTML-Parsing als auch das Laden von JavaScript erfolgen parallel. Wenn jedoch JavaScript ausgeführt wird, bevor der HTML-Code vollständig analysiert wurde, und js versucht, noch nicht geladene HTML-Elemente zu manipulieren, kann dies zu Fehlern führen.
Hinweis: – Dieser Ansatz kann Zeit sparen, aber durch das gleichzeitige Laden von HTML und JS ist er anfälliger für Fehler

4. in 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="custom.js" defer></script>
</head>
<body>

</body>
</html>

Dieser Ansatz ähnelt dem dritten, bei dem sowohl die HTML-Analyse als auch das Laden von JavaScript parallel erfolgen. Selbst wenn das JavaScript zuerst geladen wird, wartet der Browser, bis der HTML-Code vollständig analysiert ist, bevor er das Skript ausführt

Zusammenfassung: Bester Ansatz

Der beste Weg ist normalerweise die Verwendung von:


Warum:

  • Die HTML-Analyse wird nicht blockiert (nicht blockierender Download).
  • Es stellt sicher, dass das Skript ausgeführt wird, nachdem das DOM vollständig analysiert wurde, wodurch es sicherer für die Manipulation von DOM-Elementen wird.
  • Die Reihenfolge der Skriptausführung bleibt erhalten, wenn Sie mehrere verzögerte Skripte haben.

In Fällen, in denen das Skript unabhängig vom DOM-Inhalt ist (z. B. Tracking-Skripte oder Anzeigen), können Sie für eine bessere Leistung asynchron verwenden.

Das obige ist der detaillierte Inhalt vonBeste Möglichkeit, eine Javascript-Datei in HTML hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html if for while include Error finally JS dom this
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Fortgeschrittene Reaktionskonzepte | Reaktion 4Nächster Artikel：Fortgeschrittene Reaktionskonzepte | Reaktion 4

In Verbindung stehende Artikel

Mehr sehen