性能使用

Question

我使用從絲的famfamfam圖標集約30的圖像，並已發現these in a base64 encoded format

的圖標存儲在.css文件（約20KB），並且每個結果行將包括5個相同的圖標 - 只通過https服務於現代瀏覽器。

我很想知道我是否有100行，每行包括從單個外部CSS文件引用的5個相同的圖標，這會比單獨的圖像文件或精靈執行得更好嗎？ CSS文件顯然會被緩存，但是如果瀏覽器必須反覆渲染相同的背景圖像，這是否比緩存的圖像文件更好或更差？

我也從Wikipedia注意到這一點，但對其他人的意見和經驗感興趣。

引用相同的資源（例如嵌入式小圖像）更 比從 嵌入的資源的多個拷貝同一文件的結果一次。相比之下，外部資源可以是任意多次參考的 ，但是隻下載並解碼一次 。

Answer 1

我不知道如何使一個衡量的測試，但我已經創建了一個下面撥弄http://jsfiddle.net/chrisdanek/36Uk3/

這是1000個div元素與設定的圖標的famfamfam一個背景

div { 
    float: left; 
    background: url('data:image/png;base64,...') no-repeat; 
    width: 16px; 
    height: 16px; 
} 

現在，如果您在Chrome瀏覽器中查看開發者工具，您會注意到此圖標僅加載一次，而不是單獨資源的1000次。在分析這個例子時，我沒有注意到內存負載的差異，也沒有注意到在圖標上使用url的情況。

其他瀏覽器可能會有所不同，但我的猜測是，只要你不重複自己在CSS和重用相同的編碼資源，你不應該看到基於編碼本身的差異。您仍然可以獲得少一個HTTP請求的好處。