HTML css & Script Datei dynamisch anpassen

[Squicky]

Hallo

Habe mir einige Tutorials und Bücher durchgelesen. Da haben alle nur das Thema html(5) und css oder html und php behandelt.

Wie macht man es aber richtig, wenn man sehr dynamische Seiten erstellen möchte. In diesen Texten gab es meistens eine Datei für den (dynamischen) Inhalt (html/php) eine für das Aussehen (css) und eine für Aktionen (JavaScribt).

Je nach Wünschen und Eingabe des Benutzers soll die Seite dann einige wenige oder viele unterschiedliche Dinge (Objekte) an.

Wie soll man dann vorgehen?
Beispiel: Auf einer Seite kann es max. 50 verschiedene Objekte mit unterschiedlichen Eigenschaften (css & JavaScribts). Bis jetzt würde ich drei Dateien auf dem Server haben: php, css und JavaScript.
Der Benutzer bekommt vom Server die aus der php Datei berechnete html Datei und wird dann die css und JavaScript Datei nachladen, da die html Datei auf diese Dateien verweist.
Da die Seite recht komplex und umfangreich ist, sind die Dateien recht "groß": Die css Datei enthält das Aussehen und in der JavaScirpt Datei die Scripte aller 50 Objekte.
Wenn aber ein Benutzer nur 4 verschiedene Objekte angezeigt bekommen, dann wir dies in der php Datei berücksichtigt und die html Datei ist „ok“ und „klein“. Aber es werden die komplette css und JavaScript Dateien übertragen.

Muss das sein?
Wie machen es die großen Firmen (ebay Facebook, …)?
Kann man die css und ScriptDatei den Bedürfnissen des Benutzers anpassen. (vergleiche php --> html)


Danke

 

[BuzzGo]

Große Firmen nutzen z. B. CDN, für statische Inhalte keinen Apache sondern z. B. nginx, komprimieren die JS-Dateien, nutzen Caching.

Was ist den in Deinen Augen eine "große" CSS oder JS-Datei? Wird auf JS-Frameworks zurückgegriffen? Kommt ein PHP-Framework zum Einsatz?

 

[Daaron]

Jeweils eine große CSS- und JS-File zu liefern, in der 80-90% der Daten nicht unbedingt gebraucht werden, ist immer noch performanter, als die gelieferten Dateien in Abhängigkeit von den vom User gewählten Objekten zu manipulieren.
1.) dein Server hat weniger Arbeit
2.) die CSS- und JS-Dateien werden von leidlich gut konfigurierten Servern eh komprimiert übertragen. Den JS-Code kann man vorher noch durch n Schrumpfer schicken, das bringt nochmal gut was an Kilobytes. 60-70% Kompression sind tatsächlich realistisch.
3.) deine Besucher haben doch eh n Cache... Wenn deine Cache Validators korrekt eingestellt sind auf dem Server wird jeder Besucher mit nem nicht verkrüppelten Browser die CSS- und JS-Dateien, genau wie Grafiken, nur ein mal alle paar Tage/Wochen herunterladen
4.) parallele Zugriffe: Browser-Zugriffe öffnen nur sehr wenige parallele Anfragen zum Server. 4-5 parallele Verbindungen ist realistisch. Wenn du also 1x HTML, 30x Grafik, 10x CSS und 10x JS hast, dann wäre eine Änderung auf 1x HTML, 10x Grafik (durch CSS Sprites), 1x CSS und 1x JS signifikant schneller, obwohl in etwa dieselbe Datenmenge übertragen wird.

 

[N1truX]

Dem Stimme ich soweit zu, besonders bei JS ist es sehr ratsam alles in eine Datei zu verpacken und dann in einem rutsch zu übertragen. Wenn man sich mal eine Netzwerkanalyse ansieht merkt man, dass die reale Zeit für die Übertragung der Datei meist lediglich 3-10% der Gesamtzeit (Anfrage bis Last-Byte) in Anspruch nimmt. Und selbst im mobile-Bereich ist die Dateigröße eher unproblematisch.

Auch wenn es irgendwann je eine 20 kb JS/CSS-Datei ist. Einmal übertragen, ab in den Cache und fertig.

Bei (sehr) großen CSS-Dateien wäre ich vorsichtiger. Wenn man hier etwas differenzieren kann (Beispielsweise eine in HTML5/CCS3 geschriebene Bildergalerie die so sonst nicht auf der Seite eingebunden ist) ist es oft ratsamer diesen CSS-Code nur bei Bedarf zu laden. Irgendwann haben sonst die CSS-Parser einen sehr hohen Arbeitsaufwand.