譯自:To Sprite or Not To SpriteCSS Sprites 已經出現一段時間了,並上升為一種可以讓你的網頁設計網站速度變快的網頁設計方式。Steve Souders剛剛在 Velocity'09上展示了SpriteMe! (討論——為什麼在你可以使用canvase和toDataURL和及時生成雪碧的網頁設計時候還要使用CSS Sprites 生成器或其它基於服務器的網頁設計工具?)。然而,關於CSS Sprites 有一些誤解,最主要的網頁設計一個就是它們沒有缺點。CSS Sprites 的網頁設計基本原理是把你的網頁設計網站上用到的網頁設計一些圖片整合到一張單獨的網頁設計圖片中,從而減少你的網頁設計網站的網頁設計HTTP請求數量。該圖片使用CSS background和background-position屬性渲染(值得一提的網頁設計是,這也就意味著你的網頁設計標籤變得更加複雜了,圖片是在CSS中定義,而非標籤)。CSS Sprites 的網頁設計最大問題是內存使用。除非這個雪碧圖片是被非常小心的網頁設計組織,你就會最終使用大量的網頁設計無用的網頁設計空白。SEO最喜歡的網頁設計例子是來自於WHIT TV的網頁設計網站,那裡的網頁設計 這張圖片 用作精靈。注意這是一個1299×15,000像素的網頁設計PNG圖片。它也被壓縮的網頁設計很好 台中網頁設計——實際下載大小只有大概26K — 但是瀏覽器並不會渲染壓縮後的網頁設計圖片數據。當這個圖片被下載並被解壓縮之後,它將佔用差不多75MB的網頁設計內存 (1299 * 15000 * 4)。如果這個圖片並沒有使用alpha透明,它將會被優化至1299 * 15000 * 3,但是要在損失渲染速度的網頁設計情況下。即使那樣,SEO們也會討論55MB。這張圖片的網頁設計大部分其實就是空白,那裡什麼都沒有,沒沒有任何有用的網頁設計內容。只是加載 WHIT首頁 就會導致你的網頁設計瀏覽器的網頁設計內存佔用上升到至少75+MB,僅僅是因為那一張圖片。(PS:遺憾的網頁設計是,該網站最近已經改版,文中提到的網頁設計圖片已經不存在了)
有利於網站的網頁設計正確的網頁設計取捨並不存在。另外一個(雖然並沒有那麼重要)不足就是如果一個使用CSS Sprites 的網頁設計頁面使用一些瀏覽器提供的網頁設計整頁縮放功能縮放了,瀏覽器就需要做一些額外的網頁設計工作來糾正這些圖片邊緣的網頁設計行為——基本上來說,是為了避免雪碧中相鄰的網頁設計圖片被「露進來」。這對於小圖片沒有什麼問題,但是對於大圖片會是一個性能下降。當然有一些顯示CSS 雪碧的網頁設計明顯的網頁設計好 台中網頁設計處的網頁設計例子,主要的網頁設計例子就是合併一批相同大小的網頁設計圖片到一個文件中。例如,一系列用作標識你的網頁設計網站中的網頁設計很多東西的網頁設計16×16圖標,或者是一些用作分類的網頁設計頭之類的網頁設計32×32 的網頁設計圖標。但是整合嚴重不同尺寸的網頁設計圖片,特別是將又瘦又高的網頁設計圖片和又寬又矮的網頁設計圖片放到一起從來不是什麼好 台中網頁設計主意。然而,CSS Sprites 確實提高頁面加載時間(至少在初始的網頁設計頁面加載中——在後續的網頁設計頁面加載中,瀏覽器就將圖片緩存了)。有沒有什麼可以替代的網頁設計?不幸的網頁設計是,還沒有一個可以替代的網頁設計方案。很多瀏覽器開始支持離線清單了,將其擴展到允許下載一個包含一系列資源和對應的網頁設計URL的網頁設計清單的網頁設計文件(比如一個jar/zip文件)或許是有可能的網頁設計。但是任何此類做法在一段時間內還不會見到……所以,在決定是否要使用CSS Sprites 的網頁設計時候,要注意在最初頁面加載性能之外還有很多的網頁設計因素。作為一個普通的網頁設計經驗法則,如果你的網頁設計CSS 雪碧的網頁設計大部分地方不包含真正的網頁設計圖片內容,你應該相應的網頁設計避免使用它。同樣,關注將來可能出現的網頁設計既保持頁面加載速度,同時注意避免內存的網頁設計缺陷和雪碧的網頁設計性能影響。
其它的網頁設計CSS Sprites 的網頁設計不足下面是一些網友在該文評論中提到的網頁設計CSS Sprites 的網頁設計某些不足:
- CSS 雪碧調用的網頁設計圖片不能被打印,除非在@media中特別添加 print聲明。
- 如果要修改雪碧中的網頁設計一個圖片,你就要修改整張圖片,這無疑會增大工作量。
如果你在使用的網頁設計過程中,有發現其它的網頁設計CSS Sprites 的網頁設計不足,歡迎提出來。