header set - Soll Jquery-Code in Kopf- oder Fußzeile gehen?





attribute append (9)


Laden Sie jQuery nur im Kopf, natürlich über CDN.

Warum? In einigen Szenarien können Sie eine Teilvorlage (z. B. Ajax-Anmeldeformular-Snippet) mit eingebettetem jQuery-abhängigen Code einfügen. Wenn jQuery auf der Seite unten geladen wird, erhalten Sie einen Fehler "$ ist nicht definiert", nett.

Es gibt natürlich Möglichkeiten dies zu umgehen (wie zB kein JS einzubetten und an ein load-at-bottom js Bundle anzuhängen), aber warum sollte man die Freiheit von lazy loaded js verlieren, jQuery abhängigen Code irgendwo platzieren zu können ? Das JavaScript-Modul kümmert sich nicht darum, wo der Code im DOM existiert, solange Abhängigkeiten (wie jQuery, das geladen wird) erfüllt sind.

Für Ihre gemeinsamen / freigegebenen js-Dateien, ja, plazieren Sie sie vor </body> , aber für die Ausnahmen, wo es wirklich nur Sinn macht, wartungstechnisch ein jQuery-abhängiges Snippet oder eine Dateiverknüpfung dort an dieser Stelle im html anzubringen , tun Sie dies.

Es gibt keinen Performance-Hit beim Laden von jQuery im Kopf; Welcher Browser auf dem Planeten hat jQuery-CDN-Datei nicht bereits im Cache?

Viel Lärm um nichts, stecken Sie jQuery in den Kopf und lassen Sie Ihre js Freiheit regieren.

Wo ist der beste Ort, um Jquery-Code (oder separate Jquery-Datei) zu setzen? Werden Seiten schneller geladen, wenn ich sie in die Fußzeile lege?




In der Regel werden alle Skripte am Ende der Seite platziert, aber ich verwende ASP.NET MVC mit einer Reihe von jQuery-Plugins. Ich finde, dass alles besser funktioniert, wenn ich meine jQuery-Skripte in den <head> -Abschnitt lege der Masterseite.

In meinem Fall gibt es Artefakte, die auftreten, wenn die Seite geladen wird, wenn sich die Skripts am Ende der Seite befinden. Ich benutze das jQuery TreeView-Plugin, und wenn die Skripte nicht am Anfang geladen werden, wird die Baumstruktur ohne die notwendigen CSS-Klassen dargestellt, die das Plugin dem Plugin auferlegt. So erhalten Sie dieses lustig aussehende Durcheinander, wenn die Seite zuerst geladen wird, gefolgt von der richtigen Darstellung des TreeView. Sehr schlecht aussehend. Durch das Einfügen der jQuery-Plugins in den <head> -Abschnitt der Masterseite wird dieses Problem behoben.




Der meiste jquery Code wird auf dem Dokument ready ausgeführt, was bis zum Ende der Seite sowieso nicht passiert. Darüber hinaus kann das Rendern von Seiten durch JavaScript-Parsing / -Ausführung verzögert werden. Es empfiehlt sich daher, das gesamte JavaScript am Ende der Seite zu platzieren.




Scripte am unteren Rand platzieren

Das Problem von Skripten ist, dass sie parallele Downloads blockieren. Die HTTP / 1.1-Spezifikation schlägt vor, dass Browser pro Hostname nicht mehr als zwei Komponenten parallel herunterladen. Wenn Sie Ihre Bilder aus mehreren Hostnamen bereitstellen, können Sie mehr als zwei Downloads gleichzeitig durchführen. Während ein Skript heruntergeladen wird, startet der Browser keine anderen Downloads, auch nicht bei verschiedenen Hostnamen. In manchen 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 auf der Seite nach unten verschoben werden. Es könnte auch Probleme mit dem Lösungsumfang geben. In vielen Fällen gibt es Möglichkeiten, diese Situationen zu umgehen.

Ein alternativer Vorschlag, der oft auftaucht, ist die Verwendung von zurückgestellten Skripten. Das DEFER-Attribut zeigt an, dass das Skript document.write nicht enthält und ein Anhaltspunkt für Browser ist, dass sie das Rendern fortsetzen können. Leider unterstützt Firefox das DEFER-Attribut nicht. Im Internet Explorer kann das Skript zurückgestellt werden, aber nicht so viel 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.

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

Quellen:




Obwohl fast alle Websites immer noch Jquery und andere Javascript auf Header: D, überprüfen Sie sogar .com.

Ich schlage auch vor, dass Sie vor dem Endtag des Körpers anziehen. Sie können die Ladezeit nach dem Platzieren an beiden Stellen überprüfen. Das Script-Tag wird Ihre Webseite anhalten, um weiter zu laden.

und nachdem Sie Javascript in der Fußzeile platziert haben, erhalten Sie möglicherweise ein ungewöhnliches Aussehen Ihrer Webseite, bis JavaScript geladen wird. Setzen Sie also css in Ihren Kopfzeilenbereich.




Alle Skripte sollten zuletzt geladen werden

In fast allen Fällen sollten Sie alle Ihre Skriptverweise am Ende der Seite, also kurz vor </body> .

Wenn dies aufgrund von Templating-Problemen nicht möglich ist, dekorieren Sie Ihre Skript-Tags mit dem defer Attribut, damit der Browser nach dem Herunterladen des HTML-Codes Ihre Skripts herunterladen kann:

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

Randfälle

Es gibt jedoch einige Randfälle, in denen Seitenflimmern oder andere Artefakte beim Laden der Seite auftreten können. Dies kann normalerweise dadurch gelöst werden, dass Sie Ihre jQuery-Skriptverweise im <head> -Tag ohne das defer Attribut platzieren. Diese Fälle umfassen jQuery UI und andere Add-Ons wie jCarousel oder Treeview, die das DOM als Teil ihrer Funktionalität modifizieren.

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 Kopf-Tag platziert werden muss .




Für mich ist jQuery etwas Besonderes. Vielleicht eine Ausnahme von der Norm. Es gibt so viele andere Skripte, die sich darauf verlassen, also ist es ziemlich wichtig, dass es früh lädt, damit die anderen Skripte, die später kommen, wie vorgesehen funktionieren. Wie jemand anders schon gesagt hat, lädt auch diese Seite jQuery in den Kopfbereich.




Kurz bevor </body> laut diesem Link der beste Platz ist, macht es Sinn.

Am besten testen Sie selbst.




Sie können verwenden:

if ($(selector).is('*')) {
  // Do something
}

Etwas eleganter vielleicht.





jquery header footer