Was ist eine bessere Option: CSS in einer separaten Datei oder auf derselben Seite zu speichern?
Vergessen wir die Tatsache, dass durch das Ändern des CSS für eine Datei alle HTML-Seiten direkt angewendet werden können. Ich benutze dynamische Sprachen, um die gesamte Ausgabe zu generieren - also ist das egal.
Ein paar Dinge, die ich mir vorstellen kann:
Auf der anderen Seite, wenn ich die Datenübertragung mit Zlib komprimiere, sollte das CSS auf der gleichen Seite in Bezug auf Bandbreite keine Rolle spielen, richtig? Also, ich bekomme eine weniger HTTP-Anfrage?
Wenn Sie HTML dynamisch generieren (z. B. aus Vorlagen), können Sie CSS durch CSS-Einbettung dynamisch mit dem gleichen Kontext (Daten, Programmstatus) wie beim Erstellen des HTML generieren. anstatt den gleichen Kontext bei einer nachfolgenden Anfrage zum Erzeugen des CSS erneut einzustellen.
Betrachten Sie zum Beispiel eine Seite, die eines von mehreren hundert Bildern für einen Hintergrund verwendet, abhängig von einem Zustand, der teuer zu berechnen ist. Du könntest
(1) vermeidet das Wiederholen der Berechnung des teuren Zustands, nimmt jedoch einen größeren Einfluss auf den Datenverkehr (mehr Pakete, um eine viel größere CSS-Datei zu verschieben). (2) Wird die Statusberechnung zweimal durchgeführt, sondern eine kleinere CSS-Datei. Nur (3) führt die Zustandsberechnung einmal durch und dient dem Ergebnis in einer einzigen HTTP-Anfrage.
Der Hauptvorteil einer externen CSS-Datei ist:
Wenn also das dynamisch generierte CSS zwischen Seiten oder mehreren Ansichten derselben Seite wiederverwendet werden kann, könnte eine externe Datei einen Mehrwert schaffen.
Es gibt einige allgemeine Muster für dynamisch generiertes CSS.
1. Generieren einer Teilmenge für eine Seite
Ich habe das gelegentlich gesehen. Ein Entwickler entscheidet, die Menge an CSS pro Seite zu beschränken, indem nur das gesendet wird, was notwendig ist. Ich kann mir nicht vorstellen, dass dies der Fall ist, aber ich erwähne es aus Gründen der Vollständigkeit. Dies ist eine Fehlleitung bei der Optimierung. Es ist billiger, die ganze Menge zu senden und nur effektiv zu cachen.
2. Benutzerdefiniertes Thema
Wenn der Benutzer ein bestimmtes Aussehen für Ihre Website auswählt, darüber spreche ich. Dies bedeutet, dass sie möglicherweise ein ganzes CSS-Paket auswählen und es möglicherweise eine begrenzte Auswahl gibt. In der Regel wird dies durch eine oder mehrere Basis-CSS-Dateien und dann durch eine oder mehrere CSS-Dateien für das Design erreicht. Die beste Lösung besteht darin, die richtige Kombination externer CSS-Dateien zu senden, indem Sie den Seitenkopf mit den richtigen <link> -Elementen dynamisch generieren und anschließend diese Dateien effektiv zwischenspeichern.
3. Benutzergesteuertes Design
Dies geht über (2) hinaus, wo der Benutzer Farben, Schriftarten und Größen auswählen kann, bis zu dem Punkt, wo Sie diese Auswahlmöglichkeiten nicht zu einem einzigen Themenbündel zusammenfassen können, sondern dafür einen CSS-Satz generieren müssen Benutzer. In diesem Fall haben Sie wahrscheinlich noch ein gemeinsames CSS. Senden Sie das als externe CSS-Dateien (wiederum effektiv zwischenspeichern).
Der dynamische Inhalt ist möglicherweise am besten auf der Seite, oder Sie können immer noch externe Dateien verwenden, da kein Grund dafür besteht, dass <link> nicht auf eine Datei, sondern auf ein Skript zeigen kann . Zum Beispiel:
Dabei wird die Abfragezeichenfolge dynamisch von Ihrer Kopfzeile aus generiert, die angemeldet ist. Dieses Skript sucht die Benutzereinstellungen und generiert eine dynamische CSS-Datei. Dies kann effektiv zwischengespeichert werden, während es direkt in die HTML-Datei eingefügt werden kann (es sei denn, die gesamte HTML-Datei kann effektiv zwischengespeichert werden).
4. Regelbasierte CSS-Generierung
Ich habe vorher ein Berichtssystem geschrieben, das eine Menge Regeln annahm, die entweder vom Benutzer oder einem Berichtsschreiber und einem benutzerdefinierten Bericht festgelegt wurden, und erzeugte eine vollständige HTML-Seite (basierend auf den von ihnen angeforderten Tabellen und / oder Diagrammen) Berichtsdefinition) und formatierte sie nach den Regeln. Das war wirklich dynamisches CSS. Tatsache ist, dass auch hier Caching möglich ist. Die HTML-Seite generiert eine dynamische Verknüpfung wie folgt:
%Vor%Dabei steht "Jahresumsatz" für die Berichts-ID und 0001 für eine Version. Wenn sich die Regeln ändern, erstellen Sie eine neue Version und jede Version für jeden Bericht kann effektiv zwischengespeichert werden.
Fazit
Ich kann also nicht definitiv sagen, ob externe CSS-Dateien für Sie geeignet sind oder nicht, aber wenn ich für jedes der oben genannten Szenarien gesehen und entwickelt habe, fällt es mir schwer zu glauben, dass Sie keine Form von Caching erhalten CSS an welcher Stelle sollte es extern sein.
Ich habe über das Thema effektives CSS in Supercharging CSS in PHP
Sie können auch auf die verwandte Frage Mehrere Javascript / CSS-Dateien: am besten verweisen Praktiken?
Es gibt eine Methode, bei der sowohl Google als auch Yahoo den Nutzen von Inline-CSS anwenden. Zum ersten Mal werden die Besucher wegen des schnellen Ladens CSS (und sogar JavaScript) in den HTML-Code einbetten und dann im Hintergrund die separaten CSS- und JS-Dateien für das nächste Mal herunterladen.
Steve Souders (Yahoo!) schreibt Folgendes:
[...] die beste Lösung ist im Allgemeinen um das JavaScript und CSS wie zu implementieren externe Dateien. Die einzige Ausnahme Ich habe gesehen, wo Inlining vorzuziehen ist ist mit Homepages, wie Yahoo! s Titelseite ( Ссылка ) und Mein Yahoo! ( Ссылка ). Zuhause Seiten, die wenige haben (vielleicht nur eine) Die Seitenansicht pro Sitzung kann dies finden Inlining JavaScript und CSS-Ergebnisse in schnellere Antwortzeiten für Endbenutzer.
Browser können die CSS-Dateien zwischenspeichern (sofern sich dies nicht wesentlich ändert). Die Bandbreite sollte sich nicht ändern, da die Informationen gesendet werden, unabhängig davon, wo Sie sie abgelegt haben.
Wenn das CSS also nicht ganz statisch ist, kostet es weniger Zeit, es auf die Seite zu legen.
Ja und nein. Verwenden Sie für die meisten Regeln eine CSS-Datei. Ihre Seite sollte trotzdem einheitlich aussehen. Für seltene, spezielle Fälle oder dynamisch generierte Regeln können Sie inline 'style=""' verwenden. Alles, was klebt, sollte in die .css-Datei verschoben werden, und zwar nur, um das Einschließen, Mash-ups usw. einfacher zu machen.