前言
許多小伙伴面試可能遇到前端性能優化問題，其中圖片優化最有效也是頻率最高的就是CSS精靈圖，下面講解一下我在做之前項目中用精靈圖的經驗（踩過的坑）。
概念及原理
概念：CSS-sprites，又叫精靈圖，也是CSS圖像拼合或者CSS貼圖定位。
原理：把多張圖片融合成一張圖片，然后通過css background-position取指定位置大小的圖片，減少了http請求次數自然減少了加載時間。
使用
假如項目中需要這些表情，假如不用css精靈圖你需要14張圖片，用精靈圖只需融合成一張。不要問我精靈圖咋做的，去找美工 去找美工 去找美工。
好吧，假如沒有美工的話，我之前做項目的話是通過flash合成精靈圖，合成完導出他會給你一張圖和一個文件，這張圖就相當於一個坐標系，文件上告訴精靈圖上每個小圖的大小和初始點的橫縱坐標。
通過css background-position選擇起點坐標，取高度、寬度。
我在做精靈圖的過程中，我在想一個問題，我把這些小圖合成一個大圖，總體圖片大小會不會變小呢，於是我把每個圖都單獨導出來，大小相加和精靈圖對比。結果：沒變小反而增大了一點。
杠精：那精靈圖會比之前變大是不是不能用精靈圖了呀。
結論：精靈圖在性能優化上除了減少請求次數，並不會帶來圖片資源大小上的優化，大小增大一點點真的沒啥影響。
缺點（踩過的坑）
這里的坑主要就是產品經理帶來的（死亡笑臉），項目做完了，產品覺得有些圖片不行，然后換成別的，就出現了精靈圖中有一些淘汰的圖片，就是並沒有全部用到。
杠精：那更改圖片了為啥不重新做一個精靈圖呢。
我之前做的一個項目幾百張圖片繪制了也就3張精靈圖。要是每次改一張圖片都重新做，然后重新輸入位置（死亡笑臉）。
缺點：
1.不利於管理，修改時容易造成冗余的。
2.圖片過多時，輸入位置大小工作量大。
總結：
在做項目時用到精靈圖的時候一定要把大概率不會修改的圖片繪制成一張精靈圖，或者歸類，把類型一樣的、或者寬高大小差不多的放在一張圖中。千萬不要把成千上百的所有的圖繪制在一張，
一定要分類，減少請求次數是真，但千萬不要為了減少那么幾張，整出一個非常龐大的精靈圖。我一般都是一個類放一張圖中，按功能、需求、寬高都可以分類。 之前的一個項目是購物界面,
我將物品的類型還有大物件、小物件進行分類，整個項目大概需要300張吧。我分為了大概5張精靈圖。（精靈圖用background-position輸入的時候真的累，數量少還可以，數量多心態爆炸）。