best practice bei einbindung von JS / CSS files

[cycap]

Hallo zusammen,

folgende Situation: es gibt viele verschiedene Seiten die jeweils unterschiedliche Files für CSS und JS brauchen (in meinem Fall unterschiedliche jQuery Plugins)

Jetzt möchte ich das ganze möglichst Serverseitig aufbereiten um vom Browser nur 2 HTTP-Requests (1 JS, 1 CSS) absenden zu müssen.

Soweit so gut, nur wie ist hier die sinnvollste Vorgehensweise?

Erst dachte ich mir ich bau mir ein Singleton RessourceLoader dem ich dann einfach in der jeweiligen Action mitteile welche Komponenten benötigt werden und der RessourceLoader sucht sich anhand einer XML File die Dateien und die Abhängigkeiten raus und baut mir die Komponenten entsprechend dynamisch zusammen.

Das funktioniert auch, aber natürlich nur, wenn ich den ausgegebenen Text auch direkt ausgebe. Lade ich das ganze aber über HTTP, dann ist dies ja ein neuer Request und dieser hat keine Ahnung von dem was ich beim Ursprungsrequest dem RessourceLoader mitgeteilt habe.

Darum nun meine Frage hier nach euren bewährten Vorgehensweisen.

Gruß
Cy

[draco88]

Ich würde die ganzen JS und CSS Files einzelnd laden lassen. Nach dem ersten Aufruf sind sie dann eh gecached und werden nicht nochmal abgefragt. So, wie du es machen willst, wird jedes mal der komplette JS und CSS Code übertragen.

[cycap]

Naja den Browsercache könnte ich ja trotzdem noch nutzen indem ich dem Browser "vorgaukle" es wäre eine Datei die dort geladen wird und im "virtuellen" Dateinamen entsprechend controller und action einbaue, dann wird zumindest bei refresh o.ä. gecached, auch wenn das dann jeweils nicht action-übergreifend funktioniert

[[-UFO-]Melkor]

Die Dateien einzeln Laden zu lassen erscheint mir nicht sehr sinnvoll, bei vielen Dateien wird das auch kostspielig, wenn die Dateien im Cache liegen.

Von wie vielen verschiedenen JS- / CSS-Dateien sprechen wir denn hier? Eventuell lohnt es sich auch eher, die Dateien in eine Datei zusammenzufassen (wenn sie sich nicht behindern).

[cycap]

Hi,

wieviele Dateien es werden das kann ich noch nicht sagen, da das Projekt sich noch im Aufbau bzw. im Relaunch befindet.

Ein Beispiel dafür wäre jqueryUI. Hier lassen sich ja beim Download bestimmen welche Komponenten benötigt werden (siehe http://jqueryui.com/download). Da kommen runde 200kb zusammen wenn man alles auswählt. Brauche ich jetzt für eine bestimmte Seite eigentlich nur die Tabs, so wäre es ja schön wenn nur die tatsächlich benötigten 25kb (UICore + Tabs) geladen werden müssten und wenn ich dann doch mal fast alle features brauche, dann möchte ich möglichst nicht 20 HTTP Requests auführen lassen.

Gruß
Cy

EDIT:
PS: die KB-Zahlen beziehen sich hier rein auf das minimzed JS-File

[Manko10]

Ich würde alles auf einmal ausliefern und auf Komprimierung und Browser-Caches setzen. Insgesamt ist es schneller, einmal eine große Datei zu laden als nach und nach 20 kleine.
Während der Entwicklung hast du natürlich noch einzelne Dateien, aber ausliefern tust das in einem großen „geminifyten“ File.

[stayInside]

Desweiteren muss darauf geachtet werden das der IE6 (sofern dieser unterstützt werden soll) nicht mehr als 32 Files zulässt.

Ich selber hatte es bislang immer so geregelt das ich eine Config-Datei habe in der drinsteht welche JS und CSS Dateien vorhanden sind (Ordner kann man nicht durchsuchen, da die Reihenfolge eine Rolle spielt). Dazu gibt es dann ein Controller der prüft ob schon eine merged Datei vorhanden ist, wenn nicht wird eine erstellt. In der View wird dann einfach die merged Datei eingebunden.

[Chriz]

Du kannst doch eine Signatur übergeben, über die dann die komprimierte, zusammengefasste CSS/JS-Bib aus dem Cache geladen wird. Grundsätzlich finde ich das eine sehr gute Idee.

[cycap]

Und da auf jeder "HTML-Seite" das gleiche Framework-File? Und dann ein spezielles File wo die spezifischen Aufrufe drin stehen?

EDIT:
das war noch auf Manko bezogen

[cycap]

@Chriz: ja ich hab mir das ganze schon weitergesponnen, wenn man nämlich dann noch serverseitigen cache benutzt, also die Files nicht mehr on-the-fly generiert, dann kann man die Files ja direkt in den public-bereich stellen und sucht sich dann nur noch den Dateinamen raus der gebraucht wird um die gewünschten kombinationen an Files zu bekommen

[Manko10]

Und da auf jeder "HTML-Seite" das gleiche Framework-File?

Jap und zwar mit einer per HTTP gesetzten Cache-Zeit von mindestens 2 Wochen.
Mit Komprimierung (z.B. gzip) lässt sich die Dateigröße übrigens noch massiv verringern, da (anders als bspw. bei Bilddateien) sehr viele redundante Zeichen enthalten sind (vor allem Leerzeichen und Klammern aller Art).

[cycap]

@Manko: Nun das ist aus cache- und traffic-sicht sicherlich die beste variante, nur habe ich festgestellt das z.B. bei extJS (was auch der Grund für mich war nun auf jquery umzusteigen) allein das einbinden der ext-all.min.js (gzip) schon merkbar rendering-Zeit bei meinem FF kostet, vermutlich weil alles in den Speicher gelegt wird auch wenn es gar nicht genutzt wird.

[cycap]

Also weiter bin ich jetzt immer noch nicht -.-

[[-UFO-]Melkor]

Nutzt du denn auch JavaScript ohne jQuery? Ansonsten musst du ja lediglich die JavaScript Datei einbinden oder auch nicht ...

Wenn die benötigten Dateien stark variieren (bei der einen Hälfte wird z.B. jQuery + jQuery UI + zahlreiche Plugins benötigt, auf der anderen Hälfte nur eine selbstgeschriebene Funktion), könntest du versuchen, für die jeweiligen Anwendungsfälle Dateien zu erstellen. Nur übertreiben sollte man damit nicht.

Wo bindest du denn deine JavaScript-Dateien ein, im Head-Bereich oder am Ende der Seite? Das könnte eine Erklärung für die lange Rendering-Zeit sein.

[cycap]

Nutzt du denn auch JavaScript ohne jQuery? Ansonsten musst du ja lediglich die JavaScript Datei einbinden oder auch nicht ...

Wenn die benötigten Dateien stark variieren (bei der einen Hälfte wird z.B. jQuery + jQuery UI + zahlreiche Plugins benötigt, auf der anderen Hälfte nur eine selbstgeschriebene Funktion), könntest du versuchen, für die jeweiligen Anwendungsfälle Dateien zu erstellen. Nur übertreiben sollte man damit nicht.

Hmm... du meinst also meine Überlegungen mit dem RessourceLoader sind ein solches "übertreiben" ? Naja vielleicht könnte man ja anhand des RessourceLoaders feststellen welche Plugins tatsächlich gebraucht werden und raussuchen welche der (sagen wir mal 5) Varianten in Frage kommt... also zum Beispiel

0 - keine/leere JS File
1 - jQuery only
2 - jQuery + jQueryUI
3 - jQuery + jQueryUI + die eine hälfte der Plugins
4 - jQuery + jQueryUI + die andere hälfte der Plugins
5 - alles verfügbare


Das wären dann generierte minimized Files im Doc-root, dann würde ich dem ressource loader nur sagen welche Komponenten benötigt werden und der gibt mir den Dateinamen der passenden JS-File.

Wo bindest du denn deine JavaScript-Dateien ein, im Head-Bereich oder am Ende der Seite? Das könnte eine Erklärung für die lange Rendering-Zeit sein.

Hmm nachdem mit YSlow irgendwann gesagt hatte ich solle die am Ende der Seite einbinden, bin ich darauf umgestiegen. Aber ich glaube beim dem Test mit ExtJS habe ich das noch nicht gemacht. Macht das denn tatsächlich einen solchen Unterschied? Ich meine die onLoad Zeit sollte sich doch deswegen nicht verändern oder? Die Ladegrafik verschwindet doch eh erst wenn tatsächlich alles geladen ist oder täusche ich mich da? Klar die Reihenfolge ändern hat auswirkungen darauf das überhaupt erstmal was angezeigt wird bevor zu ende geladen wurde, aber ansonsten macht das doch keinen Unterschied oder?