資訊專欄INFORMATION COLUMN
摘要：什么是打開一些網(wǎng)站可以看到每張圖片相應(yīng)需要請求一次后臺(tái)，如下圖請求是比較消耗資源的，當(dāng)網(wǎng)站中存在較多的請求時(shí)，性能就會(huì)相應(yīng)的降低，加載就會(huì)變慢，甚至卡住。減少請求能提高性能，就是通過合并多張圖片達(dá)到減少請求目的的一種技術(shù)。
什么是css sprites?
打開一些網(wǎng)站可以看到每張圖片相應(yīng)需要請求一次后臺(tái)，如下圖：
http請求是比較消耗資源的，當(dāng)網(wǎng)站中存在較多的http請求時(shí)，性能就會(huì)相應(yīng)的降低，加載就會(huì)變慢，甚至卡住。
減少http請求能提高web性能，css sprites就是通過合并多張圖片達(dá)到減少請求目的的一種技術(shù)。
css sprites工作原理
將多張圖片合并成一張大的圖片，然后利用css中的background-image,background-repeat以及background-position來實(shí)現(xiàn)。
background-image用于指定容器的背景圖片，比如background-image:url(xxx.png);,
background-repeat用于指定是否及如何重復(fù)背景圖像，比如background-repeat:no-repeat;,
最重要的是background-position,用于控制我們想要顯示的圖片位置，比如background-position:6px 6px;表示背景圖片的左上角將相對容器元素的左上角向右以及向下移動(dòng)6px。
適用場景
1.一般只能使用到固定大小的盒子（box）里，這樣才能夠遮擋住不應(yīng)該看到的部分
2.需要通過降低http請求數(shù)完成網(wǎng)頁加速。
3.網(wǎng)頁中含有大量小圖標(biāo)?；蛘?，某些圖標(biāo)通用性很強(qiáng)。
4.網(wǎng)頁中有需要預(yù)載的圖片。主要是a與a:hover背景圖這種關(guān)系的。如果a與a:hover的背景圖分別加載，那么，就會(huì)出現(xiàn)用戶鼠標(biāo)移到某個(gè)按鈕上，按鈕的背景突然消失再出來，產(chǎn)生“閃爍”，如果按鈕文字色與大背景相同或相近，就更囧了，有可能讓人產(chǎn)生按鈕“消失”了的錯(cuò)覺。
注意事項(xiàng)
1 把幾乎不會(huì)改變的通用性很強(qiáng)的圖標(biāo)或者其他圖片合并最好，可以避免每次更新圖片都要重新合并圖片
2 利用一些自動(dòng)工具生成CSS代碼，省去自己用ps找偏移量的工作
推薦工具
css sprite tools(客戶端工具)，此工具生成的部分代碼如下，選擇器的名字就是你的小圖片的文件名：
.pic1{background:url(../imgs/allbgs.png) no-repeat 0px 0px;width:6px;padding-top:6px;}
.pic2{background:url(../imgs/allbgs.png) no-repeat -6px 0px;width:6px;padding-top:6px;}
.pic3{background:url(../imgs/allbgs.png) no-repeat -12px 0px;width:16px;padding-top:13px;}
.pic4{background:url(../imgs/allbgs.png) no-repeat -28px 0px;width:15px;padding-top:17px;}
測試結(jié)果
jsfiddle地址
一些文章
CSS Sprites（截取部分圖片）是怎么工作的
csszengarden
CSS Sprites: Image Slicing’s Kiss of Death
CSS Sprites的概念、原理、適用范圍和優(yōu)缺點(diǎn)
在線工具
在線工具sprite-creator
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110919.html
摘要：性能優(yōu)化是前端開發(fā)必不可少的一環(huán)，而圖片優(yōu)化又是性能優(yōu)化中必不可少的一環(huán)，但不知道有多少開發(fā)者在網(wǎng)頁的開發(fā)過程中會(huì)注意圖片的使用，圖片使用不當(dāng)可能會(huì)導(dǎo)致網(wǎng)頁加載卡頓網(wǎng)頁加載速度慢等問題，這篇文章將會(huì)將我以往對圖片的處理做個(gè)總結(jié)。 性能優(yōu)化是前端開發(fā)必不可少的一環(huán)，而圖片優(yōu)化又是性能優(yōu)化中必不可少的一環(huán)，但不知道有多少開發(fā)者在網(wǎng)頁的開發(fā)過程中會(huì)注意圖片的使用，圖片使用不當(dāng)可能會(huì)導(dǎo)致網(wǎng)頁加...
摘要：性能優(yōu)化是前端開發(fā)必不可少的一環(huán)，而圖片優(yōu)化又是性能優(yōu)化中必不可少的一環(huán)，但不知道有多少開發(fā)者在網(wǎng)頁的開發(fā)過程中會(huì)注意圖片的使用，圖片使用不當(dāng)可能會(huì)導(dǎo)致網(wǎng)頁加載卡頓網(wǎng)頁加載速度慢等問題，這篇文章將會(huì)將我以往對圖片的處理做個(gè)總結(jié)。 性能優(yōu)化是前端開發(fā)必不可少的一環(huán)，而圖片優(yōu)化又是性能優(yōu)化中必不可少的一環(huán)，但不知道有多少開發(fā)者在網(wǎng)頁的開發(fā)過程中會(huì)注意圖片的使用，圖片使用不當(dāng)可能會(huì)導(dǎo)致網(wǎng)頁加...
摘要：一引言前端的高性能部分，主要是指減少請求數(shù)減少傳輸?shù)臄?shù)據(jù)以及提高用戶體驗(yàn)，在這個(gè)部分，圖片的優(yōu)化顯得至關(guān)重要。 Web 發(fā)展的速度讓許多人嘆為觀止，層出不窮的組件、技術(shù)，只需要合理的組合、恰當(dāng)?shù)脑O(shè)置，就可以讓 Web 程序性能不斷飛躍。所有 Web 的思想都是通用的，它們也可以運(yùn)用到 Java Web。這一系列的文章，主要講解網(wǎng)頁前端性能優(yōu)化，是與用戶最直接接觸的。事實(shí)證明，與其消耗...
摘要：淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗，提升用戶首屏體驗(yàn)，提升用戶訪問速度，讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過進(jìn)行通信。 最近項(xiàng)目慢慢走上正軌，需求趨于平穩(wěn)，這才想起需要對整站進(jìn)行性能優(yōu)化。經(jīng)過一段時(shí)間的學(xué)習(xí)，結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況，發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...
摘要：淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗，提升用戶首屏體驗(yàn)，提升用戶訪問速度，讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí)，主要是通過進(jìn)行通信。 最近項(xiàng)目慢慢走上正軌，需求趨于平穩(wěn)，這才想起需要對整站進(jìn)行性能優(yōu)化。經(jīng)過一段時(shí)間的學(xué)習(xí)，結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況，發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...
閱讀 1829·2021-09-22 15:54
閱讀 2940·2021-09-01 10:42
閱讀 3456·2019-08-30 15:56
閱讀 1449·2019-08-29 18:46
閱讀 2482·2019-08-29 10:57
閱讀 2722·2019-08-28 17:57
閱讀 3673·2019-08-23 18:14
閱讀 847·2019-08-23 17:03
