it-swarm.com.de

Sollte JQuery-Code in Kopf- oder Fußzeile gehen?

Wo ist der beste Ort, um Jquery-Code (oder eine separate Jquery-Datei) abzulegen? Werden Seiten schneller geladen, wenn ich sie in die Fußzeile einfüge?

181
Simone

Alle Skripte sollten zuletzt geladen werden

In fast allen Fällen ist es am besten, alle Ihre Skriptreferenzen am Ende der Seite kurz vor </body> Zu platzieren.

Wenn Sie dies aufgrund von Vorlagenproblemen und so weiter nicht können, verzieren Sie Ihre Skript-Tags mit dem Attribut defer, damit der Browser Ihre Skripts nach dem Herunterladen des HTML-Codes herunterladen kann:

<script src="my.js" type="text/javascript" defer="defer"></script>

Kantenfälle

Es gibt jedoch einige Edge-Fälle, in denen beim Laden der Seite Seitenflimmern oder andere Artefakte auftreten können, die normalerweise durch einfaches Platzieren Ihrer jQuery-Skriptreferenzen in das <head> - Tag without Behoben werden können = das defer Attribut. Zu diesen Fällen gehören jQuery UI und andere Addons wie jCarousel oder Treeview, die das DOM im Rahmen ihrer Funktionalität ändern.


Weitere Vorbehalte

Es gibt einige Bibliotheken, die vor dem DOM oder CSS geladen werden müssen, z. B. Polyfills. Modernizr ist eine solche Bibliothek, die muss im head-Tag platziert werden .

179
Chad Levy

Skripte unten einfügen

Das Problem, das von Skripten verursacht wird, besteht darin, dass sie parallele Downloads blockieren. Die HTTP/1.1-Spezifikation schlägt vor, dass Browser nicht mehr als zwei Komponenten pro Hostname gleichzeitig herunterladen. Wenn Sie Ihre Bilder von mehreren Hostnamen bereitstellen, können Sie mehr als zwei Downloads gleichzeitig durchführen. Während ein Skript heruntergeladen wird, startet der Browser jedoch keine weiteren Downloads, auch nicht auf anderen Hostnamen. In einigen Situationen ist es nicht einfach, Skripte nach unten zu verschieben. Wenn das Skript beispielsweise document.write verwendet, um einen Teil des Seiteninhalts einzufügen, kann es nicht in der Seite nach unten verschoben werden. Möglicherweise gibt es auch Scoping-Probleme. In vielen Fällen gibt es Möglichkeiten, diese Situationen zu umgehen.

Ein alternativer Vorschlag, der häufig auftaucht, ist die Verwendung von verzögerten Skripten. Das DEFER-Attribut gibt an, dass das Skript document.write nicht enthält und ein Hinweis für Browser ist, dass sie das Rendern fortsetzen können. Leider unterstützt Firefox das DEFER-Attribut nicht. In Internet Explorer wird das Skript möglicherweise verschoben, jedoch nicht so oft wie gewünscht. Wenn ein Skript zurückgestellt werden kann, kann es auch an den unteren Rand der Seite verschoben werden. Dadurch werden Ihre Webseiten schneller geladen.

EDIT: Firefox unterstützt das DEFER-Attribut seit Version 3.6.

Quellen:

227
3zzy

Laden Sie jQuery nur selbst in den Kopf, natürlich über CDN.

Warum? In einigen Szenarien können Sie eine Teilvorlage (z. B. ein Ajax-Anmeldeformular-Snippet) mit eingebettetem, von jQuery abhängigem Code einschließen. Wenn jQuery am Ende der Seite geladen wird, wird der Fehler "$ ist nicht definiert" angezeigt, Nice.

Es gibt natürlich Möglichkeiten, dies zu umgehen (z. B. keine JS einzubetten und an ein Load-at-Bottom-JS-Bundle anzuhängen), aber warum verlieren Sie die Freiheit von träge geladenen JS, jQuery-abhängigen Code platzieren zu können wo immer Sie wollen ? Es ist der JavaScript-Engine egal, wo sich der Code im DOM befindet, solange Abhängigkeiten (wie das Laden von jQuery) erfüllt sind.

Platzieren Sie Ihre gemeinsamen/freigegebenen js-Dateien vor </body>, aber in Ausnahmefällen, in denen es in Bezug auf die Anwendungswartung nur sinnvoll ist, einen von jQuery abhängigen Snippet- oder Dateiverweis genau dort im HTML-Code zu platzieren, tun Sie dies.

Es gibt keine Performance-Hit-Lade-Abfrage im Kopf. In welchem ​​Browser der Welt befindet sich die jQuery-CDN-Datei noch nicht im Cache?

Viel Lärm um nichts, steck jQuery in den Kopf und lass deine js Freiheit regieren.

30
virtualeyes

Nimbuz bietet eine sehr gute Erklärung für das Problem, aber ich denke, die endgültige Antwort hängt von Ihrer Seite ab: Was ist für den Benutzer wichtiger, wenn er früher über Skripte oder Bilder verfügt?

Es gibt einige Seiten, die ohne die Bilder keinen Sinn ergeben, sondern nur geringfügige, nicht wesentliche Skripte enthalten. In diesem Fall ist es sinnvoll, Skripte am unteren Rand einzufügen, damit der Benutzer die Bilder früher sehen und anfangen kann, die Seite zu verstehen. Andere Seiten basieren auf Skripten. In diesem Fall ist es besser, eine Arbeitsseite ohne Bilder zu haben als eine nicht arbeitende Seite mit Bildern. Daher ist es sinnvoll, Skripte ganz oben zu platzieren.

Eine andere zu berücksichtigende Sache ist, dass Skripte typischerweise kleiner als Bilder sind. Dies ist natürlich eine Verallgemeinerung und Sie müssen sehen, ob sie auf Ihre Seite zutrifft. Wenn dies der Fall ist, ist dies für mich ein Argument dafür, sie als Faustregel an die erste Stelle zu setzen (dh es sei denn, es gibt einen guten Grund, etwas anderes zu tun), weil sie Bilder nicht so sehr verzögern, wie Bilder die Skripte verzögern würden. Schließlich ist es viel einfacher, Skripte oben zu haben, da Sie sich keine Gedanken darüber machen müssen, ob sie noch geladen sind, wenn Sie sie verwenden müssen.

Zusammenfassend neige ich dazu, Skripte standardmäßig nach oben zu setzen und zu überlegen, ob es sich lohnt, sie nach Abschluss der Seite nach unten zu verschieben. Es ist eine Optimierung - und ich möchte es nicht vorzeitig tun.

13
EMP

Der meiste JQuery-Code wird im Dokument fertig ausgeführt, was ohnehin erst am Ende der Seite geschieht. Darüber hinaus kann das Rendern von Seiten durch das Parsen/Ausführen von JavaScript verzögert werden. Daher empfiehlt es sich, JavaScript ganz unten auf der Seite einzufügen.

6
Stefan Kendall

Standardmäßig werden alle Ihre Skripte am Ende der Seite angezeigt. Ich verwende jedoch ASP.NET MVC mit einer Reihe von jQuery-Plugins und finde, dass alles besser funktioniert, wenn ich meine jQuery-Skripte in das <head> Abschnitt der Masterseite.

In meinem Fall treten beim Laden der Seite Artefakte auf, wenn sich die Skripte am unteren Rand der Seite befinden. Ich verwende das jQuery TreeView-Plugin. Wenn die Skripte zu Beginn nicht geladen werden, wird der Baum ohne die vom Plugin auferlegten CSS-Klassen gerendert. Sie bekommen also dieses komisch aussehende Durcheinander, wenn die Seite zum ersten Mal geladen wird, gefolgt vom richtigen Rendern der TreeView. Sehr schlecht aussehend. Setzen Sie die jQuery-Plugins in das <head> Abschnitt der Masterseite beseitigt dieses Problem.

4
Robert Harvey

Obwohl auf fast allen Websites immer noch Jquery und anderes Javascript auf header: D platziert sind, sollten Sie sogar stackoverflow.com überprüfen.

Ich schlage Ihnen auch vor, vor dem Ende Tag des Körpers anzulegen. Sie können die Ladezeit nach dem Platzieren an beiden Stellen überprüfen. Das Skript-Tag hält Ihre Webseite an, um sie weiter zu laden.

und nachdem Sie Javascript in der Fußzeile platziert haben, kann es vorkommen, dass Ihre Webseite ungewöhnlich aussieht, bis Javascript geladen wird. Platzieren Sie also CSS in Ihrem Kopfzeilenbereich.

3
Mujah Maskey

Kurz bevor </body> ist der beste Ort laut Yahoo Developer Network Best Practices zur Beschleunigung Ihrer Website - dieser Link , es macht Sinn.

Am besten testen Sie selbst.

2
Soufiane Hassou

Für mich ist jQuery etwas Besonderes. Vielleicht eine Ausnahme von der Norm. Es gibt so viele andere Skripte, die darauf angewiesen sind. Daher ist es sehr wichtig, dass sie früh geladen werden, damit die anderen Skripte, die später kommen, wie beabsichtigt funktionieren. Wie schon jemand anderes darauf hingewiesen hat, lädt auch diese Seite jQuery im head-Bereich.

0
user3094826