談談CSS Sprites技術及其優化

來源：微博UDC

CSS Sprites 技術對於廣大的前端工程師來說應該是一點也不陌生。這個被國內開發者暱稱為“CSS精靈”。 CSS雪碧的傢伙到底解決了什麼問題，我們又怎樣合理使用這個技術呢？下面讓我們詳細的聊聊。

在大家還在撥號上網的“遠古時期”，由於網速的限制，頁面開發者都喜歡把網頁裡面的圖片位元組數控制的非常小，往往在一個圖片資料夾裡散落著n多的小 碎圖。隨著網路技術的發展，網速的提升，大家越來越重視頁面的載入速度，頁面效率問題，過去的那些小圖便成為了前端開發者的眼中釘，因為每載入一張圖片都 會產生一次瀏覽器請求數，發起的請求數越多那麼頁面載入的速度也越慢。還有當頁面載入時，圖片一個個的零星顯示，滑鼠經過時候背景閃白等也都是我們不能忍 受的。於是乎將頁面中的背景圖整合到一起，利用“background- image”，“background- repeat”，“background-position”的組合進行背景定位的技術被廣泛使用與了頁面構建 中，這就是CSS Sprites。當然CSS Sprites技術也存在著維護不便，記憶體佔用大等等的缺點。

好了，如果我只說這些，那麼這篇文章就有點太水了。前面那些只是對CSS Sprites技術的一個普及。作為一個開發者我們應該對它有一個更全面的認識，挖掘深度內容，這樣才能有利於我們效率開發，團隊協作。

頭疼的多人拼圖遊戲

使用CSS Sprites，就好像玩拼圖遊戲一樣。一張白畫布，那麼多圖怎麼放到裡面去才會完美？這是個讓人糾結的事。而且在實際在工作場景中， 我們面臨著專案開發時間緊張，UI設計圖要分期提供，多人協同開發一個專案等等問題。這些問題非常容易讓我們在大專案中迷失，造成CSS拼圖混亂，維護及 其困難的情況。

定好規則，其實拼圖也挺好玩的

先期的準備工作

應對一個專案後期維護成本大的問題，我們最好的解決方案就是在開始前制定一系列的規範來限制問題的產品。好的開始是成功的一半。對於 CSS Sprites，在專案開始前，我們要充分認識一個產品，同UI設計師做好良好的溝通，對我們未來組成我們Sprites圖的各個元素有個大體的 概念，比如我們的背景拼圖可能包括什麼。

一個好的Sprite畫布是必須的

網頁設計裡面，Grid系統是必不可少的，好的Grid能解決我們很多排版問題。Grid系統同樣適用於CSS Sprites。我們需要建立好一個優秀的畫板，剩下的工作就是將元素合理的置於畫板中了。

這張是我準備的一張CSS Sprites畫布，我們將在這個PSD裡面組合專案中的圖片。

這張畫布是由20px*20px畫素的格子組成。這個格子基本上由專案決定的，當我們同UI設計師溝通了解這個專案最多的為16px*16px 圖示時。我們就可以採用這種Grid尺寸為畫布了。

Sprites畫布有了，接下來就是對圖示進行分組了

對於資訊的歸納總結、分類是一個有意思的事情。就拿圖示來說，我們就可以根據圖示功能，尺寸等等作為資訊維度進行歸納。其實無論怎麼歸納，都是可以的，只是記得我們以一個方向作為標準就可以了。

下圖是根據微博站外某元件完成的CSS Sprites

根據設計，我們瞭解在這個頁面，需要將圖片元素根據功能分為4個維度，即微博品牌展示元素、提交按鈕、操作類小按鈕、提示類ICON。於是我將畫布 X軸座標方向每5個格（其實完全可以10個格或者更多）劃分為一個區域，每個這樣一個區域的Y軸方向不再劃分割槽域，這樣做的目的是為了以後增加圖示的擴充套件 性。於是我們可以非常快速得到一個圖示的座標了。比如不可用的灰色的分享按鈕 X座標=5*20px=100px Y坐 標=7*20px=140px; 那麼我們就取得了這個圖示的位置即background-position: -100px -140px。如果抽象成 為公式的話，我們設定一個單元格的寬度為變數n。X座標值Gx,Y座標值Gy。那麼畫布中的元素css背景即為：background- position:-Gx*npx –Gy*npx 了。

現在圖有了，怎麼取圖也是關鍵

因為圖片儘可能的被整合到一張拼圖，所以我們需要在頁面使用圖片的位置使用空標籤定位的方式將拼圖所需展現的部分展示到頁面中。

專案出現二期需求了，需要增加圖示？

需求總是不能控制，我們要儘可能的為未來增加圖片做好打算。在剛才的例子的專案裡後期產品需要增加圖示，於是：

我們可以繼續在對應的圖區內增加對應的圖示。但是這個例子同樣暴露了一個缺陷，如果新增一個按鈕區域大於5n(100px)，我們的圖區不足以承 載。這時候我們可以同產品，設計師溝通協調，商議是否可以取消過大的按鈕設計。如果需求一定，那我們只能沿著X軸方向繼續擴充套件畫布。不過，我們也需要注意 無限的放大一張畫布，同樣會造成對頁面效率的影響。

及時的制定好規範，記錄好修改日誌

可能在專案的初期，我們還來不及制定合圖的具體規範，在專案中我們會遇到各種各樣的問題。及時的總結，維護整張CSS拼圖，在拼圖的PSD或者PNG（使用Fireworks）做好註釋，方便他人開發。拼合好的圖片提交到svn時也寫明log內容，這樣便日後查詢。

我們最終的目的

其實CSS Sprites經過了那麼多年的演變，前端開發者不斷的優化，都是為了提升頁面效率，提升團隊開發效率，減少開發維護成本而努力。配合 最近非常流行的將CSS動態語言化（如SASS LESS等），增加入變數， 繼承， 運算， 函式等。CSS Sprites會變的更好玩，會減少更多 的開發維護成本。甚至我們在“物件導向”的模組開發方式中，還可以使用一個類的的同一個backgroud-position：（x y）值，在不同的頁 面通過引用不同的圖片（background屬性）實現將一個頁面內圖片請求量進一步減少的目的。隨著高階瀏覽器的普及我們還可以多使用CSS3屬性，減 少漸變背景圖的使用，將純色ICON製作成字型取代拼圖等我們能更大程度上減少圖片的使用量。這篇文章只是拋磚引玉。實際上還有很多關於 CSS Sprites的方法，還有眾多的拼圖生成工具。

說了那麼多，我們如果在日常的開發中，只要我們多注意總結，敢於創新，敢於制定規範，那麼再小的事也能幹的很漂亮，對於CSS Sprites的優化就是這麼一個例子，你說不是麼？