最佳實踐 - 只需下載您需要的CSS，或使用縮小過程？

Question

在提高整體網站性能（下載和渲染速度）的情況下似乎有以下兩個最佳實踐之間的矛盾：

1. 只有打倒你需要的頁面之中的CSS查看。 （因爲太多的CSS規則會導致慢渲染）

2. 始終縮小CSS和它合併成一個文件。 （因爲更多的請求意味着較慢頁面加載）

現在說我決定遵循規則1.

以下問題上來：

如果2頁共用1套的CSS規則？

在這種情況下，我需要把這些規則在一個單獨的文件和參考來自兩個頁面文件。

但是，如果我開始有很多這樣的「共享規則」，我可能最終會從每個頁面引用了很多單獨的文件，因此，打破規則2.

例如，網頁A可能取決於CSS 1和2，而頁面B和C都依賴於CSS 2，頁面D取決於CSS 1.

在這種情況下，不可能每個頁面只有一個CSS，甚至不能有多個CSS，因爲有些頁面需要與其他頁面共享一些CSS文件。

但是我們不能解決結合所有的CSS的每一頁到一個單獨的每個頁面的CSS文件這個問題？

我們可以，但是這會帶來其他問題。

如果兩個網頁共享CSS的一個片段，即使我們壓縮了地獄的話，我們還是會反覆下載的片段，每次我們請求一個頁面誰的CSS時間包含片段。

由於我們已將頁面中的CSS 壓縮，所以我們允許在CSS片段被兩個或多個頁面共享的情況下發生冗餘。

瀏覽器緩存確實沒有我們這裏好，因爲在瀏覽器中，每個CSS文件有不同的文件名，因此是一個獨立的文件，即使他們中的一些包含內容是一樣的。

那麼我們應該打破哪條規則？

我劃掉的一個是：

1.您應該只打倒你需要的網頁正在查看的CSS。

我認爲這是多簡單，更實用來縮小/組合地獄所有的CSS爲我的網站，並把它倒在一個去。

至於性能問題，這可能會創造，我認爲它們是由以下事實削弱：

• 現代瀏覽器越來越善於處理CSS規則比較快，所以很快就沒有問題，如果你在內存中有很多規則沒有被使用。

• 擁有所有你的CSS緩存將提高速度比你從留出不必要的規則，這會得到任何改善多了很多獲得加載反正，當用戶瀏覽到需要這些規則的網頁。

我就在這裏嗎？

Answer 1

1.你應該用gzip

alt text http://shup.com/Shup/376348/1106472221-My-Desktop.png

http://www.fiftyfoureleven.com/weblog/web-development/css/the-definitive-css-gzip-method

http://paulstamatiou.com/how-to-optimize-your-css-even-more

對於asp.net

http://web2asp.net/2009/01/introduction-one-of-big-complaints.html

編輯：

2.與編寫CSS選擇器有效

http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

https://developer.mozilla.org/en/Writing_Efficient_CSS

3.並結合

http://rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html

RewriteEngine On 
RewriteBase/
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1 
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1 

4.回答這個問題CSS Performance issues

---

我不喜歡有多個CSS文件每一頁的閱讀建議。 4-5個css文件就足夠了。

1. Common.css (with reset and common layout and typography and Form styling) 
2. pagespecific.css (css of home and other landing pages) 
3. print.css 
<---- ie only css --- > 
4. ie6.css 
5. ie7.css 
<--- > 

並且從CSS剝離空白將會使得通過FTP進行編輯更加困難。

這裏是一個CSS或多個CSS的好文章 http://css-tricks.com/unique-pages-unique-css-files/

Answer 2

總是有取捨。如果你發現自己製作了很多CSS文件，並且存在太多的依賴關係，以便跟蹤哪個CSS文件變得困難，那麼最好製作一個（或最多兩個）CSS文件並縮小它們。希望你的CSS文件不會太瘋狂。

Answer 3

這是一個非常好的觀點Mr.Jonathaxxx ..

是的，我同意你的看法，兩個點，你把以上是重要的一點。我的一個關於你的第一點意見是..

1. 您只能打倒你需要的是 查看頁面的CSS。 （因爲太多的CSS規則 會降低渲染速度）。

我想我們也可以做到這一點。

在Web應用程序中，我們將擁有適用於所有應用程序視圖的通用框架。我們可以說它是母版頁。我們所有不同的頁面/視圖都採用它。所以所有頁面之間都有一個共同的外觀和感覺。在那種情況下，爲什麼我們不能爲此製作一張樣式表。所以它可以在所有頁面/視圖之間共享。這可以是一個佈局文件。

這是一個CSS文件。

接下來，我們可以在頁面中爲控件生成另一個CSS，或者我們也可以在佈局CSS文件中鏈接控件的樣式。

在任何風格之後，可以得到不同的網頁，我們可以爲他們有不同的文件。這不會增加單個頁面的CSS文件數量。最多一頁將得到2或3個完全相關的樣式表。

[編輯]

默認CSS文件將被永遠緩存，將所有頁面的應用程序/視圖中使用。

Answer 4

像往常一樣，這兩種情況都是有效的。

你的解決方案必須與基準你的costumers。

但我可能會堅持只有一個CSS文件，只要我可能可以。並且，如果您的網站發展到如此奢侈的尺寸，那麼您需要兩個不同的文件嘗試在兩個截然不同的網站部分site_general和logged_in中使用它們。

然而，有些東西可以幫助你：

• 壓縮CSS與YUI Compressor（給我的最好的結果）
• 有阿帕奇（或其他）deflate你的CSS文件
• ，最重要的全部，確保文件被用戶緩存！

保持清潔CSS

有一件事你可能會發現在網站上有一些發展運行後有用的是Dust-Me Selectors覆蓋您的網站未使用選擇Firefox擴展。

使用選擇明智（渲染速度！）

大概都選擇發動機從右到左進行.parent div.myclass比div.parent .myclass更快。當寫你的CSS記住這一點。還要記住ID的＃比類更快。除此之外，通常情況下，避免使用通用選擇器，不要將鼠標懸停在非鏈接元素上，... Google has a great article就可以了。

在此運行之上Firefox's Extension - Page Speed它給你一個非常詳細的慢速選擇器和更多的信息。

Apache的通貨緊縮時期例deflating is smaller than gzipping傑夫非常和善把我們在他的博客。

LoadModule deflate_module modules/mod_deflate.so 
<FilesMatch "\.(js|css|html|htm|php|xml)$"> 
    SetOutputFilter DEFLATE 
</FilesMatch> 

Apache的緩存實例

# Set up caching on media files for 1 month as recommended by page speed 
<FilesMatch "\.(gif|jpg|jpeg|png|swf|js|css)$"> 
    ExpiresDefault A2629744 
    Header append Cache-Control "public, proxy-revalidate" 
    Header append Vary "Accept-Encoding: *" 
</FilesMatch> 

希望它能幫助！