Antworten:
Alle Skripte sollten zuletzt geladen werden
In fast allen Fällen ist es am besten, alle Ihre Skriptreferenzen kurz vor dem Ende der Seite zu platzieren </body>.
Wenn Sie dies aufgrund von Vorlagenproblemen und so weiter nicht können, dekorieren Sie Ihre Skript-Tags mit dem deferAttribut, damit der Browser Ihre Skripte nach dem Herunterladen des HTML- Codes herunterladen kann:
<script src="my.js" type="text/javascript" defer="defer"></script>Randfälle
Es gibt jedoch einige Randfälle, in denen beim Laden von Seiten möglicherweise Seitenflackern oder andere Artefakte auftreten, die normalerweise behoben werden können, indem Sie einfach Ihre jQuery- <head>Skriptreferenzen ohne das deferAttribut in das Tag einfügen. Zu diesen Fällen gehören die jQuery-Benutzeroberfläche und andere Addons wie jCarousel oder Treeview, die das DOM als Teil 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 im Head-Tag platziert werden muss .
<head>. Wenn Ihr Markup davon abhängt, dass das jQuery-Plugin den Inhalt für Sie aussortiert, ist es nicht sinnvoll, die Plugin-Referenz am Ende der Seite zu platzieren, da Sie bis zum Laden der Plugins ein funky Markup auf Ihrer Webseite erhalten. Regeln sollen befolgt werden, bis sie nicht mehr funktionieren. An diesem Punkt sollten Regeln gebrochen werden.
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. 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 weiter unten auf der Seite verschoben werden. Möglicherweise gibt es auch Probleme mit dem Umfang. 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 nicht document.write enthält, und ist ein Hinweis für Browser, die das Rendern fortsetzen können. Leider unterstützt Firefox das DEFER-Attribut nicht. In Internet Explorer wird das Skript möglicherweise zurückgestellt, jedoch nicht so oft wie gewünscht. Wenn ein Skript verschoben werden kann, kann es auch an den unteren Rand der Seite verschoben werden. Dadurch werden Ihre Webseiten schneller geladen.
BEARBEITEN: Firefox unterstützt das DEFER-Attribut seit Version 3.6.
Quellen:
Laden Sie jQuery selbst nur über CDN in den Kopf.
Warum? In einigen Szenarien können Sie eine Teilvorlage (z. B. ein Ajax-Anmeldeformular-Snippet) mit eingebettetem jQuery-abhängigem Code einfügen. Wenn jQuery unten auf der Seite geladen wird, wird der Fehler "$ ist nicht definiert" angezeigt.
Es gibt natürlich Möglichkeiten, dies zu umgehen (z. B. kein JS einbetten und an ein unten geladenes js-Bundle anhängen), aber warum sollten Sie die Freiheit verlieren, träge js zu laden und jQuery-abhängigen Code an einer beliebigen Stelle platzieren zu können ? Die Javascript-Engine kümmert sich nicht darum, wo sich der Code im DOM befindet, solange Abhängigkeiten (wie das Laden von jQuery) erfüllt sind.
Ja, platzieren Sie Ihre gemeinsamen / gemeinsam genutzten js-Dateien vor </body>, aber für die Ausnahmen, in denen es in Bezug auf die Anwendungswartung wirklich nur Sinn macht, ein jQuery-abhängiges Snippet oder eine Dateireferenz genau dort an der Stelle im HTML- Code zu speichern , tun Sie dies.
Es gibt keine Performance-Hit-Lade-Abfrage im Kopf; Welcher Browser auf dem Planeten hat noch keine jQuery-CDN-Datei im Cache?
Viel Lärm um nichts, stecken Sie jQuery in den Kopf und lassen Sie Ihre js Freiheit regieren.
2%wird beispielsweise die Hälfte verlassen, bevor die Seite zum ersten Mal geladen wird. Auf diese Weise verlieren Sie 1%die Besucher, sparen sich aber möglicherweise viel Entwicklungszeit und Ärger. Sehen Sie, ob dies mit Ihrem Geschäftsmodell sinnvoll ist ...
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 - Skripte oder Bilder?
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 unten einzufügen, damit der Benutzer die Bilder früher sehen und die Seite verstehen kann. Andere Seiten sind auf Skripte angewiesen, um zu funktionieren. In diesem Fall ist es besser, eine Arbeitsseite ohne Bilder zu haben als eine nicht arbeitende Seite mit Bildern. Daher ist es sinnvoll, Skripte oben zu platzieren.
Eine andere zu berücksichtigende Sache ist, dass Skripte normalerweise kleiner als Bilder sind. Dies ist natürlich eine Verallgemeinerung und Sie müssen sehen, ob sie für Ihre Seite gilt. 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), da sie Bilder nicht so stark verzögern, wie Bilder die Skripte verzögern würden. Schließlich ist es viel einfacher, ein Skript 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 oben zu platzieren und erst dann zu prüfen, 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.
Der meiste JQuery-Code wird dokumentbereit 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. Es wird daher empfohlen, das gesamte Javascript am Ende der Seite zu platzieren.
Die Standardpraxis besteht darin, alle Ihre Skripte am Ende der Seite zu platzieren. 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 Feld setze <head> Abschnitt des Masters Seite.
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 erforderlichen CSS-Klassen gerendert, die ihm vom Plugin auferlegt wurden. Sie erhalten also dieses komisch aussehende Durcheinander, wenn die Seite zum ersten Mal geladen wird, gefolgt vom korrekten Rendern der TreeView. Sehr schlecht aussehend. Durch das Einfügen der jQuery-Plugins in den <head>Abschnitt der Masterseite wird dieses Problem behoben.
@Html.Action, als ich versucht habe , ein Ergebnis dynamisch in die Ausgabe zu schreiben, da mein Teil $ is undefinedbedeutet, dass ich stattdessen .load ('@ Url.Action') verwenden muss, um den Teil zu laden. Dies ergibt jedoch aufgrund der zusätzlichen Anfrage einen Vorteil. Basierend auf Ihrer Eingabe werde ich jquery einfach über RenderBody () auf meiner Masterseite verschieben
Obwohl fast alle Websites immer noch Jquery und anderes Javascript in der Kopfzeile platzieren: D, überprüfen Sie sogar stackoverflow.com.
Ich schlage auch vor, dass Sie vor dem Ende Tag des Körpers anziehen. 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 die Fußzeile gestellt haben, erhalten Sie möglicherweise ein ungewöhnliches Aussehen Ihrer Webseite, bis Javascript geladen wird. Platzieren Sie CSS also in Ihrem Header-Bereich.
Kurz vor </body>ist der beste Ort , nach Yahoo Developer Network ‚s Best Practices für die Beschleunigung Ihrer Website Link , macht es Sinn.
Am besten testen Sie selbst.
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 erscheinen, wie vorgesehen funktionieren. Wie jemand anderes betonte, lädt sogar diese Seite jQuery im Kopfbereich.