Wo kann man JavaScript in eine HTML-Datei einfügen?

210

Angenommen, ich habe eine ziemlich umfangreiche JavaScript-Datei, die auf ungefähr 100 KB oder so gepackt ist. Mit Datei meine ich, dass es sich um eine externe Datei handelt, die über verknüpft <script src="...">und nicht in den HTML-Code selbst eingefügt wird.

Wo kann man das am besten in den HTML-Code einfügen?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

Wird es einen funktionalen Unterschied zwischen den einzelnen Optionen geben?

javascript html optimization nickf
quelle
Mögliches Duplikat von Wo soll ich <script> -Tags in HTML-Markups einfügen?
Ivar

Antworten:

175

Das Yahoo! Das Team von Exceptional Performance empfiehlt , Skripte am Ende Ihrer Seite zu platzieren, da Browser Komponenten herunterladen.

Natürlich ist Levis Kommentar "kurz bevor du ihn brauchst und nicht früher" wirklich die richtige Antwort, dh "es kommt darauf an".

Walter Rumsby
quelle
4
Wenn Sie beispielsweise eine Reihe von jQuery-Aufgaben ausführen möchten, muss die Bibliothek geladen werden, bevor Sie tatsächlich versuchen, sie zu verwenden.
BryanH
58
Der Grund, warum Yahoo EPT empfiehlt, JS ganz unten zu platzieren, liegt darin, dass der Browser in den Single-Thread-Modus wechseln muss, während der JS geladen und dann ausgeführt wird. Befindet sich das Skript im Kopf oder in der Mitte des Inhalts, wird der Browser "angehalten", während er sich mit dem JS befasst. Wenn Sie das JS unten platzieren, wird der Inhalt geladen und ist allgemein sichtbar, sodass der Benutzer mit dem Lesen beginnen kann, während sich der Browser noch mit dem JS befasst.
BryanH
1
Hallo. Fügen wir Code wie diesen auch $(function () {...})als Ende der Seite ein oder muss er sich im Inneren befinden <head>?
Thang Pham
7
Ich hoffe, dass der Verweis auf "Ende Ihrer Seite" hier nicht darüber hinaus geht </body>?
Mr_Green
1
Moderne Browser können auch das Attribut "Aufschieben" lesen. Sie können defer = "defer" für Skript-Tags festlegen, die sich nicht am unteren Rand des <body> befinden. Wenn der Browser diese sieht, lädt er zuerst den Rest des HTML-Codes und geht dann zurück und interpretiert den Inhalt von das Skript-Tag. Dies ist hilfreich, wenn Sie ein Framework verwenden, bei dem Sie nicht die vollständige Kontrolle über die Seite haben. Stöbern Sie in diesem Artikel und beachten Sie, dass es sich um ein lebendes Dokument handelt, sodass einige Informationen veraltet sind: stackoverflow.com/questions/5250412/…
LinuxDisciple
75

Der beste Ort dafür ist kurz bevor Sie es brauchen und nicht früher.

Abhängig vom physischen Standort Ihrer Benutzer kann die Verwendung eines Dienstes wie des S3-Dienstes von Amazon Benutzern helfen, ihn von einem Server herunterzuladen, der ihnen physisch näher liegt als Ihr Server.

Ist Ihr js-Skript eine häufig verwendete Bibliothek wie jQuery oder ein Prototyp? In diesem Fall gibt es eine Reihe von Unternehmen wie Google und Yahoo, die über Tools verfügen, mit denen Sie diese Dateien in einem verteilten Netzwerk bereitstellen können.

Levi Rosol
quelle
60

Als Faustregel gilt, dass der beste Ort zum Platzieren von <script>Tags das Ende der Seite unmittelbar vor dem </body>Tag ist. Etwas wie das:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

Warum?

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. Mehr...

CSS

Ein bisschen abseits des Themas, aber ... Stylesheets ganz oben platzieren.

Bei der Untersuchung der Leistung bei Yahoo! haben wir festgestellt, dass das Verschieben von Stylesheets in das Dokument HEAD dazu führt, dass Seiten schneller geladen werden. Dies liegt daran, dass durch das Einfügen von Stylesheets in den HEAD die Seite schrittweise gerendert werden kann. Mehr...

Weiterführende Literatur

Yahoo hat einen wirklich coolen Leitfaden veröffentlicht, der Best Practices zur Beschleunigung einer Website auflistet. Auf jeden Fall lesenswert: https://developer.yahoo.com/performance/rules.html

Martynas
quelle
1
"Das Problem, das durch Skripte verursacht wird, ist, dass sie parallele Downloads blockieren." - Das ist nicht mehr wahr: w3.org/TR/html5/scripting-1.html#attr-script-async
Quentin
4

Mit 100k Javascript sollten Sie es niemals in die Datei einfügen. Verwenden Sie eine externe Skript-Javascript-Datei. Es gibt keine Chance in der Hölle, dass Sie diese Menge an Code immer nur in einer HTML-Seite verwenden. Wahrscheinlich fragen Sie, wo Sie die Javascript-Datei laden sollen, dafür haben Sie bereits zufriedenstellende Antworten erhalten.

Ich möchte jedoch darauf hinweisen, dass moderne Browser häufig gzip ped Javascript-Dateien akzeptieren ! Gzipen Sie einfach die x.jsDatei auf x.js.gzund zeigen Sie im srcAttribut darauf. Es funktioniert nicht auf dem lokalen Dateisystem. Sie benötigen einen Webserver, damit es funktioniert. Die Einsparungen bei den übertragenen Bytes können jedoch enorm sein.

Ich habe es erfolgreich in Firefox 3, MSIE 7, Opera 9 und Google Chrome getestet. In Safari 3 funktioniert das anscheinend nicht so.

Weitere Informationen finden Sie in diesem Blog-Beitrag und auf einer anderen sehr alten Seite , die dennoch nützlich ist, da sie darauf hinweist, dass der Webserver erkennen kann, ob ein Browser komprimiertes Javascript akzeptiert oder nicht. Wenn Ihre Serverseite dynamisch wählen kann, ob der komprimierte oder der einfache Text gesendet werden soll, können Sie die Seite in allen Webbrowsern verwenden.

Bart
quelle
8
Sie haben die Frage des OP falsch verstanden. Er fragte, wo im HTML das Skript-Tag platziert werden soll. Er verwendete bereits eine externe Datei und fügte das Skript nicht ein. Zugegebenermaßen war dies vor seiner Bearbeitung der Frage im April '09 weniger klar. Vielleicht diese Antwort löschen?
Mark Amery
@Leandro Ich denke, das liegt daran, dass die Leute die eigentliche Frage nicht immer im Auge behalten und dennoch Antworten wie diese für nützlich halten. Diese Antwort ist jedoch nützlich, aber nicht unbedingt relevant. Es könnte besser funktionieren, wenn der Abstimmungs-Tooltip einen expliziteren Wortlaut enthält, z. B. "Diese Antwort ist nützlich und relevant".
WynandB
1
Bei gzipped Javascript: Sie können Ihren Webserver einfach so konfigurieren, dass er auch komprimiert wird ... (Oder verwenden Sie so etwas wie das gzip_static-Modul / die Option ggin_static von nginx) (und das gunzip-Modul für andere Clients). Das sollte mindestens den richtigen Header für den Inhaltstyp senden. mit als gzip markierter Codierung, was wahrscheinlich zu einer noch besseren Browserunterstützung führt
Gert van den Berg
4

Das Javascript oben zu platzieren scheint ordentlicher zu sein, aber funktionell ist es besser, nach dem HTML zu streben. Auf diese Weise wird Ihr Javascript nicht ausgeführt und versucht, auf HTML-Elemente zu verweisen, bevor diese geladen werden. Diese Art von Problem tritt häufig erst auf, wenn Sie die Seite über eine tatsächliche Internetverbindung laden, insbesondere über eine langsame.

Sie können auch versuchen, das Javascript dynamisch zu laden, indem Sie ein Header-Element aus anderem Javascript-Code hinzufügen. Dies ist jedoch nur dann sinnvoll, wenn Sie nicht ständig den gesamten Code verwenden.

Matthias Wandel
quelle
3

Mit cuzillion können Sie die Auswirkungen der unterschiedlichen Platzierung von Skript-Tags auf die Seitenlast mit verschiedenen Methoden testen: Inline, Extern, "HTML-Tags", "document.write", "JS DOM-Element", "iframe" und "XHR eval". . In der Hilfe finden Sie eine Erklärung der Unterschiede. Es kann auch Stylesheets, Bilder und Iframes testen.

Sam Hasler
quelle
1

Die Antwort hängt davon ab, wie Sie die Objekte von Javascript verwenden. Wie bereits erwähnt, verbessert das Laden der Javascript-Dateien in der Fußzeile und nicht in der Kopfzeile die Leistung. Es sollte jedoch darauf geachtet werden, dass die verwendeten Objekte später initialisiert werden als in der Fußzeile. Eine weitere Möglichkeit besteht darin, die 'js'-Dateien in einen Ordner zu laden, der allen Dateien zur Verfügung steht.

GustyWind
quelle
0

Wie andere gesagt haben, sollte es höchstwahrscheinlich in eine externe Datei gehen. Ich bevorzuge es, solche Dateien am Ende des <head /> einzufügen. Diese Methode ist menschlicher als maschinenfreundlich, aber auf diese Weise weiß ich immer, wo sich der JS befindet. Es ist einfach nicht so lesbar, Skriptdateien irgendwo anders einzuschließen (imho).

Wenn Sie wirklich jede letzte ms herausdrücken müssen, sollten Sie wahrscheinlich das tun, was Yahoo sagt.

Berserker
quelle
0

Die Skripte sollten am Ende des Body-Tags eingefügt werden, da auf diese Weise der HTML-Code vom Browser analysiert und angezeigt wird, bevor die Skripte geladen werden.

José Salgado
quelle
0

Die Antwort auf die Frage hängt davon ab. In dieser Situation gibt es zwei Szenarien, und Sie müssen eine Auswahl treffen, die auf Ihrem geeigneten Szenario basiert.

Szenario 1 - Kritisches Skript / Muss benötigtes Skript

Wenn das von Ihnen verwendete Skript zum Laden der Website wichtig ist, wird empfohlen, es oben in Ihrem HTML-Dokument zu platzieren <head>. Einige Beispiele sind: Anwendungscode, Bootstrap, Schriftarten usw.

Szenario 2 - Weniger wichtige / Analyseskripte

Es werden auch Skripte verwendet, die die Ansicht der Website nicht beeinflussen. Es wird empfohlen, solche Skripte zu laden, nachdem alle wichtigen Segmente geladen wurden. Und die Antwort darauf ist das Ende des Dokuments, dh das Ende Ihres Dokuments <body>vor dem schließenden Tag. Einige Beispiele sind: Google Analytics, Hotjar usw.

Bonus - asynchron / aufschieben

Sie können den Browsern auch mitteilen, dass das Laden des Skripts gleichzeitig mit anderen ausgeführt werden kann und basierend auf der Auswahl des Browsers mithilfe eines Defer / Async-Arguments im Skriptcode geladen werden kann.

z.B. <script async src="script.js"></script>

Praveen Thirumurugan
quelle
-1

Ihre Javascript-Links können sich entweder im Kopf oder am Ende des Body-Tags befinden. Es ist richtig, dass sich die Leistung verbessert, indem Sie den Link am Ende Ihres Body-Tags platzieren. Wenn die Leistung jedoch kein Problem darstellt, ist es besser, sie im Kopf zu platzieren Damit die Leute lesen können und Sie wissen, wo sich die Links befinden, können Sie sie leichter referenzieren.

Timothy Trousdale
quelle
-1

Ich würde sagen, dass es von der Tatsache abhängt, was Sie mit Javascript-Code erreichen wollen:

  • Wenn Sie vorhaben, Ihre JS-Skripte extern einzufügen, befindet sich der beste Platz im Kopf der Seite
  • Wenn Sie vorhatten, Seiten auf Smartphones zu verwenden, klicken Sie unten auf der Seite kurz vor dem Tag.
  • Wenn Sie jedoch eine Kombination aus HTML und JS erstellen möchten (z. B. dynamisch erstellte und aufgefüllte HTML-Tabelle), müssen Sie sie dort platzieren, wo Sie sie benötigen.
Ludus H.
quelle
Was ich gesagt habe, um Minus zu verdienen!? Meine Güte.
Ludus H
Was hat es damit zu tun, das Skript in den Kopf zu setzen, wenn man extern ist? Warum ist das Ende der Seite ein guter Ort, um Skripte speziell für Smartphones zu erstellen? Ihre Aussage zum dynamischen Generieren von HTML aus JS ist nur dann wahr, wenn Sie verwenden document.write, was Sie wahrscheinlich nicht sein sollten.
Quentin
Sie "vermuteten", was ich dachte und aufgrund dessen, dass meine Antwort minus wurde? Sie denken wahrscheinlich, dass Ihre Vermutung besser ist als meine Erklärung, oder? Ich wollte nur eine kurze Erklärung abgeben. Wenn jemand nicht verstehen kann, wird er um weitere Informationen bitten. In meinem Kommentar habe ich vorgeschlagen, JS für smarth-Telefone und -Tablets kurz vor dem Ende des Körpers in das Seitenende zu setzen, da das Laden der gesamten Seite schneller ist, da der Browser nicht in den "Single Thread" -Modus wechseln muss. Der Seiteninhalt wird angezeigt auf dem Bildschirm ... aber das wissen Sie wahrscheinlich.
Ludus H