隨着瀏覽器終於開始就CSS3達成一致，許多網頁開發人員正在興奮地研究他們新的無圖像網頁設計。他們很乾淨。它們可擴展。他們很強大。無圖像網頁設計帶來的性能提升
現在我們可以將設計師的美麗設計轉換爲代碼行，而不是使用img標籤打包頁面，而是使用邊框半徑，框陰影，字體面等。
兩個相關的問題：
當樣式表變得如此之大以至於他們實際上會對性能產生明顯的影響時，有沒有一點值得注意呢？
這只是常識而已。如果你的樣式表變得相當大，那麼就會產生與許多圖像一樣的負面影響。一般而言，樣式表（包含大量CSS3和花哨的比特）將比下載圖片更快。
我建議將其逐案考慮，並確定CSS或圖像是否考慮到下載速度，瀏覽器支持要求，桌面與移動設備等提供了更好的解決方案。
在帶有大量圖標（範圍爲16px到48px大小）的Web應用程序中，通過使用圖標字體，性能提升有多明顯？
除非你在談論數百/數千個圖標，否則在性能方面確實不會有非常明顯的差異。記住，圖標字體也可能讓用戶下載一些自定義字體。
這又是一個使用當前項目最好的例子。
我不認爲你的問題有一個明確的答案，但希望我所說的爲你清除一點。
是的，我認爲它可能會降低特定情況。我會在代碼中進行更多的挖掘，看看它是否會產生顯着的差異。 – Jon
我不認爲有一個「點」，性能與尺寸無關，因爲它與樣式規則本身有關。我看到的主要問題與CSS漸變（特別是徑向漸變）有關。這是一年左右的時間，但我記得在一些移動設備上測試了一些混合了漸變和（webkit）移動設備的移動設備，但網頁的顯示效果明顯滯後。刪除漸變和添加圖像消除了滯後。現在，據我所知，大多數設備現在可能會有更新的webkit顯示引擎來解決這個問題，但我認爲這仍然是一個值得考慮的問題。
CSS的重點在於樣式層疊在一起。極大的樣式表會讓我相信CSS編寫不正確，因此不能級聯。話雖如此，我想它可能有大量適當級聯的樣式表，在這種情況下，我會建議使用縮小器來消除空白並壓縮代碼以加快加載速度。
至於圖標而言，您可以創建一個精靈（多個圖像的集合），然後使用CSS定位來僅顯示您需要的圖標。通過這種方式，服務器將只獲取一個大圖像，而不是很多較小的圖像。當然，一個圖像比其他圖像更大，但沒有什麼能夠減少加載時間並減慢頁面的性能，而不是服務器對圖像的大量提取請求。
在少數情況下，CSS文件的大小確實會影響性能。如果CSS特別大，會導致一些問題。但正如其他人所說，它是文本，所以它可能是非常小的文件。但是如果這個CSS被分割成多個文件，那就成了一個更大的問題。我看到一些10-20 css文件的站點，都位於一臺服務器上。根據瀏覽器的不同，它每次只能打開2-6個（也許8個）連接到每個服務器。如果您有10個css文件，再加上10個js以及另外100個其他資源，那麼打開和關閉各種連接需要花費相當長的時間。解決此問題的一種方法是將CSS文件作爲開發過程的一部分進行連接。一些我喜歡的工具是Yeoman或Codekit。這些工具還會自動縮小CSS，並使其生成的文件更小。
使用圖標字體很好，因爲它們可以擴展並使用單個文件。當你放大頁面時，圖標仍然很好看，而你使用的PNG看起來很糟糕。圖標字體也是一個文件，所以出於與上述相同的原因，其一個文件對比10s-100s。如果您確實需要爲非圖標的某些部分使用PNG文件，請使用精靈（通常稱爲CSS精靈）進行調查。這是一種將多個圖像組合成單個png文件的技術，然後可以在網站上使用一些有創意的CSS。
感謝您對連接器的建議。那些會派上用場。 – Jon
具有約2500行（未壓縮）CSS的文本文件仍然只有大約100kb。如果同時在許多元素上使用CSS3動畫，可能會有潛在的性能問題，但這與文件大小無關。 – Shmiddty