動態添加CSS減少頁面重量？

好吧，這是bizaare，也是我見過的唯一一家店，這樣做。我們只有2個開發商在這家店。我的老闆認爲使用助手方法將css文件單獨添加到頁面會使我們的網站更加高效，因爲在主頁面中添加樣式引用時，每個頁面都會獲得使網站加載速度變慢的樣式。動態添加CSS減少頁面重量？

因此，我們必須

然後他要我去到每一個代碼隱藏一個company.css這是我們的主要樣式的東西，是全球性的，如主水桶如頁眉，頁腳，主等可以爲我們的某個功能說一定數量的頁面，並使用我們創建的實用程序方法來動態地將與產品相關的樣式表添加到這些頁面。例如，讓我們說我們有一個評論&評級功能。我們將所有評論&評分相關的類和ID放入了Reviews.css中。太好了。

因此，例如，在.aspx.cs頁面初始化，我們希望把這個：

Util.AddStylesheet("Ratings.css");

現在，他要我包括在我們的評論代碼倒是在這些頁面的代碼隱藏的是樣式表。 aspx頁面。但是說，不要在主頁面上提供對Reviews.css的引用。

我是唯一一個質疑這種方法，並說什麼是有一個主頁的點？我的意思是，如果你把所有的.css引用放入你的母版頁中，現在所有的頁面都有這些樣式（有些沒有使用，因爲它們不涉及該頁面），所以加重你的加載時間以結束用戶？

我的意思是共同的權利？也許人們這樣做，但我從來沒有見過它，這是一個管理的噩夢，因爲你有全局的引用動態地添加某些.css頁面到.aspx頁面的子集。

對我來說，儘管我們是一個每月接收100萬次點擊的電子商務網站，但是，我的意思是認真手動添加樣式表，並繞過只將它們全部放在主頁面中，這讓我大開眼界。我是唯一一個認爲這是瘋狂的人，並質疑他的假設，這樣做會使頁面過重，因爲它們會繼承所有樣式表，有些會被浪費.css，因爲它不一定與該特定頁面有關？對我來說，將它們添加到母版頁是一個完成的交易...簡單，可維護，並且關心。

我可以理解JS的頁面權重，但是.css？

來源

2009-11-16 PositiveGuy

根據您的樣式表有多大，這可能是有意義的。畢竟，解析CSS確實需要時間。正如Joel Coehoorn所指出的那樣，如果你有單獨的CSS文件，你就會向服務器發出很多請求，而這些請求也很昂貴。唯一真正知道的方法就是測量它......並且可能沿途測量一個CSS縮小器。 – kdgregory 2009-11-16 16:33:15

你實際上想要做的是儘量減少HTTP請求的總數，以及使用的總帶寬。如果您的主站頁面鏈接了您的reviews.css文件，則您需要爲網站上的每個頁面提供一個額外的http請求，無論您是否使用過這些樣式。所以從這個意義上說，你的老闆是對的。不要把它放在母版頁上，如果它不會在所有或大部分頁面中使用。

也就是說，我不會爲代碼隱藏任何東西，而是一個用戶控件，您可以將它放在所需的頁面上以渲染樣式節或鏈接。

來源

2009-11-16 16:28:07

有趣.... – PositiveGuy 2009-11-16 16:29:34

一般來說，我同意這一點。如果你可以做動態包含，最好用實際的樣式標籤而不是通過js來做。但這是一個問題。即使你動態地包含另一個樣式標籤，它仍然是另一個請求嗎？如果它進入頁面的頭部，無論如何它都會減緩加載時間。 javascript允許加載是異步的，所以頁面可以完成加載，無論額外的CSS是否已完成加載。 – Marco 2009-11-16 17:05:02

@Marco：問題在於它未能通過漸進式增強檢查。如果javascript被禁用，您根本不會獲得樣式。對於許多可能不成問題的人來說，可能會再次出現。用戶控制方法的好處在於它可以讓您將這部分抽象爲本質上獨立的傳輸層;只需要一個基本控件，所有其他樣式表控件繼承自。也就是說，OP的代碼隱藏功能實現了很多相同的功能。但個人而言，我嘗試將代碼保存在標記中，因此更喜歡用戶控件。 – 2009-11-16 17:29:04

如何建議妥協？

定義了最常用元素（標題，鏈接，導航列表等）的一個母版頁，然後針對特定位置的樣式表（即catalogue.css），這些頁面需要這些樣式。所以CSS仍然可以被緩存，但並不是強迫所有訪問about-us頁面的人。

這並不理想，但如果目標是降低單個單片css文件的帶寬，它可能會讓你有所進步。

事實上，我個人的做法總是使用單片樣式表;雖然有想過，但我很想嘗試建議的方法。它應該工作？也許... =/

來源

2009-11-16 16:29:12

這就是我們如何做到這一點。良好的.css維護意味着您無論出於何種原因都能按功能分配.css。你不把所有的.css放到一個文件中，這是一個維護頭痛。我無法想象任何人都不會在網站上按功能分離出他們的風格。如果你沒有明智的維護方式，那麼它就是一團糟，無論你的UI模式對於.css類有多清晰和多好，如果對於特定的業務有相當數量的自定義類，總是會分離出一個獨立的.css功能/功能 – PositiveGuy 2009-11-16 17:39:01

我必須承認，在發佈我的答案後，我重新閱讀你的問題，並認爲'啊，這就是我剛剛提出的......哎呀。'然後，在某個地方，忘記刪除我的答案。啊。我不是丹尼克蘭，但我可以聲稱瘋牛嗎？ =） – 2009-11-16 21:01:24

請記住，默認情況下，CSS文件在瀏覽器中處於CACHED狀態，所以CSS只會一次加載。

從我的經驗更多的單獨CSS文件==更多重複規則==更大的混亂。

如果你想節省了帶寬位，確保書寫時，你壓縮你的CSS，所以不是：

#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; 
}

你寫：

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

來源

2009-11-16 16:34:32 rochal

其實我做妥協常常。

我網站上的大部分頁面都使用了masterpage中聲明的所有標準css文件，但是這裏和那裏都有一個奇怪的頁面使用特殊的樣式表。高分辨率視圖，打印視圖或jquery lighbox/gallery類型的控件。

我即席樣式表加載代碼如下：

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(); 

     } 
    } 
}

來源

2009-11-16 17:07:39

動態添加CSS減少頁面重量？

回答

相關問題