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

在提高整體網站性能（下載和渲染速度）的情況下似乎有以下兩個最佳實踐之間的矛盾：最佳實踐 - 只需下載您需要的CSS，或使用縮小過程？

只有打倒你需要的頁面之中的CSS查看。（因爲太多的CSS規則會導致慢渲染）
始終縮小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緩存將提高速度比你從留出不必要的規則，這會得到任何改善多了很多獲得加載反正，當用戶瀏覽到需要這些規則的網頁。

我就在這裏嗎？

來源

2010-07-04 Jonathan

我完全會回答這個問題，但它超級遲，而且這是一本能夠通讀的小說。你絕對應該縮小你的CSS，並且你應該儘可能地把它合併成一個文件。客戶端會將文件拉下一次，並將其緩存以供將來使用。它遠勝於多個HTTP請求。 – 2010-07-04 05:49:27

是的，具有諷刺意味的是，我的問題也許可以使用一些縮小:) – Jonathan 2010-07-04 06:18:57

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/

來源

2010-07-04 05:57:50

我認爲你擁有的CSS文件的數量應該基於對開發者有意義的內容，以及保持代碼清潔，組織和模塊化。它不應該受性能問題的驅動。性能很重要，但性能改進應該與CSS佈局/設計分開。 – Jonathan 2010-07-04 06:05:13

@jonathanconway - 對。我寫的CSS所以我總是保持4-5 CSS，這些足以讓我保持代碼清潔，有組織和模塊化。這個話題是一個人獨立的規則，不適合每個人。 – 2010-07-04 06:09:01

@金屬齒輪固體gzipping或不是問題是關於'頁面渲染速度，而不是數據傳輸 – Frankie 2010-07-04 06:09:21

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

來源

2010-07-04 05:58:39 Zabba

個人我想盡量減少性能問題對CSS佈局/設計的影響。我希望CSS看起來漂亮，乾淨，模塊化，易於使用等。我想要一個單獨的壓縮/縮小過程來照顧我的性能/速度問題。由於上述原因，我贊成違反第一條規則，並將* everything *縮小爲* one *文件，因爲這樣可以讓我以一種合理的方式拆分CSS文件，並且很容易處理並擔心性能後來。 – Jonathan 2010-07-04 06:03:11

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

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

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

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

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

這是一個CSS文件。

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

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

[編輯]

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

來源

2010-07-04 06:02:52 BlueBird

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

你的解決方案必須與基準你的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>

希望它能幫助！

來源

2010-07-04 06:13:49 Frankie

謝謝Frankie，那裏有很棒的提示。我認爲通過* site section *分割壓縮的CSS可能是一個好主意，但即使如此，您仍然會遇到這兩個部分之間共享CSS的問題。 – Jonathan 2010-07-04 06:20:30

@jonathanconway使用3個文件系統（通用，secA，secB）。 – Frankie 2010-07-04 06:26:29

另一個有用的答案，除了從我的角度來看渲染速度並不那麼重要。我只是避免使用通用選擇器（明星'*'）esp。單獨用於暴力重置'* {margin：0;填充：0; ''那沒關係。圖像和JS的優化雖然很重要，但寫得不好的CSS的效果對性能POV來說並不重要。 – FelipeAls 2010-07-04 10:35:19

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

回答

相關問題