01. css sprite是什麼，有什麼優缺點？

1.css sprite是什麼，有什麼優缺點？

一般被意譯爲「CSS圖像拼合」或「CSS貼圖定位」

1）CSS Sprites的優勢

• 利用CSS Sprites能很好地減小網頁的http請求，從而大大提升了頁面的性能，這也是CSS Sprites最大的優勢；
• CSS Sprites能減小圖片的字節，曾經屢次比較過，把3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。

2）CSS Sprites的缺點

• 在圖片合併時，要把多張圖片有序的、合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現沒必要要的背景。在寬屏及高分辨率下的自適應頁面，若是背景不夠寬，很容易出現背景斷裂；
• CSSSprites在開發的時候比較麻煩，你要經過photoshop或其餘工具測量計算每個背景單元的精確位置，這是針線活，沒什麼難度，可是很繁瑣；幸虧騰訊的鬼哥用RIA開發了一個CSS Sprites樣式生成工具，雖然還有一些使用上的不靈活，可是已經比photoshop測量來的方便多了，並且樣式直接生成，複製，拷貝就OK！　　
• CSS Sprites在維護的時候比較麻煩，若是頁面背景有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的CSS，若是在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增長了，還要改動CSS。

說白了，CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景 圖片的位置。

當頁面加載時，不是加載每一個單獨圖片，而是一次加載整個組合圖片。這是一個 了不得的改進，它大大減小了HTTP請求的次數，減輕服務器壓力，同時縮短了懸停加載圖片所須要的時間延遲，使效果更流暢，不會停頓。