Ich mache schon seit einiger Zeit ein wenig JavaScript (naja, mehr wie jQuery) und eine Sache, über die ich immer verwirrt war, ist, wo ich meine Skripte platzieren sollte, im <head> -Tag oder im <body> -Tag.
Wenn jemand dieses Problem klären könnte, wäre das großartig. Ein Beispiel dafür, was wohin gehen sollte, wäre perfekt.
Best Practices aus Google und yahoo sagen, dass Javascript für die Leistung immer in eine externe Datei eingefügt werden sollte, und verlinkt mit Ihrer Seite mit einem <script> -Tag, das sich am Ende des HTML befindet vor dem Schließen des Elements <body> .
Dies erlaubt dem Browser, die gesamte Seite sofort darzustellen, anstatt anzuhalten, um Javascript zu bewerten.
Sie haben drei Orte erwähnt:
In Tags;
Im HTML; und
In einer externen Datei.
Lassen Sie mich jede davon ansprechen.
Bewährtes Verfahren ist es, gemeinsames Javascript in einer oder mehreren externen Dateien zu haben, und je weniger Dateien, desto besser, da jede geladene JS-Datei das Laden der Seite blockiert, bis diese JS-Datei geladen ist.
>Das Wort "Common" ist extrem wichtig. Das bedeutet, dass Sie aus Cache-Gründen keinen seitenspezifischen JavaScript-Code in diese externe Datei einfügen möchten. Angenommen, Sie haben eine Site mit 1000 Seiten. Jede Seite hat einen spezifischen JS-Code. Das können entweder 1000 verschiedene Dateien oder eine wirklich große Datei sein, die viel unnötigen Code ausführt (zB nach IDs suchen, die nicht auf dieser Seite sind, aber auf einem der 999 anderen liegen). Keines dieser Ergebnisse ist gut.
Der erste bringt Ihnen einen kleinen Cache-Boost. Die zweite kann schreckliche Seitenladezeiten haben.
Sie setzen also alle gängigen Funktionen in eine JS-Datei, in der diese JS-Datei nur Funktionen enthält. In jeder HTML-Seite rufen Sie die JS-Funktionen auf, die für diese Seite benötigt werden.
Idealerweise werden Ihre JS-Dateien auch effektiv zwischengespeichert. Es empfiehlt sich, einen HTTP-Expires-Header und eine Versionsnummer zu verwenden, damit die JS-Datei nur einmal von jedem Browser geladen wird, unabhängig davon, wie viele Seiten sie besuchen. Wenn Sie die Datei ändern, ändern Sie die Versionsnummer und erzwingen ein Neuladen. Die Verwendung von mtime (der letzten modifizierten Zeit der JS-Datei) ist ein übliches Schema, das URLs wie folgt angibt:
%Vor%wo diese Zeit automatisch generiert wird. Ihr Webserver ist so konfiguriert, dass er JS-Dateien mit einer entsprechenden Expires-Kopfzeile bereitstellt.
Damit mischen sich externe Dateien und In-Page-Skripte in (imho) auf die bestmögliche Weise.
Der letzte Ort, den du erwähnt hast, war im Tag. Hier kommt es darauf an, welche JS-Bibliotheken und Frameworks Sie verwenden. Ich bin ein großer Fan von jQuery, was unaufdringliches Javascript fördert. Das bedeutet, dass Sie (hoffentlich) überhaupt kein Javascript in Ihr Markup einfügen . Also statt:
%Vor%Sie tun:
%Vor%mit Javascript:
%Vor%Tags und Links javascript jquery coding-style