Mehrere Javascript/CSS-Dateien: Best Practices?

Question

Ich habe jetzt etwa 7 Javascript-Dateien (dank diverser jQuery-Plugins) und 4-5 CSS-Dateien. Ich bin neugierig, was ist die beste Praxis für den Umgang mit diesen einschließlich wo in dem Dokument sollten sie geladen werden? YSlow sagt mir, dass Javascript-Dateien - wenn möglich - am Ende enthalten sein sollten. Das Ende des Körpers? Es erwähnt, dass das Delimeter zu sein scheint, ob sie Inhalt schreiben. Alle meine Javascript-Dateien sind Funktionen und jQuery-Code (alles fertig, wenn fertig()), so dass sollte in Ordnung sein.

Also sollte ich ein CSS und eine Javascript-Datei enthalten und diese enthalten den Rest? Sollte ich alle meine Dateien zu einer verketten? Soll ich meine Tags am Ende meines Dokuments einfügen?

Edit: FWIW ja das ist PHP.

Answer 1

Ich würde vorschlagen, PHP Minify, mit dem Sie eine einzelne HTTP-Anfrage für eine Gruppe von JS oder CSS-Dateien erstellen können. Minify verarbeitet auch GZipping-, Komprimierungs- und HTTP-Header für das clientseitige Caching.

Edit: Minify erlaubt Ihnen auch, die Anfrage einzurichten, so dass Sie für verschiedene Seiten verschiedene Dateien einschließen können. Zum Beispiel eine Kerngruppe von JS-Dateien zusammen mit einem benutzerdefinierten JS-Code auf bestimmten Seiten oder nur die Kern-JS-Dateien auf anderen Seiten.

Während in der Entwicklung alle Dateien enthalten, wie Sie normalerweise würden und dann, wenn Sie näher an den Wechsel zur Produktion laufen, führen Sie Minify und fügen Sie alle CSS und JS-Dateien in einer einzigen HTTP-Anfrage. Es ist wirklich einfach einzurichten und zu arbeiten.

Auch ja, CSS-Dateien sollten im Kopf und JS-Dateien im unteren Bereich eingestellt werden, da JS-Dateien auf Ihre Seite schreiben können und massive Time-Out-Probleme verursachen können.

Hier ist, wie Sie Ihre JS-Dateien enthalten sollte:

</div> <!-- Closing Footer Div --> 
<script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script> 
</body> 
</html> 

Edit: Sie können auch Cuzillion verwenden, um zu sehen, wie Ihre Seite eingerichtet werden sollte.

Answer 2

Sie haben gesagt, nicht ausdrücklich, dass Sie Zugriff auf eine serverseitige Lösung haben, aber vorausgesetzt, Sie tun, habe ich immer mit einem Verfahren gegangen mit PHP beteiligt folgendes zu tun:

jquery. js.php:

<?php 
$jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata'); 
foreach($jquery as $file) 
{ 
echo file_get_contents('jquery.' . $file . '.js'); 
} 
?> 

Mit dem snippet oben im Ort, ich rufe Sie dann die Datei, so wie ich normalerweise tun würde:

<script type="text/javascript" src="jquery.js.php"></script> 

und dann, wenn ich jemals kennen die genaue Funktionalität I‘ Ich gehe zu brauchen, gebe ich nur meine Anforderungen als Abfrage-String (jquery.js.php? r = Kern, Effekte). Ich mache genau dasselbe für meine CSS-Anforderungen, wenn sie jemals so verzweigt sind.

Answer 3

Hier ist, was ich tue: Ich verwende bis zu zwei JavaScript-Dateien und in der Regel eine CSS-Datei für jede Seite. Ich finde heraus, welche JS-Dateien auf all meinen Seiten üblich sind (oder genug davon, so dass es nah ist - die Datei, die jQuery enthält, wäre ein guter Kandidat) und dann verkette ich sie und minimiere sie unter Verwendung von jsmin-php und dann cache ich die kombinierte Datei . Wenn JS-Dateien übrig sind, die nur für diese eine Seite spezifisch sind, verkette ich sie, minimiere sie und speichere sie auch in einer einzigen Datei. Die erste JS-Datei wird über mehrere Seiten aufgerufen, die zweite nur auf dieser oder einigen wenigen.

Sie können das gleiche Konzept mit CSS verwenden, wenn Sie mit css-min möchten, obwohl ich finde, dass ich normalerweise nur eine Datei für CSS verwende. Eine Sache extra, wenn ich die Cache-Datei erstelle, lege ich ein wenig PHP-Code am Anfang der Datei, um es als eine gezippte Datei zu dienen, wo du sowieso die meisten deiner Ersparnisse bekommst. Sie sollten auch Ihren Expiration-Header so einstellen, dass der Browser des Benutzers eine bessere Chance hat, die Datei ebenfalls zu cachen. Ich glaube, Sie können GZipping auch über Apache aktivieren.

Für die Zwischenspeicherung überprüfe ich, ob die Dateierstellungszeit älter ist als die von mir eingestellte Zeit. Wenn dies der Fall ist, erstelle ich die Cache-Datei neu und führe sie aus, ansonsten bekomme ich nur die vorhandene zwischengespeicherte Datei.

Answer 4

Die Idee, die Dateien zu verkleinern und zu kombinieren, ist großartig.

ich etwas ähnliches auf meinen Seiten aber die Entwicklung zu erleichtern schlage ich einen Code, der wie folgt aussieht:

if (evironment == production) { 
    echo "<style>@import(/Styles/Combined.css);</style>" 
} else { 
    echo "<style>@import(/Styles/File1.css);</style>" 
    echo "<style>@import(/Styles/File2.css);</style>" 
} 

Dies sollte Sie halten Ihre Dateien während der Entwickler für die einfache Verwaltung und Nutzung der kombinierten Datei trennen lassen während Bereitstellung für schnellere Seitenladevorgänge. Dies setzt voraus, dass Sie die Dateien kombinieren und Variablen als Teil Ihres Bereitstellungsprozesses ändern können.

Achten Sie darauf, Ihre js an der Unterseite und die CSS an der Spitze nach YUI Empfehlungen enthalten, wie das Halten der JS niedrig hat einen spürbaren Einfluss auf das Aussehen des Rests der Seite und fühlt sich viel schneller.

Answer 5

Ich würde nicht empfehlen, eine JavaScript-basierte Lösung (wie PHP Minify) zu verwenden, um Ihre CSS aufzunehmen, da Ihre Seite unbrauchbar wird, wenn der Besucher Javascript deaktiviert hat.

Answer 6

Ich neige dazu, auch + fügen alle meine jQuery-Plugins in einer einzigen Datei zu kopieren: jquery.plugins.js dann Link zu

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> 

für die eigentliche jquery Bibliothek.