作為一枚前端coder暂题，拿到設(shè)計(jì)稿時便已構(gòu)思好了這個頁面的布局，要用到的元素喜喂，UI該怎么切圖瓤摧，怎么實(shí)現(xiàn)性能最優(yōu)，這些都是一個前端在coding中必須把控好的原則玉吁。
前端性能優(yōu)化有很多入口照弥，如今一些網(wǎng)站豐富多彩，絢麗奪目进副，圖片元素占了很大一部分比例这揣，所以處理好圖片的加載、減少網(wǎng)絡(luò)請求是非常有必要的影斑，CSS Sprite就是一種方式给赞。
CSS Sprite（css精靈），就是將一些零星圖片（一般多用于icon）都包含到一張大圖中去矫户，通過CSS的“background- size”片迅，“background-position”的組合進(jìn)行背景定位，background-position可以定位出所需要小圖的位置皆辽，從而達(dá)到展示圖片的效果柑蛇。
CSS Sprite的優(yōu)點(diǎn)：
1.減少網(wǎng)頁的http請求，提高頁面的性能
2.能減少圖片的字節(jié)驱闷，多張圖片合并成1張圖片的字節(jié)總是小于多張圖片的字節(jié)總和的
3.減少命名的困擾耻台，一張圖片命名解決n張圖片的命名。雖然這是一個小事情空另，但是對于愛糾結(jié)和選擇困難癥的coder來說總是在命名上耗費(fèi)不少時間呢
4.對于一個項(xiàng)目維護(hù)來說圖片一目了然盆耽，很清晰
CSS Sprite的缺點(diǎn)
1.如果在項(xiàng)目維護(hù)工程中部分圖片有更改，最好事先在小圖之間留下足夠的空白痹换，這樣后面只需改動要修改的圖片征字，其他的圖片坐標(biāo)互不影響
2.將所有的小圖合在一起需要耗費(fèi)時間，但是今天就是給大家推薦一款在線合成的網(wǎng)站娇豫，無需ps匙姜，只需要選中要上傳的圖片點(diǎn)擊上傳即可
網(wǎng)址：https://www.toptal.com/developers/css/sprite-generator
效果如下：
左側(cè)的padding設(shè)置是小圖之間間距，可自由設(shè)置冯痢，右側(cè)是設(shè)置最后生成圖片的排列方式氮昧，下面所有小圖的寬高以及位置都顯示出來了框杜，接下來只需要到css里設(shè)置就好啦。
這里要注意的一點(diǎn)是袖肥，假設(shè)是移動端750*1334的設(shè)計(jì)稿咪辱，那么我們在處理一個70*70大小的圖片時，需要設(shè)置圖片的實(shí)際寬高是35*35椎组，那么這個時候設(shè)置background-size就應(yīng)該是生成的圖片大小除以2油狂，background-position也是現(xiàn)有標(biāo)注的位置除以2，這樣取到的圖片才會正常且完整地顯示為35*35的圖片寸癌。
原文作者技術(shù)博客：http://www.reibang.com/u/ac4daaeecdfe
95后前端妹子一枚专筷，愛閱讀，愛交友蒸苇，將工作中遇到的問題記錄在這里磷蛹，希望給每一個看到的你能帶來一點(diǎn)幫助。
歡迎留言交流溪烤。
