|
原文：CSS Sprites: Useful Technique, or Potential Nuisance?
譯文：CSS Sprites：魚(yú)翅還是三鹿？
無(wú)處不在的 CSS sptites － 為數(shù)不多的幾個(gè)可以直接跳過(guò)”流行”這個(gè)過(guò)程，而可以馬上并且牢牢地躋身于最佳 CSS 實(shí)踐之中的幾個(gè)技術(shù)之一。雖然它真正流行是在 A List Apart 解釋并認(rèn)可這個(gè)技術(shù)之后，但是早在 2003 年 7 月份，Peter Stanicek 就已經(jīng)開(kāi)始談?wù)?/font>它了。
目前大多數(shù)的開(kāi)發(fā)人員對(duì)這個(gè)技術(shù)都有相當(dāng)?shù)卣莆眨灿泻芏嚓P(guān)于它的教程和文章。幾乎所有的文章中都宣稱(chēng)設(shè)計(jì)師和開(kāi)發(fā)人員都應(yīng)該使用 CSS sprite 來(lái)減少 HTTP 請(qǐng)求數(shù)，并且節(jié)省一些流量。這個(gè)技術(shù)被大量網(wǎng)站使用，包括使用了大型 sprite 的 Amazon .
但是這些被廣泛熱議的好處真的是值得的嗎？設(shè)計(jì)師們是否在沒(méi)有全面考慮到所有情況的情況下，在盲目地使用這個(gè)技術(shù)呢？設(shè)計(jì)師們是不是過(guò)于關(guān)注 CSS sprite 的流行，而忽略了其它應(yīng)該仔細(xì)斟酌的因素了呢？ 這篇文章會(huì)討論下使用 CSS sprite 的好處和壞處，尤其關(guān)注”濫用” sprites 的情況，而且會(huì)解釋下為什么“濫用” sprite 其實(shí)是浪費(fèi)時(shí)間。 瀏覽器緩存所有圖片
sprite 技術(shù)的其中一個(gè)好處是圖片的加載時(shí)間(在有許多 sprite 時(shí)，單張圖片的加載時(shí)間)。由所需圖片拼成的一張 GIF 圖片的尺寸會(huì)明顯小于所有圖片拼合前的大小。單張的 GIF 只有相關(guān)的一個(gè)色表，而單獨(dú)分割的每一張 GIF 都有自己的一個(gè)色表，這就增加了總體的大小。因此，單獨(dú)的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來(lái)的圖片總尺寸小。但是這真的有想象的那么好嗎？
一般來(lái)說(shuō)，瀏覽器會(huì)緩存所有的圖片 – 無(wú)論圖片 sprite 與否。sprite 技術(shù)只是在頁(yè)面第一次加載的時(shí)候才會(huì)節(jié)省帶寬，同時(shí)緩存也會(huì)對(duì)使用相同圖片的其他頁(yè)面有效。
Firefox 緩存顯示的瀏覽器緩存的來(lái)自 amazon.com 的圖片(在 Firefox 地址欄輸入 “about:cache” 來(lái)查看)。
考慮到現(xiàn)在的普遍網(wǎng)速已經(jīng)比 2003-2004 年時(shí)提出這個(gè)技術(shù)的時(shí)候要快多了，因此大量使用 sprite 技術(shù)就不是那么必要了。有一點(diǎn)需要明確，不是說(shuō)不應(yīng)該用 sprite，而是不應(yīng)該為了有限的好處來(lái)濫用這個(gè)技術(shù)。 拼合圖片的時(shí)間成本會(huì)增加
想象一下一個(gè)有三個(gè)狀態(tài)的圖片按鈕是怎么制作的：代表不同的狀態(tài)的圖片需要臨近放置在一起組成一張圖片。在使用 Photoshop 或其他軟件切圖時(shí)，不同的狀態(tài)并不會(huì)在一起；需要把他們單獨(dú)切出來(lái)再合并為一張圖片。
如果其中任一個(gè)圖片狀態(tài)需要改變，整個(gè)圖片就需要重新制作保存。對(duì)一些設(shè)計(jì)師來(lái)說(shuō)這不是什么問(wèn)題，也許他們會(huì)單獨(dú)保留不同按鈕狀態(tài)的源文件，這樣需要合并的時(shí)候就簡(jiǎn)單了。但是這個(gè)過(guò)程有點(diǎn)復(fù)雜，遠(yuǎn)沒(méi)有切出一個(gè)單獨(dú)圖片來(lái)的簡(jiǎn)單。
為了節(jié)省幾 k 的流量和幾個(gè)服務(wù)器請(qǐng)求(還只發(fā)生在第一次加載頁(yè)面時(shí))，sprite 技術(shù)是否真的值得？
出處：前端觀(guān)察
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) CSS Sprites:有用技術(shù)or潛在麻煩 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) CSS Sprites:有用技術(shù)or潛在麻煩 [1]
第 2 頁(yè) 
