2011-02-27 43 views
2

許多人說要將外部CSS和JavaScript文件的數量降至最低,以減少往返時間。例如,Google建議每個網站分別最多使用兩個CSS和JavaScript文件。模塊化CSS文件

問題是,根據作爲「模塊化」一部分的性質,我已將CSS代碼分解爲多個文件。例如,我將僅在應用程序的某個部分中使用的CSS代碼放在單獨的文件中。因此,有些文件的代碼不到一百行。

我是一個Java開發人員,這實際上是Java中的一個推薦實踐,但CSS是完全不同的生物,我對CSS不太瞭解。這是我的問題。

  • 保持儘可能多的CSS文件是否合乎可讀性和可維護性?

  • Web項目中可管理多少個CSS文件?

  • 過去一直在使用的web應用程序中的CSS文件的平均數量是多少?

+1

在開發過程中,您應該保留儘可能多的獨立CSS文件。這是當你部署你的網站,你應該有一種方法來自動將你的CSS文件合併成一個。 – thirtydot 2011-02-27 22:58:14

+0

@thirtydot合併爲1個文件並不總是最好的解決方案,請參閱下面的答案 – Daveo 2011-02-28 00:24:48

回答

2

我同意其他人在這裏說的,是的,當你開發你有多個CSS文件,但生產你應該合併一個縮小它們。

但我不同意你應該將它們合併到一個文件中。因爲這意味着只想訪問您的主頁的人們必須等待頁面x,y,z上的CSS才能下載。

我通常做的是有2或3個CSS文件。

僅僅是出於所以它加載超快速那麼隨便遊客主頁
  • 1小的CSS文件不必等待,看看我的網站是
  • 每隔頁availble的guest用戶另一個CSS文件
  • 另一個CSS文件,僅用於需要登錄的網站的會員。

您也可以使用腳本像HEAD.JS將管理你的CSS和JavaScript異步

從那裏現場http://headjs.com/


有是一個組合的腳本執行最常見的misbelief 。錯誤:

  • 最新的瀏覽器和Head JS可以並行加載腳本。並行加載3個部件而不是單個部件通常更快。
  • 如果單個文件發生更改,則整個組合更改並且您失去了緩存的好處。最好只合並不經常更改的穩定文件。
  • 許多流行的圖書館都在CDN上託管。您應該利用它而不是託管自己
  • iPhone 3.x無法緩存大於15kb的文件,並且在iPhone 4中限制爲25kb。這是gzipping之前的大小。如果你關心iPhone,你應該尊重這些限制。
3

最好的解決辦法是寫一個劇本,結合(和minifies)多個CSS或JS文件。

1

正如您指出的那樣,擁有多個CSS文件通常會導致更好的可維護性和模塊性。

需要的CSS文件的數量取決於項目的大小和項目中的模塊化級別。

服務於CSS文件而不是很多人經常會在頁面加載時間上產生明顯的差異,所以理想的解決方案是使用某種工具來合併甚至壓縮CSS文件。這可以通過諸如Minify之類的工具在運行時輕鬆完成。

1

合併資源可以是有益的,因爲它可以減少HTTP請求的數量;減少HTTP請求的數量肯定會降低開銷並可以提高性能。它對緩存也有好處,因爲緩存中的對象數量可能會更少。

也就是說,這種優化只對度量有用。這裏有個人簡介(Firebug有一個),可以告訴你你有多少請求和他們需要多長時間。您可能(或可能不會)發現有更多時間效益的方法來提高性能並減少服務器上的負載。