Wo soll ich <script> -Tags in HTML-Markups einfügen?

1488

Wo kann beim Einbetten von JavaScript in ein HTML-Dokument die <script>Tags und das enthaltene JavaScript richtig platziert werden ? Ich erinnere mich, dass Sie diese nicht in den <head>Abschnitt einfügen sollten, aber das Platzieren am Anfang des <body>Abschnitts ist auch schlecht, da das JavaScript analysiert werden muss, bevor die Seite vollständig gerendert wird (oder so ähnlich). Dies scheint das Ende des <body>Abschnitts als logischen Ort für <script>Tags zu belassen.

Wo ist der richtige Ort, um die <script>Tags zu platzieren?

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

javascript jquery html Mipadi
quelle
Für den Fall, dass Sie auch nur nach einer einfachen Lösung suchen und einen serverseitigen Generator wie Jekyll verwenden, empfehle ich, stattdessen das Skript beizufügen. so viel einfacher!
Cregox

Antworten:

1863

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

  1. Holen Sie sich die HTML-Seite (zB index.html)
  2. Beginnen Sie mit dem Parsen 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 beendet ihn nicht mehr.
  5. Nach einiger Zeit wird das Skript heruntergeladen und anschließend ausgeführt.
  6. Der Parser analysiert weiterhin den Rest des HTML-Dokuments.

Schritt 4 führt zu einer schlechten Benutzererfahrung. Ihre Website wird grundsätzlich erst geladen, wenn Sie alle Skripte heruntergeladen haben. Wenn es eine Sache gibt, die Benutzer hassen, wartet sie darauf, dass eine Website geladen wird.

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 er den Rest des Dokuments sicher analysieren kann. Immerhin das Skript könnte haben einen eigenen HTML - Code in das Dokument eingefügt.

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

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script 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 erst ändern wird, wenn es heruntergeladen und ausgeführt wurde, beendet der Parser das Parsen.

Antiquierte Empfehlung

Der alte Ansatz zur Lösung dieses Problems bestand darin, <script>Tags am unteren Rand Ihres zu platzieren <body>, da dadurch sichergestellt wird, dass der Parser nicht bis zum Ende blockiert wird.

Dieser Ansatz hat sein eigenes Problem: Der Browser kann erst mit dem Herunterladen der Skripte beginnen, wenn das gesamte Dokument analysiert wurde. Bei größeren Websites mit großen Skripten 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, wechseln die Benutzer zu einer anderen Website.

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

Der moderne Ansatz

Heute unterstützen Browser die Attribute asyncund deferin Skripten. Diese Attribute teilen dem Browser mit, dass das Parsen sicher fortgesetzt werden kann, während die Skripte heruntergeladen werden.

asynchron

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

Skripte mit dem Attribut async werden asynchron ausgeführt. Dies bedeutet, dass das Skript ausgeführt wird, sobald es heruntergeladen wurde, ohne den Browser in der Zwischenzeit zu blockieren.
Dies bedeutet, dass Skript 2 vor Skript 1 heruntergeladen und ausgeführt werden kann.

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

verschieben

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

Skripte mit dem Attribut defer werden der Reihe nach ausgeführt (dh zuerst Skript 1, dann Skript 2). Dies blockiert auch nicht den Browser.

Im Gegensatz zu asynchronen Skripten werden verzögerte Skripte erst ausgeführt, nachdem das gesamte Dokument geladen wurde.

Laut http://caniuse.com/#feat=script-defer unterstützen 97,79% aller Browser dies. 98,06% unterstützen es zumindest teilweise.

Ein wichtiger Hinweis zur Browserkompatibilität: Unter bestimmten Umständen führt IE <= 9 verzögerte Skripte in unregelmäßiger Reihenfolge aus. Wenn Sie diese Browser unterstützen müssen, lesen Sie dies bitte zuerst!

Fazit

Der aktuelle Stand der Technik besteht darin, Skripte in das <head>Tag einzufügen und die Attribute asyncoder zu verwenden defer. Auf diese Weise können Ihre Skripte so schnell wie möglich heruntergeladen werden, ohne Ihren Browser zu blockieren.

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

Bart
quelle
63
Ich bin überrascht, dass niemand Googles Erklärung zitiert hat ... developer.google.com/speed/docs/insights/BlockingJS
Casey Falk
6
Mir ist nicht klar, was das DOM berührt und was nicht. Könntest Du das erläutern? Ist es sicher, etwas wie jquery.js asynchron zu laden?
Doug
7
@Doug Zum Beispiel document.writearbeitet auf dem Dom. Die Frage ist nicht, ob ein Skript den Dom manipuliert, sondern wann . Solange alle Dom-Manipulationen nach dem domreadyAuslösen des Ereignisses erfolgen, sind Sie in Ordnung. jQuery ist eine Bibliothek und manipuliert - oder sollte - den Dom nicht selbst.
Bart
24
Diese Antwort ist irreführend. Moderne Browser hören nicht auf zu analysieren, wenn sie ein synchrones Skript-Tag erreichen, das sich auf den HTML-Code auswirken kann. Sie beenden lediglich das Rendern / Ausführen und setzen die Analyse optimistisch fort, um andere Ressourcen herunterzuladen, die wahrscheinlich später angefordert werden, wenn kein HTML betroffen ist.
Fabio Beltramini
40
Warum die asyncund defersind Attribute nicht nirgendwo verwendet? Ich meine, ich habe viele HTML-Quellen aus dem Internet angesehen und sehe die Attribute asyncund defernirgendwo. ...?
John CJ
239

Kurz vor dem schließenden Body-Tag, wie auf angegeben

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

Fügen Sie unten Skripte ein

Das durch Skripte verursachte Problem besteht darin, dass sie parallele Downloads blockieren. Die HTTP / 1.1-Spezifikation schlägt vor, 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 durchführen. Während ein Skript heruntergeladen wird, startet der Browser jedoch keine anderen Downloads, auch nicht unter verschiedenen Hostnamen.

Cammel
quelle
7
Einverstanden mit dem Konzept und seiner Erklärung. Aber was passiert, wenn der Benutzer mit der Seite spielt? Angenommen, ich habe ein AJAX-Dropdown-Menü, das geladen wird, nachdem die Seite dem Benutzer angezeigt wurde, aber während sie geladen wird, klickt der Benutzer darauf! Und was ist, wenn ein "wirklich ungeduldiger" Benutzer das Formular einreicht?
Hemant Tank
9
@Hermant Alter Kommentar, aber Sie können den Trick ausführen, indem Sie die Felder standardmäßig deaktivieren und sie dann mit JS aktivieren, wenn das DOM vollständig geladen ist. Das scheint Facebook heutzutage zu tun.
Novato
2
Habe dies gerade mit Chrom getestet, um zu überprüfen, ob dies immer noch dasselbe ist. Es ist. Hier können Sie die Unterschiede in der Ladezeit Ihrer Browser überprüfen. stevesouders.com/cuzillion
Chiffre
46
Wenn dies die beste Vorgehensweise ist, warum enthält der Stapelüberlauf alle Skript-Tags in <head>? :-P
Philip
10
In einigen Fällen, insbesondere an schweren Ajax-Standorten, kann das Laden im Kopf tatsächlich zu schnelleren Ladezeiten führen. Siehe: encosia.com/dont-let-jquerys-document-ready-slow-you-down (Beachten Sie, dass die Funktion "live ()" in jquery veraltet ist, der Artikel jedoch weiterhin mit "on ()" oder " delegieren "Funktion). Das Laden in <head> kann auch erforderlich sein, um ein korrektes Verhalten zu gewährleisten, wie von @Hermant hervorgehoben. Schließlich empfiehlt modernizr.com/docs , die Skripte aus den auf der Website erläuterten Gründen im <head> zu platzieren.
Nathan
77

Nicht blockierende Skript-Tags können fast ü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 Parsen des Dokuments abgeschlossen ist
  • async defer Das Skript greift auf das verzögerte Verhalten zurück, wenn Async nicht unterstützt wird

Solche Skripte werden asynchron / nach Dokumentbereitschaft ausgeführt, was 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 Skripte parallel herunterladen, ohne auf das Herunterladen und Ausführen eines Skripts warten zu müssen.
  • Unabhängigkeit von
    der Quellreihenfolge : Sie können die Skripte in Kopf oder Körper platzieren, ohne sich Gedanken über das Blockieren machen zu müssen (nützlich, wenn Sie ein CMS verwenden). Die Ausführungsreihenfolge ist jedoch weiterhin wichtig.

Es ist möglich, die Ausführungsreihenfolgeprobleme 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 für das asynchrone Laden der Google Maps-API .

Salman A.
quelle
2
Dies ist die richtige Antwort für heute - mit diesem Ansatz ist es einfacher, Ihre Widgets in sich geschlossen zu halten, ohne dass Sie ausgefallene <head>Include-Logik benötigen .
Daniel Sokolowski
1
Ich bin verwirrt, warum Sie jQuery nicht verwenden können asyncoder deferwie Sie es in Ihrem zweiten Block angeben : <script src="jquery.js" async></script>. Können Sie erklären warum? Ich dachte, ich muss das Async-Tag für die Leistung haben - gemäß der akzeptierten Antwort - damit meine Seite auch geladen werden kann, während jQuery noch geladen wird. Vielen Dank!
Ellenbogenlobstercowstand
3
@elbow 99% der Zeit <script src=jquery.js>durch , gefolgt $(function(){ ... })Blöcke irgendwo auf der Seite. Das asynchrone Laden garantiert nicht, dass jQuery geladen wird, wenn der Browser versucht, diese Blöcke zu analysieren, daher wird ein nicht definierter Fehler ausgelöst (möglicherweise wird der Fehler nicht angezeigt, wenn jQuery aus dem Cache geladen wurde). Ich habe eine Frage zum asynchronen Laden und Beibehalten von jQuery beantwortet $(function(){ ... }). Ich werde sehen, ob ich es finden könnte, oder Sie können sich diese Frage ansehen
Salman A
1
@ SalmanA Danke! Ja, ich falle in diese 99%. Ich brauche zuerst jquerylib zum Laden, dann meine restlichen .jsSkripte. Wenn ich asyncoder deferauf dem jquerylib-Skript-Tag deklariere , .jsfunktionieren meine Skripte nicht. Ich dachte, das wäre $(function(){ ... })geschützt - rate nicht. Aktuelle Lösung: ich nicht hinzufügen deferoder asyncauf jquerylib Skript, aber ich füge asyncauf meiner Follow - up - .jsSkripten. Hinweis: Der Grund , warum ich tue , jede davon ist Google Page Speed glücklich zu machen. Nochmals vielen Dank für die Hilfe! Jeder andere Rat ist willkommen. (Oder ein Link zu Ihrer vorherigen Antwort). :)
Ellenbogenlobstercowstand
@elbow Siehe stackoverflow.com/a/21013975/87015 , es gibt Ihnen nur eine Idee, aber nicht die vollständige Lösung. Sie können stattdessen nach "jquery async loader library" suchen.
Salman A
38

Die Standardberatung, die von Yahoo! Das außergewöhnliche Leistungsteam muss die <script>Tags am Ende des Dokumententexts platzieren, damit sie das Rendern der Seite nicht blockieren.

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

Es gibt einige großartige Folien von Steve Souders (clientseitiger Performance-Experte) über:

  • Verschiedene Techniken zum parallelen Laden externer JavaScript-Dateien
  • ihre Auswirkung auf die Ladezeit und das Rendern von Seiten
  • Welche Art von "in Bearbeitung" -Anzeigen der Browser anzeigt (z. B. "Laden" in der Statusleiste, Sanduhr-Mauszeiger).
orip
quelle
25

Wenn Sie JQuery verwenden, platzieren Sie das Javascript dort, wo Sie es am besten finden, und $(document).ready()stellen Sie sicher, dass die Dinge ordnungsgemäß geladen werden, bevor Sie Funktionen ausführen.

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

Andrew Hare
quelle
14
im Kopf ... ähm? <header>?
Dan Lugg
7
Beachten Sie, dass die Verwendung $(document).ready()nicht bedeutet, dass Sie Ihr JavaScript an einer beliebigen Stelle ablegen können. Sie müssen es dennoch nach der Stelle <script src=".../jquery.min.js">einfügen, an der Sie jQuery einfügen, damit es $vorhanden ist.
Rory O'Kane
2
Es ist nicht optimal, Skript-Tags in den Abschnitt <head> einzufügen. Dadurch wird die Anzeige des sichtbaren Teils der Seite verzögert, bis die Skripte geladen werden.
CyberMonk
Nein, @ Dan, ein headerElement ist Teil der das HTML - Dokument Inhalt und sollten ein oder mehrere Male innerhalb des auftreten bodyElement . The head` - Tag ist für Meta-Daten und Nicht-Inhaltsdaten für das Dokument. Es ist in diesen Tagen, mit deferund asyncein idealer Ort für Script - Tags. headerElemente sollten nur Informationen enthalten, die den darauf folgenden Abschnitt des Dokuments beschreiben.
ProfK
1
@ProfK, Dan bezog sich auf die ursprüngliche unbearbeitete Frage, als er diese vor über 4 Jahren veröffentlichte. Wie Sie sehen, wurde die Frage ein Jahr später bearbeitet.
Kojow7
18

Der moderne Ansatz im Jahr 2019 verwendet Skripte vom Typ ES6-Modul .

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

Standardmäßig werden Module asynchron geladen und verzögert. Das heißt, Sie können sie an einer beliebigen Stelle platzieren und 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

Unterstützung wird hier gezeigt:

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

cquezel
quelle
nette Infos zur Wissensdatenbank hinzufügen
Sagar
1
Nur ein Hinweis, dass dies nicht funktioniert, wenn Sie nur Dinge auf Ihrem lokalen Dateisystem ohne Server ausprobieren. Zumindest in Chrome wird beim Versuch, die js aus dem HTML-Code zu laden, ein Ursprungsfehler angezeigt, obwohl beide denselben Ursprung haben, Ihr Dateisystem.
Hippietrail
11

XHTML wird nicht überprüft, ob sich das Skript an einer anderen Stelle als im head-Element befindet. Es stellt sich heraus, dass es überall sein kann.

Sie können die Ausführung mit etwas wie jQuery verschieben, sodass es keine Rolle spielt, wo es platziert ist (mit Ausnahme eines kleinen Leistungstreffers beim Parsen).

Allain Lalonde
quelle
1
XHTML wird mit Skript-Tags im Body validiert, sowohl streng als auch vorübergehend. Stil-Tags dürfen sich jedoch nur im Kopf befinden.
I.devries
11 
<script src="myjs.js"></script>
</body>

Das Skript-Tag sollte immer vor dem Schließen des Körpers oder unten in der HTML- Datei verwendet werden.

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

Überprüfen Sie dies bei Bedarf: http://stevesouders.com/hpws/rule-js-bottom.php

AmanKumar
quelle
2
Dies beantwortete tatsächlich die Frage. Ich habe mich gefragt, ob fast alle veröffentlichten Beispiele nie den richtigen visuellen Kontext für "Ende der Seite" gegeben haben
Ken Ingram
1
Diese Antwort ist sehr irreführend und höchstwahrscheinlich falsch. Die Artikel in Google und in MDN legen nahe, dass synchrones JS (was hier der Fall ist) immer die DOM-Konstruktion und das Parsen blockiert, was zu einem verzögerten ersten Rendern führt. Daher können Sie den Inhalt der Seite erst sehen, wenn die JS-Datei abgerufen wurde und die Ausführung abgeschlossen ist, unabhängig davon, wo Sie Ihre JS-Datei im HTML-Dokument
ablegen,
Es verweist auch auf Punkte aus dem Jahr 2009, die nicht mehr relevant sind.
Toxaq
7

Die konventionelle (und allgemein akzeptierte) Antwort lautet "ganz unten", da dann das gesamte DOM geladen wurde, bevor etwas ausgeführt werden kann.

Es gibt aus verschiedenen Gründen Andersdenkende, die mit der verfügbaren Praxis beginnen, die Ausführung absichtlich mit einem Ereignis zum Laden von Seiten zu beginnen.

dkretz
quelle
6

Der beste Ort, um ein <script>Tag zu platzieren, ist vor dem Schließen des </body>Tags , damit das Herunterladen und Ausführen des Tags den Browser nicht blockiert, um das HTML im Dokument zu analysieren.

Auch das externe Laden der js-Dateien hat seine eigenen Vorteile sie von Browsern zwischengespeichert werden und das Laden von Seiten beschleunigen können . Sie trennen den HTML- und JavaScript-Code und helfen, die Codebasis besser zu verwalten .

aber moderner Browser unterstützt auch andere optimale Möglichkeiten , wie asyncund deferextern zu laden javascriptDateien.

Async und Defer

Normalerweise beginnt die Ausführung von HTML-Seiten Zeile für Zeile. Wenn ein externes JavaScript-Element angetroffen wird, wird die HTML-Analyse gestoppt, bis ein JavaScript heruntergeladen und zur Ausführung bereit ist. Diese normale Seitenausführung kann mit deferund asyncAttribut geändert werden .

Defer

Wenn ein Defer-Attribut verwendet wird, wird JavaScript parallel zur HTML-Analyse heruntergeladen, jedoch erst ausgeführt, nachdem die vollständige HTML-Analyse abgeschlossen ist.

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

Async

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

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

Wann welche Attribute verwendet werden sollen

  • Wenn Ihr Skript von anderen Skripten unabhängig und modular ist, verwenden Sie async .
  • Wenn Sie script1 und script2 mit laden async, werden beide ausgeführt
    parallel zusammen mit der HTML-Analyse ausgeführt, sobald sie heruntergeladen
    und verfügbar sind.
  • Wenn Ihr Skript von einem anderen Skript abhängt, verwenden Sie defer für beide:
  • Wenn script1 und script2 in dieser Reihenfolge mit geladen werden defer , wird garantiert, dass script1 zuerst ausgeführt wird.
  • 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 abhängig ist, asyncverwenden Sie Ihr Skript ohne Attribute und platzieren Sie es über allen asyncSkripten.

Referenz: Knowledgehills.com

Haritsinh Gohil
quelle
3

Abhängig davon, ob Sie ein Skript laden, das zum Stylen Ihrer Seite / Verwenden von Aktionen auf Ihrer Seite erforderlich ist (z. B. Klicken auf eine Schaltfläche), platzieren Sie es besser oben. Wenn Ihr Styling 100% CSS ist und Sie alle Fallback-Optionen für die Schaltflächenaktionen haben, können Sie es unten platzieren.

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

ahmedmzl
quelle
3

Das Einfügen von Skripten am Ende wird hauptsächlich dort verwendet, wo der Inhalt / die Stile der Website zuerst angezeigt werden sollen.

Durch das Einfügen der Skripte in den Kopf werden die Skripte frühzeitig geladen und können vor dem Laden der gesamten Website verwendet werden.

Wenn die Skripte endlich eingegeben werden, erfolgt die Validierung erst nach dem Laden des gesamten Stils und Designs, was für schnell reagierende Websites nicht geschätzt wird.

Sanjeev S.
quelle
2

Abhängig vom Skript und seiner Verwendung besteht das bestmögliche (in Bezug auf das Laden der Seite und die Renderzeit) möglicherweise darin, keinen herkömmlichen <script> -Tag an sich zu verwenden, sondern das Laden des Skripts dynamisch asynchron auszulösen.

Es gibt verschiedene Techniken, aber am einfachsten ist es, document.createElement ("script") zu verwenden, wenn das Ereignis window.onload ausgelöst wird. Dann wird das Skript zuerst geladen, wenn die Seite selbst gerendert wurde, was sich nicht auf die Zeit auswirkt, die der Benutzer warten muss, bis die Seite angezeigt wird.

Dies erfordert natürlich, dass das Skript selbst nicht zum Rendern der Seite benötigt wird.

Weitere Informationen finden Sie in den Post- Coupling-Async-Skripten von Steve Souders (Ersteller von YSlow, jetzt jedoch bei Google).

stpe
quelle
2

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

  • Wenn Ihnen IE <10 nicht mehr so ​​wichtig ist, sollten Sie Ihre Skripte in den Kopf Ihres Dokuments einfügen und defersicherstellen, 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 in eine window.onloadgerade Zeile zu setzen!


quelle
In der akzeptierten Antwort wird dies als "veraltete Empfehlung" bezeichnet. Wenn Sie es immer noch ernst meinen, sollten Sie wahrscheinlich einen Verweis vorlegen, um es zu unterstützen.
Dakab
1

Das Skript blockiert das Laden des DOM, bis es geladen und ausgeführt wird.

Wenn Sie Skripte am Ende des <body>gesamten DOM platzieren, kann es geladen und gerendert werden (die Seite wird schneller "angezeigt"). <script>haben Zugriff auf alle diese DOM-Elemente.

Wenn Sie es nach dem <body>Start oder höher platzieren, wird das Skript ausgeführt (wo noch keine DOM-Elemente vorhanden sind).

Sie schließen jQuery ein, was bedeutet, dass Sie es platzieren können, wo immer Sie möchten und .ready () verwenden.

Szymon Toda
quelle
1

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 einschließen. Wenn Sie jedoch eine Webseite anzeigen / rendern können, ohne zunächst eine JavaScript-Datei herunterzuladen, sollten Sie den JavaScript-Code am Ende der Seite einfügen. Da es ein schnelles Laden von Seiten emuliert und aus Sicht eines Benutzers scheint es, dass diese Seite schneller geladen wird.

Amit Mhaske
quelle
1

Sie können die meisten <script>Verweise am Ende von platzieren <body>.
Wenn jedoch auf Ihrer Seite aktive Komponenten vorhanden sind, die externe Skripts verwenden, sollte
deren Abhängigkeit (js-Dateien) davor stehen (idealerweise im Head-Tag).

Tech AG
quelle
1

Vor dem Ende des Body-Tags, um ein Blockieren der Benutzeroberfläche zu verhindern.

Anoop Gupta
quelle
-1

Am Ende des HTML-Dokuments

Damit wird das Laden des HTML-Dokuments in den Browser zum Zeitpunkt der Ausführung nicht beeinträchtigt.

Mr_Blue
quelle
-1

Der beste Ort, um Ihren JavaScriptCode zu schreiben , ist am Ende des Dokuments nach oder direkt vor dem </body>Tag, um das Dokument zuerst zu laden und dann js-Code auszuführen.

<script> ... your code here ... </script>
</body>

Und wenn Sie JQueryFolgendes schreiben, kann es sich um das Hauptdokument handeln, das nach dem Laden des Dokuments ausgeführt wird:

<script>
$(document).ready(function(){
   //your code here...
});
</script>
nada diaa
quelle
es wirftSyntaxError
Raz
Ihre Antwort war nicht falsch, musste aber dringend aktualisiert werden.
Paul Carlton vor
-2

Für mich ist es sinnvoller, das Skript nach dem HTML-Code einzufügen. Weil ich den Dom die meiste Zeit laden muss, bevor ich mein Skript ausführe. Ich könnte es in das Head-Tag einfügen, aber ich mag nicht den gesamten Listener für das Laden von Dokumenten. Ich möchte, dass mein Code kurz und bündig und leicht zu lesen ist.

Ich habe gehört, dass alte Versionen von Safari beim Hinzufügen Ihres Skripts außerhalb des Head-Tags unangenehm waren, aber ich sage, wen interessiert das? Ich kenne niemanden, der diesen alten Mist benutzt, oder?

Gute Frage übrigens.

Zachdyer
quelle
-6

Sie können die Skripte dort platzieren, wo Sie möchten, und eines ist nicht besser als eine andere.

Die Situation ist wie folgt:

Das Laden der Seite erfolgt linear von oben nach unten. Wenn Sie also das Skript in den Kopf einfügen, wird sichergestellt, dass es vor allem geladen wird. Wenn Sie es jetzt in den mit dem Code gemischten Text einfügen, kann dies zu einem unansehnlichen Laden der Seite führen.

Die Ermittlung bewährter Verfahren hängt nicht davon ab, wo.

Um Sie zu unterstützen, werde ich Folgendes erwähnen:

Sie können platzieren:

und die Seite wird linear geladen

Seite wird asynchron mit anderen Inhalten geladen

Der Inhalt der Seite wird vor und nach Abschluss des Ladevorgangs geladen. Die Skripte werden geladen

Eine gute Praxis wäre hier, wann wird jeder umgesetzt?

Ich hoffe, ich war hilfreich, alles beantwortet mir nur dieses Problem.

Juan Miguel
quelle