CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨的圖片中，從而減少網(wǎng)站的HTTP請求數(shù)量渊鞋，降低服務(wù)器壓力绰更，同時提高了頁面的加載速度，節(jié)約服務(wù)器的流量锡宋。
優(yōu)點
- 減少加載網(wǎng)頁圖片時對服務(wù)器的請求次數(shù)
可以合并多數(shù)背景圖片和小圖標(biāo)儡湾，方便在任何位置使用，這樣不同位置的請求只需要調(diào)用一個圖片执俩，從而減少對服務(wù)器的請求次數(shù)盒粮，降低服務(wù)器壓力，同時提高了頁面的加載速度奠滑，節(jié)約服務(wù)器的流量丹皱。 - 提高頁面的加載速度
sprite 技術(shù)的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)宋税。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小于所有圖片拼合前的大小摊崭。單張的 GIF 只有相關(guān)的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表杰赛，這就增加了總體的大小呢簸。因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小根时。 - 減少鼠標(biāo)滑過的一些bug
IE6不會主動預(yù)加載鼠標(biāo)滑過即a:hover中的背景圖片瘦赫，所以，如果使用多張圖片蛤迎，鼠標(biāo)滑過會出現(xiàn)閃白的現(xiàn)象确虱。使用CSS雪碧，由于一張圖片即可替裆，所以不會出現(xiàn)這種現(xiàn)象校辩。
不足
- CSS雪碧的最大問題是內(nèi)存使用
除非這個雪碧圖片是被非常小心的組織，你就會最終使用大量的無用的空白辆童。一個例子是來自于WHIT TV的網(wǎng)站宜咒。注意這是一個1299×15,000像素的PNG圖片。它也被壓縮的很好——實際下載大小只有大概26K — 但是瀏覽器并不會渲染壓縮后的圖片數(shù)據(jù)把鉴。當(dāng)這個圖片被下載并被解壓縮之后故黑，它將占用差不多75MB的內(nèi)存 (1299 * 15000 * 4)。如果這個圖片并沒有使用alpha透明庭砍，它將會被優(yōu)化至1299 * 15000 * 3倍阐，但是要在損失渲染速度的情況下。即使那樣逗威，我們也會討論55MB。這張圖片的大部分其實就是空白岔冀，那里什么都沒有凯旭，沒沒有任何有用的內(nèi)容。只是加載 WHIT主頁 就會導(dǎo)致你的瀏覽器的內(nèi)存占用上升到至少75+MB使套，僅僅是因為那一張圖片罐呼。（PS:遺憾的是，該網(wǎng)站最近已經(jīng)改版侦高，文中提到的圖片已經(jīng)不存在了） - 影響瀏覽器的縮放功能
如果一個使用CSS雪碧的頁面使用一些瀏覽器提供的整頁縮放功能縮放了嫉柴，瀏覽器就需要做一些額外的工作來糾正這些圖片邊緣的行為——基本上來說，是為了避免雪碧中相鄰的圖片被“露進(jìn)來”奉呛。這對于小圖片沒有什么問題计螺，但是對于大圖片會是一個性能下降。 - 拼圖維護比較麻煩
拼合這么多圖片瞧壮，需要耐心登馒。同時還要時刻思考如何在使用這個圖片是不會產(chǎn)生相互的影響。將又瘦又高的圖片和又寬又矮的圖片放到一起時咆槽，不容易操作陈轿。如果要修改雪碧中的一個圖片，你就要修改整張圖片，這無疑會增大工作量麦射。 - 使CSS的編寫變得困難
如果CSS雪碧足夠復(fù)雜蛾娶，則大大增加了CSS的代碼量和難度，讓維護和修改變得困難起來潜秋。 - CSS 雪碧調(diào)用的圖片不能被打印
CSS 雪碧調(diào)用的圖片不能被打印蛔琅，除非在@media中特別添加 print聲明。 - 錯誤得使用 Sprites 影響可訪問性
一些剛?cè)腴T的開發(fā)人員會為了節(jié)省 HTTP 請求數(shù)(這是使用 CSS Sprite 一直強調(diào)的好處)而把所有的圖片都當(dāng)背景圖片來處理 – 甚至是那些傳達(dá)重要信息的圖片半等。結(jié)果會導(dǎo)致一個缺乏可訪問性的網(wǎng)站揍愁，也會降低 HTML 中 title 和 alt 的潛在益處。
因此杀饵，CSS sprite 本身沒錯莽囤，而且也不會引發(fā)可訪問性問題(事實上，正確得使用會提高可訪問性)切距。但是不分對錯得過度使用 sprite 會阻礙具有可訪問性和生產(chǎn)率方面的網(wǎng)頁建設(shè)進(jìn)程朽缎。
