Wo sollte ich <script>-Tags in HTML-Markup einfügen?

Question

Wo sollte ich <script>-Tags in HTML-Markup einfügen?

Gefragt el 12 de Januar, 2009: Wann wurde die Frage gestellt
703233 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Wenn Sie JavaScript in ein HTML-Dokument einbetten, wo ist der richtige Platz für die <script> Tags und eingebundenes JavaScript? Ich glaube mich zu erinnern, dass man diese nicht in die <head> Abschnitt, sondern am Anfang der <body> Abschnitt ist ebenfalls schlecht, da das JavaScript geparst werden muss, bevor die Seite vollständig gerendert wird (oder so ähnlich). Dies scheint die Ende der <body> Abschnitt als logischen Ort für <script> Tags.

Also, wo es der richtige Ort für die Unterbringung der <script> Tags?

(Diese Frage bezieht sich auf diese Frage in der vorgeschlagen wurde, dass JavaScript-Funktionsaufrufe von <a> Tags zu <script> Tags. Ich bin speziell mit jQuery, aber allgemeinere Antworten sind auch angemessen).

Gefragt el 12 de Januar, 2009 von mipadi

1 Stimmen

Falls du auch nur nach einer einfachen Lösung suchst und einen serverseitigen Generator wie Jekyll verwendest, empfehle ich dir, das Skript mit einzubinden. Das ist viel einfacher!

Kommentiert el 20 de September, 2019 von cregox

3 Stimmen

Wenn Sie von einer Suchmaschine kommen und danach suchen: Viele der Antworten sind nicht eindeutig genau die Stelle, an der das "Skript-Tag" am Ende stehen sollte . Wenn das "script"-Tag après </body>', führt die HTML-Validierung zu folgenden Ergebnissen _" Fehler: Skript mit falschem Start-Tag " (Option ankreuzen "Quelle" und klicken Sie "prüfen"_ um den HTML-Quelltext zu sehen). Es sollte sein antes de </body>'. (Das Ergebnis ist ähnlich, wenn das "script"-Tag ganz am Ende steht, nach dem </html> Tag.)

Kommentiert el 21 de November, 2021 von Peter Mortensen

1 Stimmen

Dies wird auch behandelt in Ist es falsch, den <script>-Tag nach dem </body>-Tag zu platzieren? .

Kommentiert el 21 de November, 2021 von Peter Mortensen

Anzeigen 1 weitere Kommentare

Answer 1

5 Antworten

Answer 2

25voto

Andrew Hare Punkte 332190

Wenn Sie jQuery verwenden, fügen Sie den JavaScript-Code dort ein, wo Sie ihn am besten finden, und verwenden Sie $(document).ready() um sicherzustellen, dass alles ordnungsgemäß geladen ist, bevor irgendwelche Funktionen ausgeführt werden.

Nebenbei bemerkt: Ich mag alle meine Skript-Tags in der <head> da dies der sauberste Ort zu sein scheint.

Beantwortet el 12 de Januar, 2009 von Andrew Hare (332190 Punkte )

14 Stimmen

Im Kopf...äh? <header> ?

Kommentiert el 20 de Januar, 2013 von Dan Lugg

9 Stimmen

Beachten Sie, dass die Verwendung von $(document).ready() bedeutet das nicht, dass Sie Ihr JavaScript überall Sie mögen - Sie müssen es trotzdem nach dem <script src=".../jquery.min.js"> wo Sie jQuery einbinden, so dass $ existiert.

Kommentiert el 10 de Juli, 2013 von Rory O'Kane

2 Stimmen

Es ist nicht optimal, Skript-Tags in den <head>-Abschnitt zu setzen - dadurch wird die Anzeige des sichtbaren Teils der Seite verzögert, bis die Skripte geladen sind.

Kommentiert el 14 de Oktober, 2013 von CyberMonk

Anzeigen 2 weitere Kommentare

Answer 3

21voto

AmanKumar Punkte 1235

    <script src="myjs.js"></script>
</body>

Das Skript-Tag sollte immer vor dem Körper schließen oder bei der Boden in HTML Datei.

Die Seite wird mit HTML und CSS geladen und später wird JavaScript geladen.

Überprüfen Sie dies bei Bedarf:

http://stevesouders.com/hpws/rule-js-bottom.php

Beantwortet el 16 de Juli, 2016 von AmanKumar (1235 Punkte )

3 Stimmen

Damit ist die Frage eigentlich beantwortet. Ich habe mich gefragt, dass fast alle Beispiele, die gepostet wurden, nie den richtigen visuellen Kontext von "Ende der Seite" zeigten.

Kommentiert el 16 de Dezember, 2016 von Ken Ingram

2 Stimmen

Diese Antwort ist sehr irreführend und höchstwahrscheinlich falsch. Die Artikel in Google und in MDN deutet darauf hin, dass synchrones JS (was hier der Fall ist) immer die DOM-Konstruktion und das Parsing blockiert, was zu einem verzögerten First-Rendering führt. Daher können Sie den Inhalt der Seite nicht sehen, bis die JS-Datei abgerufen und ihre Ausführung beendet ist, unabhängig davon, wo Sie Ihre JS-Datei im HTML-Dokument platzieren, solange sie synchron ist

Kommentiert el 26 de Oktober, 2017 von Lingaraju E V

1 Stimmen

Er verweist auch auf Punkte, die 2009 gemacht wurden und nicht mehr relevant sind.

Kommentiert el 30 de Oktober, 2017 von toxaq

Anzeigen 3 weitere Kommentare

Answer 4

13voto

Haritsinh Gohil Punkte 4562

El am besten Platz zum Unterbringen <script> Tag ist vor dem Schließen </body> Tag, so dass das Herunterladen und Ausführen den Browser nicht daran hindert, den HTML-Code im Dokument zu parsen,

Auch das externe Laden von JavaScript-Dateien hat seine eigenen Vorteile, z. B. wird es von den Browsern zwischengespeichert und kann die Ladezeiten der Seite beschleunigen, es trennt den HTML- und JavaScript-Code und hilft, die Codebasis besser zu verwalten.

Moderne Browser unterstützen aber auch einige andere optimale Möglichkeiten, wie async y defer um externe JavaScript-Dateien zu laden.

Asynchron und aufschiebend

Normalerweise beginnt die Ausführung einer HTML-Seite zeilenweise. Wenn ein externes JavaScript <script> Element angetroffen wird, wird das HTML-Parsing angehalten, bis ein JavaScript heruntergeladen und zur Ausführung bereit ist. Diese normale Seitenausführung kann mit der Option defer y async Attribut.

`Defer`

Wenn ein defer-Attribut verwendet wird, wird JavaScript parallel zum HTML-Parsing heruntergeladen, aber erst ausgeführt, wenn das vollständige HTML-Parsing abgeschlossen ist.

<script src="/local-js-path/myScript.js" defer></script>

`Async`

Wenn das async-Attribut verwendet wird, wird JavaScript heruntergeladen, sobald das Skript gefunden wird, und nach dem Download wird es asynchron (parallel) zusammen mit dem HTML-Parsing ausgeführt.

<script src="/local-js-path/myScript.js" async></script>

Wann welche Attribute zu verwenden sind

Wenn Ihr Skript unabhängig von anderen Skripten und modular ist, verwenden Sie async .
Wenn Sie Skript1 und Skript2 mit async werden beide ausgeführt parallel zum HTML-Parsing, sobald sie heruntergeladen und verfügbar sind. und verfügbar sind.
Wenn Ihr Skript von einem anderen Skript abhängt, verwenden Sie defer für beide:
Wenn Skript1 und Skript2 in dieser Reihenfolge geladen werden, mit defer dann wird Skript1 garantiert zuerst ausgeführt,
Dann wird Skript 2 ausgeführt, nachdem Skript 1 vollständig ausgeführt wurde.
Dies ist erforderlich, wenn Skript2 von Skript1 abhängt.
Wenn Ihr Skript klein genug ist und von einem anderen Skript abhängig ist vom Typ async dann verwenden Sie Ihr Skript ohne Attribute und platzieren es über allen async Skripte.

Referenz: Externe JavaScript JS-Datei - Vorteile, Nachteile, Syntax, Attribute

Beantwortet el 9 de Juli, 2019 von Haritsinh Gohil (4562 Punkte )

Answer 5

10voto

Allain Lalonde Punkte 88365

Es stellt sich heraus, dass sie überall sein kann.

Sie können die Ausführung mit etwas wie jQuery aufschieben, so dass es keine Rolle spielt, wo es platziert ist (abgesehen von einem kleinen Performance-Hit beim Parsen).

Beantwortet el 12 de Januar, 2009 von Allain Lalonde (88365 Punkte )

1 Stimmen

XHTML validiert Skript-Tags im Textkörper, sowohl im strengen als auch im Übergangsformat. Style-Tags hingegen dürfen nur im Kopf stehen.

Kommentiert el 12 de Januar, 2009 von I.devries

0 Stimmen

Re "Es spielt keine Rolle, wo sie platziert ist" : Aber nicht so das Ergebnis ist nicht wohlgeformtes HTML ?

Kommentiert el 21 de November, 2021 von Peter Mortensen

Answer 6

6voto

dkretz Punkte 36862

Die konservativste (und weithin akzeptierte) Antwort ist "unten, kurz vor dem Ending-Tag", denn dann wird das gesamte DOM geladen, bevor irgendetwas ausgeführt werden kann.

Es gibt aus verschiedenen Gründen Gegenstimmen, angefangen bei der gängigen Praxis, die Ausführung absichtlich mit einem Onload-Ereignis der Seite zu beginnen.

Beantwortet el 12 de Januar, 2009 von dkretz (36862 Punkte )

0 Stimmen

Re "am Boden"" : Aber antes de das abschließende Body-Tag ( </body> )? Können Sie das deutlicher machen? (Aber ohne "Bearbeiten:", "Aktualisieren:" oder ähnlich - die Antwort sollte so aussehen, als wäre sie heute geschrieben worden).

Kommentiert el 21 de November, 2021 von Peter Mortensen

Wo sollte ich <script>-Tags in HTML-Markup einfügen?

Antworten

Asynchron und aufschiebend

`Defer`

`Async`

Wann welche Attribute zu verwenden sind

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wo sollte ich <script>-Tags in HTML-Markup einfügen?

Antworten

Asynchron und aufschiebend

Defer

Async

Wann welche Attribute zu verwenden sind

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

`Defer`

`Async`