it-swarm.com.de

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

Wo ist beim Einbetten von JavaScript in einem HTML-Dokument der richtige Ort für die <script>-Tags und das enthaltene JavaScript zu finden? Ich erinnere mich an die Tatsache, dass Sie diese nicht in den <head>-Abschnitt einfügen dürfen, aber das Platzieren am Anfang des <body>-Abschnitts ist ebenfalls schlecht, da JavaScript vor der vollständigen Wiedergabe der Seite (oder ähnlichem) analysiert werden muss ). Dies scheint das Ende des <body>-Abschnitts als logischen Ort für <script>-Tags zu belassen.

Wo also ist der richtige Ort für die <script>-Tags?

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

1276
mipadi

Was passiert, wenn ein Browser eine Website mit einem <script>-Tag lädt:

  1. Rufen Sie die HTML-Seite ab (z. B. index.html)
  2. Beginnen Sie mit der Analyse des HTML-Codes
  3. Der Parser trifft auf ein <script>-Tag, das auf eine externe Skriptdatei verweist.
  4. Der Browser fordert die Skriptdatei an. In der Zwischenzeit blockiert der Parser den anderen HTML-Code auf Ihrer Seite und stoppt ihn.
  5. Nach einiger Zeit wird das Skript heruntergeladen und anschließend ausgeführt.
  6. Der Parser analysiert den Rest des HTML-Dokuments weiter.

Schritt 4 verursacht eine schlechte Benutzererfahrung. Ihre Website wird grundsätzlich nicht mehr geladen, bis Sie alle Skripts heruntergeladen haben. Wenn es eine Sache gibt, die Benutzer hassen, wartet sie auf das Laden einer Website.

Warum passiert das überhaupt?

Jedes Skript kann seinen eigenen HTML-Code über document.write() oder andere DOM-Manipulationen einfügen. Dies bedeutet, dass der Parser warten muss, bis das Skript heruntergeladen und ausgeführt wurde, bevor der Rest des Dokuments sicher analysiert werden kann. Schließlich könnte das Skript einen eigenen HTML-Code in das Dokument eingefügt haben.

Die meisten JavaScript-Entwickler bearbeiten jedoch nicht mehr das DOM , während das Dokument geladen wird. Sie warten stattdessen, bis das Dokument geladen wurde, bevor Sie es ändern. Zum Beispiel:

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script type="text/javascript" src="my-script.js"></script>
    </head>
    <body>
        <div id="user-greeting">Welcome back, user</div>
    </body>
</html>

Javascript:

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

Da Ihr Browser nicht weiß, dass my-script.js das Dokument nicht ändert, bis es heruntergeladen und ausgeführt wird, stoppt der Parser die Analyse.

Antiquierte Empfehlung

Der alte Ansatz zur Lösung dieses Problems bestand darin, <script>-Tags unten in <body> zu setzen, da dies gewährleistet, dass der Parser nicht bis zum Ende blockiert wird. 

Dieser Ansatz hat sein eigenes Problem: Der Browser kann die Skripts erst dann herunterladen, wenn das gesamte Dokument analysiert wird. Für größere Websites mit großen Skripts und Stylesheets ist es für die Leistung sehr wichtig, das Skript so schnell wie möglich herunterladen zu können. Wenn Ihre Website nicht innerhalb von 2 Sekunden geladen wird, besuchen die Benutzer eine andere Website.

In einer optimalen Lösung würde der Browser so schnell wie möglich mit dem Herunterladen Ihrer Skripts beginnen und gleichzeitig den Rest Ihres Dokuments parsen.

Der moderne Ansatz

Heute unterstützen Browser die Attribute async und defer für Skripts. Diese Attribute teilen dem Browser mit, dass er mit dem Parsen fortfahren kann, während die Skripts heruntergeladen werden.

asynchron

<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>

Skripts mit dem Attribut async werden asynchron ausgeführt. Das Skript wird also sofort nach dem Download ausgeführt, ohne dass der Browser zwischenzeitlich blockiert wird.
Dies bedeutet, dass es möglich ist, Skript 2 vor Skript 1 herunterzuladen und auszuführen. 

Laut http://caniuse.com/#feat=script-async unterstützen 94,57% aller Browser dies.

verschieben

<script type="text/javascript" src="path/to/script1.js" defer></script>
<script type="text/javascript" src="path/to/script2.js" defer></script>

Skripts mit dem Defer-Attribut werden der Reihe nach ausgeführt (d. H. Zuerst Skript 1, dann Skript 2). Dies blockiert auch den Browser nicht.

Anders als bei asynchronen Skripts werden verzögerte Skripts erst ausgeführt, nachdem das gesamte Dokument geladen wurde.

Laut http://caniuse.com/#feat=script-defer unterstützen 94,59% aller Browser dies. 94,92% befürworten es zumindest teilweise.

Ein wichtiger Hinweis zur Browserkompatibilität: In einigen Fällen kann IE <= 9 verzögerte Skripts außerhalb der Reihenfolge ausführen. Wenn Sie diese Browser unterstützen müssen, lesen Sie zuerst this zuerst!

Fazit

Der aktuelle Stand der Technik besteht darin, Skripts in den Tag <head> zu setzen und die Attribute async oder defer zu verwenden. Auf diese Weise können Sie Ihre Skripts so schnell wie möglich herunterladen, ohne Ihren Browser zu blockieren.

Das Gute ist, dass Ihre Website immer noch korrekt auf 6% der Browser geladen werden sollte, die diese Attribute nicht unterstützen, während die anderen 94% beschleunigt werden.

1606
Bart

Kurz vor dem abschließenden Body-Tag

http://developer.yahoo.com/performance/rules.html#js_bottom

Legen Sie die Skripte nach unten

Das Problem, das durch Skripte verursacht wird, besteht darin, dass sie parallele Downloads blockieren. Die HTTP/1.1-Spezifikation legt nahe, dass Browser nicht mehr als zwei Komponenten pro Hostname parallel herunterladen. Wenn Sie Ihre Bilder von mehreren Hostnamen aus bereitstellen, können Sie mehr als zwei Downloads gleichzeitig erhalten. Während ein Skript heruntergeladen wird, startet der Browser jedoch keine weiteren Downloads, auch nicht für andere Hostnamen. 

224
Cammel

Nicht blockierende Skript-Tags können nahezu überall platziert werden:

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>
  • async Das Skript wird asynchron ausgeführt, sobald es verfügbar ist
  • defer Das Skript wird ausgeführt, wenn das Dokument mit dem Parsen fertig ist
  • Das async defer -Skript wird zurückgestellt, wenn Async nicht unterstützt wird

Solche Skripts werden asynchron/after document ready ausgeführt. Das bedeutet, dass Sie dies nicht tun können:

<script src="jquery.js" async></script>
<script>jQuery(something);</script>
<!--
  * might throw "jQuery is not defined" error
  * defer will not work either
-->

Oder dieses:

<script src="document.write(something).js" async></script>
<!--
  * might issue "cannot write into document from an asynchronous script" warning
  * defer will not work either
-->

Oder dieses:

<script src="jquery.js" async></script>
<script src="jQuery(something).js" async></script>
<!--
  * might throw "jQuery is not defined" error (no guarantee which script runs first)
  * defer will work in sane browsers
-->

Oder dieses:

<script src="document.getElementById(header).js" async></script>
<div id="header"></div>
<!--
  * might not locate #header (script could fire before parser looks at the next line)
  * defer will work in sane browsers
-->

Asynchrone Skripte bieten jedoch folgende Vorteile:

  • Paralleler Download von Ressourcen:
    Der Browser kann Stylesheets, Bilder und andere Skripts parallel herunterladen, ohne auf das Herunterladen und Ausführen eines Skripts zu warten.
  • Quellauftragsunabhängigkeit:
    Sie können die Skripts im Kopf oder Körper platzieren, ohne sich um das Blockieren zu sorgen (nützlich, wenn Sie ein CMS verwenden). Die Ausführungsreihenfolge ist dennoch wichtig.

Es ist möglich, Probleme mit der Ausführungsreihenfolge zu umgehen, indem externe Skripts verwendet werden, die Rückrufe unterstützen. Viele JavaScript-APIs von Drittanbietern unterstützen jetzt die nicht blockierende Ausführung. Hier ist ein Beispiel zum Laden des Google Maps API asynchron .

64
Salman A

Die Standardberatung, die von der Yahoo! Ein außergewöhnliches Leistungsteam besteht darin, die <script>-Tags am Ende des Dokumenthauptteils zu platzieren, damit sie das Rendern der Seite nicht blockieren.

Es gibt jedoch neuere Ansätze, die eine bessere Leistung bieten, wie in diese Antwort über die Ladezeit der Google Analytics-JavaScript-Datei beschrieben:

Es gibt einige tolle Folien von Steve Souders (Performance-Experte auf Client-Seite) über:

  • Verschiedene Techniken zum parallelen Laden externer JavaScript-Dateien
  • ihre Auswirkung auf die Ladezeit und das Rendern der Seite
  • welche Art von Statusanzeigen wird vom Browser angezeigt (z. B. "Laden" in der Statusleiste, Sanduhr-Mauszeiger).
36
orip

Wenn Sie JQuery verwenden, setzen Sie das Javascript an die Stelle, an der Sie es am besten finden, und verwenden Sie $(document).ready(), um sicherzustellen, dass die Dinge ordnungsgemäß geladen werden, bevor Sie Funktionen ausführen.

Nebenbei bemerkt: Ich mag alle meine Skript-Tags im Abschnitt <head>, da dies anscheinend der sauberste Ort ist.

22
Andrew Hare

XHTML wird nicht überprüft, wenn sich das Skript außerhalb des head-Elements befindet. Es stellt sich heraus, dass es überall sein kann.

Sie können die Ausführung mit etwas wie jQuery verzögern, so dass es keine Rolle spielt, wo sie sich befindet (mit Ausnahme eines kleinen Performance-Treffers beim Parsen).

9
Allain Lalonde
<script src="myjs.js"></script>
</body>

skript-Tags sollten immer vor body close oder Bottom in der HTML -Datei verwendet werden.

dann können Sie zuerst den Inhalt der Seite sehen, bevor Sie die Datei js laden.

Überprüfen Sie dies, falls erforderlich: http://stevesouders.com/hpws/rule-js-bottom.php

8
AmanKumar

Die herkömmliche (und weithin akzeptierte) Antwort ist "ganz unten", weil dann das gesamte DOM geladen wurde, bevor irgendetwas ausgeführt werden kann.

Aus verschiedenen Gründen gibt es Abweichende, die mit der verfügbaren Praxis beginnen, um die Ausführung absichtlich mit einem Onload-Ereignis der Seite zu beginnen.

5
dkretz

Abhängig vom Skript und seiner Verwendung kann das Bestmögliche (in Bezug auf das Laden der Seite und die Wiedergabezeit) nicht die Verwendung eines herkömmlichen <script> -Tags per se sein, sondern das Laden des Skripts asynchron dynamisch auslösen.

Es gibt verschiedene Techniken, aber am einfachsten ist es, document.createElement ("script") zu verwenden, wenn das window.onload -Ereignis ausgelöst wird. Das Skript wird dann zuerst geladen, wenn die Seite selbst gerendert wurde. Dies hat keinen Einfluss auf die Zeit, die der Benutzer warten muss, bis die Seite angezeigt wird.

Dies setzt natürlich voraus, dass das Skript selbst nicht für das Rendern der Seite benötigt wird.

Weitere Informationen finden Sie in den post Coupling async-Skripts von Steve Souders (Ersteller von YSlow, aber jetzt bei Google).

1
stpe

Das Einschließen von Skripten am Ende wird hauptsächlich verwendet, wenn der Inhalt/die Stile der Website zuerst angezeigt werden sollen.

durch das Einfügen der Skripts in den Kopf werden die Skripts früh geladen und können vor dem Laden der gesamten Website verwendet werden.

wenn die Skripts zuletzt eingegeben werden, erfolgt die Validierung erst nach dem Laden der gesamten Stile und des Designs, was für schnell reagierende Websites nicht erwünscht ist.

0
Sanjeev S

Abhängig davon, wenn Sie ein Skript laden, das zum Gestalten Ihrer Seite/zum Verwenden von Aktionen auf Ihrer Seite (z. B. durch Klicken auf eine Schaltfläche) erforderlich ist, platzieren Sie es besser oben. Wenn Ihr Stil zu 100% aus CSS besteht und Sie über alle Fallback-Optionen für die Tastenaktionen verfügen, können Sie sie unten platzieren.

Oder das Beste (wenn das kein Problem ist) ist, dass Sie eine modale Ladebox erstellen können, platzieren Sie Ihr Javascript am Ende Ihrer Seite und lassen Sie es verschwinden, wenn die letzte Zeile Ihres Skripts geladen wird. Auf diese Weise können Sie verhindern, dass Benutzer Aktionen auf Ihrer Seite verwenden, bevor die Skripts geladen werden. Und vermeiden Sie auch das falsche Styling.

0
ahmedmzl
  • Wenn Sie immer noch viel Wert auf Unterstützung und Leistung in IE <10 legen, sollten Sie IMMER Ihre Skript-Tags zu den letzten Tags Ihres HTML-Texts machen. Auf diese Weise sind Sie sicher, dass der Rest des DOM geladen wurde, und Sie werden das Rendern nicht blockieren.

  • Wenn Sie sich nicht mehr für IE <10 interessieren, sollten Sie Ihre Skripts in den Kopf Ihres Dokuments einfügen und mit defer sicherstellen, dass sie erst ausgeführt werden, nachdem Ihr DOM geladen wurde (<script type="text/javascript" src="path/to/script1.js" defer></script>). Wenn Sie dennoch möchten, dass Ihr Code in IE <10 funktioniert, vergessen Sie nicht, Ihren Code selbst in einen window.onload einzuwickeln!

0
user5803163

Der moderne Ansatz im Jahr 2019 verwendet ES6-Modultyp-Skripts.

<script type="module" src="..."></script>

Standardmäßig werden Module asynchron geladen und verzögert. Sie können sie an beliebiger Stelle platzieren. Sie werden parallel geladen und ausgeführt, wenn die Seite vollständig geladen ist. 

Die Unterschiede zwischen einem Skript und einem Modul werden hier beschrieben:

https://stackoverflow.com/a/53821485/731548

Die Ausführung eines Moduls im Vergleich zu einem Skript wird hier beschrieben:

https://developers.google.com/web/fundamentals/primers/modules#defer

Support wird hier gezeigt:

https://caniuse.com/#feat=es6-module

0
cquezel

Ich denke, es hängt von der Ausführung der Webseite ab. Wenn die Seite, die Sie anzeigen möchten, nicht richtig angezeigt werden kann, ohne zuerst JavaScript zu laden, sollten Sie zuerst die JavaScript-Datei einfügen. Wenn Sie jedoch eine Webseite anzeigen oder rendern können, ohne zunächst die JavaScript-Datei herunterzuladen, sollten Sie den JavaScript-Code unten auf der Seite einfügen. Da es ein schnelles Laden der Seite nachbildet, scheint die Seite aus Sicht des Benutzers schneller zu laden. 

0
Amit Mhaske

Script blockiert das DOM-Laden, bis es geladen und ausgeführt wird.

Wenn Sie Skripte am Ende von <body> platzieren, hat das gesamte DOM die Möglichkeit zu laden und zu rendern (die Seite wird "schneller" angezeigt). <script> hat Zugriff auf alle diese DOM-Elemente.

Wenn Sie es dagegen nach <body> start oder darüber setzen, wird ein Skript ausgeführt (bei dem noch keine DOM-Elemente vorhanden sind).

Sie enthalten jQuery, was bedeutet, dass Sie es an beliebiger Stelle platzieren können, und .ready () verwenden.

0
Szymon Toda

Sie können die meisten <script>-Referenzen am Ende von <body> platzieren.
Wenn auf Ihrer Seite aktive Komponenten vorhanden sind, die externe Skripts verwenden,
dann sollte ihre abhängigkeit (js-dateien) davor kommen (idealerweise in head tag).

0
Tech AG

Am Ende des HTML-Dokuments

Damit wird das Laden des HTML-Dokuments im Browser zum Zeitpunkt der Ausführung nicht beeinflusst.

0
Mr_Blue

Der beste Ort, um das <script> -Tag zu platzieren, liegt vor dem Schließen des </body> -Tags, sodass das Herunterladen und Ausführen des Tags den Browser nicht daran hindert, das HTML im Dokument zu analysieren.

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

aber moderner Browser unterstützt auch andere optimale Möglichkeiten, wie async und defer auf extern laden javascript Dateien.

Async und Defer

Normalerweise HTML-Seite Ausführung beginnt Zeile für Zeile. Wenn ein externes JavaScript Element angetroffen wird, wird HTML-Parsing gestoppt, bis ein JavaScript-Download und zur Ausführung bereit ist. Diese normale Seitenausführung kann mit den Attributen defer und async geändert werden.

Defer

Wenn ein Zurückstellungs Attribut verwendet wird, wird JavaScript parallel mit HTML-Analyse heruntergeladen, aber wird ausgeführt wird erst nach vollständiger HTML-Analyse durchgeführt wird.

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

Async

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

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

Wann werden welche Attribute verwendet?

  • Wenn Ihr Skript unabhängig von anderen Skripten und ist modular aufgebaut, verwendet async.
  • Wenn Sie script1 und script2 laden mit async, werden beide laufen
    Parallel zusammen mit HTML-Analyse, sobald sie heruntergeladen werden
    und verfügbar.
  • Wenn Ihr Skript auf einem anderen Skript hängt dann verwenden defer für beide:
  • Wenn script1 und script2 in dieser Reihenfolge mit defer geladen werden, wird script1 garantiert zuerst ausgeführt.
  • Dann wird script2 ausgeführt, nachdem script1 vollständig ausgeführt wurde.
  • Muss dies tun, wenn script2 von script1 abhängt.
  • Wenn Ihr Skript klein genug ist und von einem anderen Skript vom Typ async abhängt, verwenden Sie Ihr Skript ohne Attribute und platzieren Sie es vor allen Skripten von async.

referenz: knowledgehills.com

0
Haritsinh Gohil