前端小技巧：css sprite----V客學院技術分享

 

前端小技巧：css sprite

由於英文名叫sprite，翻譯過來是精靈，而雪碧飲料也叫sprite，因此叫精靈兔或者雪碧圖。

它有什麼做用呢？

當用戶在瀏覽器裏輸入一個URL地址的時候，你會感受無數張圖片「唰唰唰」的閃出來了。在這個過程當中，瀏覽器會把這個網站的主資源（就是Html文件）拉取回來，而後開始分析網頁中的Js，Img之類的標籤，而後再去拉取這些圖片和資源。可想並且這會多麼的消耗內存。對於瀏覽器來講，他們的請求方式都是發起一個Http請求，經歷三次握手。

首先咱們來說講什麼是三次握手？

第一次

第一次握手：創建鏈接時，客戶端發送syn包（syn=j）到服務器，並進入SYN_SENT狀態，等待服務器確認；SYN：同步序列編號（Synchronize Sequence Numbers）。

第二次

第二次握手：服務器收到syn包，必須確認客戶的SYN（ack=j+1），同時本身也發送一個SYN包（syn=k），即SYN+ACK包，此時服務器進入SYN_RECV狀態；

第三次

第三次握手：客戶端收到服務器的SYN+ACK包，向服務器發送確認包ACK(ack=k+1），此包發送完畢，客戶端和服務器進入ESTABLISHED（TCP鏈接成功）狀態，完成三次握手。

完成三次握手，客戶端與服務器纔開始傳送數據

因此大量的小圖片特別影響性能，不但網頁加載完成時間慢，還可能影響一些重要的JS邏輯，使得網頁響應也變慢，卡死等等。對於瀏覽器來講，發起一個Http請求，來回幾百毫秒的耗時，已是至關高的資源耗費。

這裏就爲你們演示下css sprites設置不一樣背景圖標樣式

 

 

 

 

 

 效果以下圖所示

CSS sprites其實就是對CSS背景background樣式的擴展應用，之前設置背景background-position常見爲正數值，設置背景靠左靠上距離多少像素開始顯示圖片，爲負數值後，是將圖片拖離左邊上邊多少像素開始顯示圖片，下載本案例屢次修改修改數值，觀察觀察能找到規律很快就會做爲此技巧，同時學會PS切片工具獲取距離值。

（php開發,web前端，ui設計，vr開發專業培訓機構，v客學院版權全部，轉載請註明出路，謝謝！！！）