Dynamisches Hinzufügen von CSS verringert das Gewicht der Seite?

Question

Ok, das ist bizaare und das einzige Geschäft, das ich gesehen habe, tun dies..zugegeben, wir haben nur 2 Entwickler in diesem Geschäft. Mein Chef denkt, dass das Hinzufügen von CSS-Dateien individuell auf Seiten mit einem Helfer-Methode macht unsere Website effizienter, weil beim Hinzufügen der Stil Referenzen in der Masterpage, dann jede Seite bekommt diese Stile machen die Website langsamer laden.

Wir haben also eine company.css, die unsere Hauptstile für Dinge enthält, die global sind, wie die Hauptbereiche wie Header, Footer, Main, etc.

Dann möchte er, dass ich in jeden Code-Behind von, sagen wir, einem bestimmten Satz von Seiten für eine unserer Funktionen gehe und eine Dienstprogramm-Methode verwende, die wir erstellt haben, um das produktbezogene Style Sheet dynamisch zu diesen Seiten hinzuzufügen. Nehmen wir zum Beispiel an, wir haben eine Funktion für Rezensionen und Bewertungen. Wir legen alle Klassen und IDs, die sich auf Rezensionen und Bewertungen beziehen, in Reviews.css ab. Großartig.

In die .aspx.cs-Seiten Init würden wir zum Beispiel Folgendes einfügen:

Util.AddStylesheet("Ratings.css");

Jetzt möchte er, dass ich dieses Stylesheet in den Code Behind der Seiten einfüge, auf denen unser Bewertungscode in .aspx-Seiten vorkommt. Aber er sagt, ich soll keinen Verweis auf Reviews.css in die Masterseite einfügen.

Bin ich der Einzige, der diese Methode in Frage stellt und sagt, wozu dann noch eine Masterseite? Ich meine wirklich, wenn Sie alle Ihre .css-Referenzen in Ihre Master-Seite setzen, ist das Argument, dass jetzt alle Seiten all diese Stile haben (einige nicht verwendet, weil sie sich nicht auf diese Seite beziehen), ein zusätzliches Gewicht auf Ihre Ladezeit für Endbenutzer?

Ich meine allgemein, oder? Vielleicht Leute tun dies, aber ich habe nie gesehen, und es ist ein Management-Albtraum, weil Sie Verweise alle über den Fing Platz dynamisch hinzufügen bestimmte .css Seiten zu Teilmengen von .aspx Seiten haben.

Obwohl wir eine E-Commerce-Website sind, die monatlich 1 Million Zugriffe verzeichnet, ist es mir ein Rätsel, Stylesheets manuell hinzuzufügen und sie nicht einfach alle in eine Masterseite zu packen. Bin ich der Einzige, der das für verrückt hält und seine Annahme in Frage stellt, dass dadurch das Gewicht der Seiten übermäßig steigen würde, weil sie alle Stylesheets erben würden, von denen einige überflüssige .css-Dateien wären, weil sie sich nicht unbedingt auf diese spezielle Seite beziehen? Für mich ist das Hinzufügen zur Masterseite eine beschlossene Sache...einfach, wartbar und wen interessiert das schon.

Ich kann verstehen, dass Seitengewicht mit JS, aber .css?

Answer 1

Was Sie eigentlich wollen, ist die Anzahl der gesamten http-Anfragen zu minimieren, sowie die gesamte Bandbreite verwendet. Wenn Sie Ihre Datei reviews.css von der Masterseite aus verlinken, benötigen Sie eine zusätzliche http-Anfrage für jede Seite Ihrer Website, unabhängig davon, ob Sie die Stile jemals verwenden. In diesem Sinne hat Ihr Chef also recht. Legen Sie diese Datei nicht auf die Hauptseite, wenn sie nicht von allen oder den meisten Ihrer Seiten verwendet wird.

Abgesehen davon würde ich dafür auch nichts im Code-Behind haben, sondern eher eine Benutzerkontrolle, die man auf die gewünschten Seiten setzen kann, um einen Stilabschnitt oder einen Link zu rendern.

Answer 2

Das tue ich tatsächlich tun den Kompromiss ziemlich oft.

Die meisten Seiten meiner Websites verwenden alle Standard-CSS-Dateien, die in der Masterpage angegeben sind, aber es gibt hier und da eine Seite, die ein spezielles Stylesheet verwendet. Eine hochauflösende Ansicht, eine Druckansicht oder vielleicht eine Jquery-Lightbox/Galerie-Steuerung.

Mein Ad-hoc-Stylesheet-Ladecode sieht folgendermaßen aus:

using System;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;

namespace ExtensionMethods
{
    public static class PageExtensions
    {
        public static void AddStyleSheet(this Page page, String Href)
        {
            PageExtensions.AddStyleSheet(page, Href, "all");
        }

        public static void AddStyleSheet(this Page page, String Href, String Media)
        {
            Href = VirtualPathUtility.ToAppRelative(Href);

            if (!PageExtensions.StyleSheetAlreadyExists(page, Href))
            {
                HtmlLink htmlLink = new HtmlLink();
                htmlLink.Href = Href;
                htmlLink.Attributes.Add("rel", "stylesheet");
                htmlLink.Attributes.Add("type", "text/css");
                htmlLink.Attributes.Add("media", Media);

                page.Header.Controls.Add(htmlLink);
            }
        }

        static private bool StyleSheetAlreadyExists(Page page, String Href)
        {
            var preExisting = from Control c in page.Header.Controls
                              where c is HtmlLink && ((HtmlLink)c).Attributes["Href"] == Href
                              select c;

            return preExisting.Any();

        }
    }
}

Answer 3

Denken Sie daran, dass CSS-Dateien standardmäßig im Browser zwischengespeichert werden, so dass CSS ohnehin nur EINMAL geladen wird.

Meiner Erfahrung nach mehr getrennte CSS-Dateien == mehr doppelte Regeln == größeres Chaos.

Wenn Sie etwas Bandbreite sparen wollen, komprimieren Sie Ihr CSS, wenn Sie es schreiben, also anstelle von:

#review 
{
    margin-top:10px;
    margin-left:12px;
    margin-bottom:12px;
    margin-right:35px;
    background-color:#ffffff;
    background-image:url(images/blah.png);
    background-repeat: repeat-x;
}

Sie schreiben:

#review{margin:10px 35px 12px 12px;background:#fff url(images/blah.png) no-repeat;}

Answer 4

Wie wäre es, einen Kompromiss vorzuschlagen?

Eine Masterseite, auf der die am häufigsten verwendeten Elemente definiert sind (Überschriften, Links, Navigationslisten usw.), und dann ein standortspezifisches Stylesheet, d. h. catalogue.css für die Seiten, die diese Stile benötigen. So kann das Css immer noch zwischengespeichert werden, wird aber nicht jedem aufgezwungen, der nur die "Über uns"-Seite besucht.

Es ist zwar nicht ideal, aber wenn das Ziel darin besteht, die Bandbreite einer einzigen monolithischen CSS-Datei zu verringern, kann man damit vielleicht ein Stück weiterkommen.

So wie es ist, ist mein persönlicher Ansatz immer, das monolithische Stylesheet zu verwenden; obwohl ich darüber nachgedacht habe, bin ich versucht, den vorgeschlagenen Ansatz zu versuchen. Sollte es funktionieren? Vielleicht... =/