|
原文：CSS雪碧:要還是不要？
譯自：To Sprite Or Not To Sprite
聲明，本文中所稱 CSS雪碧 即為CSS Sprites，這個詞組一直沒有一個固定或者約定俗成的中文翻譯，一些人開始稱之為CSS雪碧，我們且當(dāng)作一次嘗試吧，如果大家覺得不妥，今后還會繼續(xù)直稱CSS Sprites�！耧w(vocal)
CSS雪碧已經(jīng)出現(xiàn)一段時(shí)間了，并上升為一種可以讓你的網(wǎng)站速度變快的方式。Steve Souders剛剛在 Velocity ‘09上展示了SpriteMe! (討論——為什么在你可以使用canvase和toDataURL和及時(shí)生成雪碧的時(shí)候還要使用CSS雪碧生成器或其它基于服務(wù)器的工具？）。然而，關(guān)于CSS雪碧有一些誤解，最主要的一個就是它們沒有缺點(diǎn)。
CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨(dú)的圖片中，從而減少你的網(wǎng)站的HTTP請求數(shù)量。該圖片使用CSS background和background-position屬性渲染(值得一提的是，這也就意味著你的標(biāo)簽變得更加復(fù)雜了，圖片是在CSS中定義，而非<img>標(biāo)簽)。
CSS雪碧的最大問題是內(nèi)存使用。除非這個雪碧圖片是被非常小心的組織，你就會最終使用大量的無用的空白。我最喜歡的例子是來自于WHIT TV的網(wǎng)站，那里的 這張圖片 用作精靈。注意這是一個1299×15,000像素的PNG圖片。它也被壓縮的很好——實(shí)際下載大小只有大概26K — 但是瀏覽器并不會渲染壓縮后的圖片數(shù)據(jù)。當(dāng)這個圖片被下載并被解壓縮之后，它將占用差不多75MB的內(nèi)存 (1299 * 15000 * 4)。如果這個圖片并沒有使用alpha透明，它將會被優(yōu)化至1299 * 15000 * 3，但是要在損失渲染速度的情況下。即使那樣，我們也會討論55MB。這張圖片的大部分其實(shí)就是空白，那里什么都沒有，沒沒有任何有用的內(nèi)容。只是加載 WHIT主頁 就會導(dǎo)致你的瀏覽器的內(nèi)存占用上升到至少75+MB，僅僅是因?yàn)槟且粡垐D片。（PS:遺憾的是，該網(wǎng)站最近已經(jīng)改版，文中提到的圖片已經(jīng)不存在了）
有利于網(wǎng)站的正確的取舍并不存在。
另外一個(雖然并沒有那么重要)不足就是如果一個使用CSS雪碧的頁面使用一些瀏覽器提供的整頁縮放功能縮放了，瀏覽器就需要做一些額外的工作來糾正這些圖片邊緣的行為——基本上來說，是為了避免雪碧中相鄰的圖片被“露進(jìn)來”。這對于小圖片沒有什么問題，但是對于大圖片會是一個性能下降。
當(dāng)然有一些顯示CSS 雪碧的明顯的好處的例子，主要的例子就是合并一批相同大小的圖片到一個文件中。例如，一系列用作標(biāo)識你的網(wǎng)站中的很多東西的16×16圖標(biāo)，或者是一些用作分類的頭之類的32×32 的圖標(biāo)。但是整合嚴(yán)重不同尺寸的圖片，特別是將又瘦又高的圖片和又寬又矮的圖片放到一起從來不是什么好主意。
然而，CSS雪碧確實(shí)提高頁面加載時(shí)間(至少在初始的頁面加載中——在后續(xù)的頁面加載中，瀏覽器就將圖片緩存了)。有沒有什么可以替代的？不幸的是，還沒有一個可以替代的方案。很多瀏覽器開始支持離線清單了，將其擴(kuò)展到允許下載一個包含一系列資源和對應(yīng)的URL的清單的文件(比如一個jar/zip文件)或許是有可能的。但是任何此類做法在一段時(shí)間內(nèi)還不會見到……
所以，在決定是否要使用CSS雪碧的時(shí)候，要注意在最初頁面加載性能之外還有很多的因素。作為一個普通的經(jīng)驗(yàn)法則，如果你的CSS 雪碧的大部分地方不包含真正的圖片內(nèi)容，你應(yīng)該相應(yīng)的避免使用它。同樣，關(guān)注將來可能出現(xiàn)的既保持頁面加載速度，同時(shí)注意避免內(nèi)存的缺陷和雪碧的性能影響。
其它的CSS雪碧的不足
下面是一些網(wǎng)友在該文評論中提到的CSS雪碧的某些不足：
- CSS 雪碧調(diào)用的圖片不能被打印，除非在@media中特別添加 print聲明——by RichB
- 如果要修改雪碧中的一個圖片，你就要修改整張圖片，這無疑會增大工作量—— by Tom B
如果你在使用的過程中，有發(fā)現(xiàn)其它的CSS雪碧的不足，歡迎提出來。
本文鏈接：http://www.95time.cn/tech/web/2009/7196.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
