webentwicklung-frage-antwort-db.com.de

Mehrere Javascript/CSS-Dateien: Best Practices?

Ich habe jetzt ungefähr 7 Javascript-Dateien (dank verschiedener jQuery-Plugins) und 4-5 CSS-Dateien. Ich bin neugierig, was die beste Vorgehensweise ist, um damit umzugehen, einschließlich wo in dem Dokument sie geladen werden sollten. YSlow sagt mir, dass Javascript-Dateien - wo möglich - am Ende enthalten sein sollten. Das Ende des Körpers? Es wird erwähnt, dass der Begrenzer zu sein scheint, ob sie Inhalte schreiben. Alle meine Javascript-Dateien sind Funktionen und jQuery-Code (alles erledigt, wenn sie fertig sind ()), also sollte das in Ordnung sein.

Soll ich also eine CSS- und eine Javascript-Datei einbinden und die anderen einbinden? Soll ich alle meine Dateien zu einer zusammenfassen? Soll ich meine Tags ganz am Ende meines Dokuments mit Javascript versehen?

Edit: FWIW ja das ist PHP.

55
cletus

Ich würde vorschlagen, PHP Minify zu verwenden, wodurch Sie eine einzelne HTTP-Anforderung für eine Gruppe von JS- oder CSS-Dateien erstellen können. Minify behandelt auch GZipping, Compression und HTTP-Header für das clientseitige Caching.

Bearbeiten: Mit Minify können Sie die Anforderung auch so einrichten, dass Sie für verschiedene Seiten verschiedene Dateien hinzufügen können. Zum Beispiel ein Kernsatz von JS-Dateien zusammen mit benutzerdefiniertem JS-Code auf bestimmten Seiten oder nur die Kern-JS-Dateien auf anderen Seiten.

Wenn Sie sich in der Entwicklung befinden, schließen Sie alle Dateien wie gewohnt ein. Wenn Sie sich dem Umstieg auf den Produktionslauf nähern, minimieren Sie alle CSS- und JS-Dateien in einer einzigen HTTP-Anforderung. Es ist sehr einfach einzurichten und zu arbeiten.

Ja, CSS-Dateien sollten im Kopf gesetzt werden, und JS-Dateien sollten am unteren Rand bereitgestellt werden, da JS-Dateien auf Ihre Seite schreiben können und massive Timeout-Probleme verursachen können.

So sollten Sie Ihre JS-Dateien einschließen:

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

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

37
Justin Yost

Ich mache Folgendes: Ich verwende bis zu zwei JavaScript-Dateien und im Allgemeinen eine CSS-Datei für jede Seite. Ich finde heraus, welche JS-Dateien auf allen meinen Seiten üblich sind (oder genug davon, um sie zu schließen - die Datei, die jQuery enthält, wäre ein guter Kandidat), und dann verkette ich sie und minimiere sie mit jsmin-php und dann zwischenspeichere ich die kombinierte Datei. Wenn JS-Dateien übrig sind, die nur für diese eine Seite spezifisch sind, verketten, verkleinern und cachen sie auch in einer einzigen Datei. Die erste JS-Datei wird über mehrere Seiten aufgerufen, die zweite nur auf dieser oder möglicherweise einigen. 

Sie können dasselbe Konzept mit CSS verwenden, wenn Sie mit css-min möchten, obwohl ich normalerweise nur eine Datei für CSS verwende. Eine Besonderheit: Wenn ich die Cache-Datei erstelle, füge ich am Anfang der Datei einen kleinen PHP-Code ein, um sie als GZipped-Datei zu liefern. Dort erhalten Sie den größten Teil Ihrer Ersparnisse Sowieso. Sie sollten auch den Ablaufheader festlegen, damit der Browser des Benutzers die Datei auch besser zwischenspeichern kann. Ich glaube, Sie können GZipping auch über Apache aktivieren.

Beim Zwischenspeichern überprüfe ich, ob die Dateierstellungszeit älter als die von mir eingestellte Zeit ist. Wenn dies der Fall ist, erstellt ich die Cache-Datei neu und stelle sie bereit, ansonsten bekomme ich nur die vorhandene zwischengespeicherte Datei.

4
VirtuosiMedia

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

2
jeroen

Sie haben nicht explizit gesagt, dass Sie Zugriff auf eine serverseitige Lösung haben, aber wenn Sie dies tun, habe ich immer eine Methode mit PHP gewählt, um folgende Schritte auszuführen:

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');
 }
?>

Wenn sich das Snippet oben befindet, rufe ich die Datei genauso auf, wie ich es normalerweise tun würde:

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

und wenn ich mir der genauen Funktionen bewusst bin, die ich benötigen werde, gebe ich meine Anforderungen einfach als Abfragezeichenfolge ( jquery.js.php? r = core, effects ). Ich mache dasselbe für meine CSS-Anforderungen, wenn sie jemals verzweigt sind.

2
Hexagon Theory

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

Ich mache auf meinen Seiten etwas Ähnliches, aber um die Entwicklung zu erleichtern, empfehle ich Code, der so 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>"
}

Auf diese Weise sollten Sie Ihre Dateien während der Entwicklung getrennt halten, um die Verwaltung zu vereinfachen, und die kombinierte Datei während der Bereitstellung zum schnelleren Laden der Seite verwenden. Dies setzt voraus, dass Sie im Rahmen des Bereitstellungsprozesses die Dateien kombinieren und Variablen ändern können.

Achten Sie auf jeden Fall darauf, Ihre Js unten und die Css oben gemäß YUI-Empfehlungen einzuschließen, da das Halten des JS-Werts einen spürbaren Einfluss auf das Erscheinungsbild des Restes der Seite hat und sich viel schneller anfühlt.

0
mjallday

Ich neige auch dazu, alle meine Jquery-Plugins in eine einzige Datei zu kopieren + einzufügen: jquery.plugins.js und dann einen 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.

0
Birk