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:
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 .
Beachten Sie Folgendes : themeforest.net/item/portfolious-professional-business-template/… . Es ist ein Site-Thema, das ich kürzlich gekauft habe und das auf seiner Homepage die Verwendung von jQuery mit jCarousel enthält. Als ich die Skriptblöcke vom Kopf zum Ende der Datei verschob, bemerkte ich, dass die im Karussell verwendeten Bilder beim Laden der Seite alle auf einmal angezeigt wurden, während die Seite beim Laden der Skriptdateien reibungsloser geladen wurde.
Chad Levy
5
Verwenden Sie CSS, um den Anfangszustand des Inhalts festzulegen. CSS sollte in den Kopf gehen. Etwas zu zerbrechen, damit etwas anderes funktioniert, ist nicht die Lösung. Wenn ein Besucher warten muss, bis jQuery und alle zugehörigen Plugins geladen sind, bevor Inhalte gerendert werden, bleibt er möglicherweise nicht lange genug, um den Inhalt anzuzeigen.
Duncan
9
ChadLevy hat recht: Es gibt einige Bedingungen, unter denen jQuery-Plugins besser funktionieren, wenn auf sie verwiesen wird <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.
Robert Harvey
2
@ Duncan: Idealerweise ist dies der Fall, wenn Sie alle Abhängigkeiten steuern können. Das Besondere an jQuery (genauer gesagt an jQuery UI und anderen Addons) ist, dass Sie nicht die vollständige Kontrolle über deren Funktionalität haben können. Daher ist es möglicherweise nicht möglich, einem DOM-Element so etwas wie Sichtbarkeitsattribute hinzuzufügen, damit es eleganter geladen wird Ein Addon, das dieses Element verwendet, berücksichtigt dieses Attribut nicht. Manchmal ist es besser, sich einer einfachen Konvention zu widersetzen, als zu versuchen, eine Abhängigkeit so zu gestalten, wie Sie es möchten.
Chad Levy
2
@Stefan: Wenn Ihre jQuery-Plugins das DOM nicht manipulieren dürfen, worum geht es dann?
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.
Ich habe einige moderne Ratschläge gesehen, wonach Skripte ganz oben stehen sollten. Wenn Sie die Skripte unten platzieren, können die Bilder und anderen Inhalte im Hauptteil der Seite parallel geladen werden. Die Skripte auf der Seite werden jedoch effektiv später geladen. Der gesamte HTML-Hauptteil muss heruntergeladen werden, bevor der Browser davon erfährt die zu ladenden Skript-URLs. Die meisten Leute verweisen auf den Yahoo-Leitfaden, der nicht mehr korrekt ist - Firefox berücksichtigt tatsächlich verzögerte Attribute in Skripten. Eine Verschiebung oben führt zu einem schnelleren Laden der Seite, wenn Sie sie messen.
ShadowChaser
Kann ich mit dieser Methode einige Statistiken zu Seitenladegeschwindigkeiten anzeigen?
Update: Anfang / Mitte 2016 haben alle modernen Browser die Anzahl der Verbindungen pro Hostname auf mindestens 6 erhöht.
Night Owl
32
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.
viele, viele Browser nicht; Etwa 2% ist die höchste Zahl, die ich gelesen habe, wenn Sie die Version berücksichtigen und das Caching auf genauen Ressourcennamen basiert. Daher ist jquery1.4.2 nicht dasselbe wie jquery1.7 oder 1.9.1 oder .. .
Toni Leigh
Von diesen 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 ...
osa
13
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.
Sie hatten mich, bis Sie das vorzeitige Optimierungsargument herausgezogen haben. Dies ist nur eine weitere Regel, die Menschen dogmatisch befolgen, ohne ihre Auswirkungen vollständig zu verstehen.
Robert Harvey
6
Na ja, ich kann sie nicht alle gewinnen! Ich bin der Überzeugung, dass ich die Auswirkungen verstehe. :)
EMP
Ich bin mir nicht sicher, ob Sie sich Sorgen machen müssen, wenn Ihre Skripte geladen wurden. Rendern blockiert, bis ein Skript geladen wurde. Darum geht es in dieser Diskussion. Solange Sie nichts anrufen, bevor Sie es laden, geht es Ihnen gut. Und dafür sind Rückrufe gedacht, und Sie sollten nicht wirklich viel anderes in Ihre Seite einbetten. Soweit ich weiß, werden Bilder nicht blockiert (sie werden parallel geladen), und tatsächlich kann das DOM bereit sein und Ihre Skripte ausgeführt werden, bevor die Bilder vollständig geladen werden. Es ist nicht sinnvoll, die Skripte an die erste Stelle zu setzen, um zu verhindern, dass sie blockiert werden.
Duncan
4
Wäre es angesichts des allgemeinen Konsenses, Skripte ganz unten zu platzieren, nicht besser, dies standardmäßig zu tun und sie nur dann nach oben zu verschieben, wenn Probleme auftreten? Scheint seltsam, Dinge rückwärts zu machen. Manchmal ist es besser, das Optimale zu tun, wenn es keinen Unterschied in der aufgewendeten Anstrengung gibt :)
Duncan
@ Duncan, ja das war mein Ansatz. Ich habe die Plugins unten platziert, und wenn ich Probleme hatte, habe ich sie oben platziert, und das hat die Probleme behoben.
Robert Harvey
6
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.
Intranets unterliegen nicht den gleichen Bedingungen wie das Internet, daher ist die Ladeverzögerung wahrscheinlich weniger wahrnehmbar. Es ist jedoch weiterhin ratsam, die Regeln zu befolgen.
Duncan
Nein, das Problem wird behoben, indem die CSS-Bezeichner / -Stile in das Markup eingefügt werden (anstatt darauf zu warten, dass jQuery dies für DOM bereit macht).
Dan Beam
1
@ Dan Beam: Die Baumansicht wird aus einer Datenbanktabelle gefüllt, und die Stile der Baumansicht werden vom Treeview-Plugin basierend auf dem Inhalt der Tabelle festgelegt. Nein, das funktioniert nicht.
Robert Harvey
1
Warum sollte ich das tun, wenn ich das unveränderte Treeview Plugin-Skript einfach oben auf der Seite platzieren kann und es einwandfrei funktioniert? Das macht keinen Sinn, Dan.
Robert Harvey
1
Prost Robert, ich benutze auch ASP.NETMVC mit Formularen in Teilbereichen. Es ist sinnvoll, das Javascript innerhalb des Teils zu belassen, da den neuen Feldern bei jeder Ausführung des Teils (z. B. zur Validierung) ihre Funktionalität neu zugewiesen wird. Ich habe nur Probleme damit gehabt @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
Malkin
4
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.
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.
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: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 dasdeferAttribut 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 .
quelle
<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.Fügen Sie unten Skripte ein
BEARBEITEN: Firefox unterstützt das DEFER-Attribut seit Version 3.6.
Quellen:
quelle
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.
quelle
2%wird beispielsweise die Hälfte verlassen, bevor die Seite zum ersten Mal geladen wird. Auf diese Weise verlieren Sie1%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.
quelle
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.
quelle
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.quelle
@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 verschiebenObwohl 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.
quelle
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.
quelle
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.
quelle