在線客服
24小時(shí)免費(fèi)咨詢電話：18978941786
客服時(shí)間：上午9：30~下午6點(diǎn)
當(dāng)前位置：首頁(yè)>> 技術(shù)文章 >> Web標(biāo)準(zhǔn) >> CSS Sprites，圖片切割與優(yōu)化技術(shù)
CSS Sprites，圖片切割與優(yōu)化技術(shù)
收藏 分享 發(fā)布日期:2012-2-12 16:30:40 編輯:admin 文章來(lái)源: 點(diǎn)擊率:
2005 年的時(shí)候 CSS 禪意花園 (CSS Zengarden) 的園主 Dave Shea 對(duì) CSS Sprites 技術(shù)的作過(guò)詳細(xì)介紹。CSS Sprites 技術(shù)提倡把所有背景圖片合并到一個(gè)圖片文件中，并使用 CSS 的 background-image 和 background-position 屬性來(lái)定位和調(diào)用。
這種方法看似繁瑣，但卻是非常有實(shí)用價(jià)值的。
首先，CSS Sprites 能較少 HTTP 請(qǐng)求次數(shù)。
我們知道，HTTP 請(qǐng)求數(shù)對(duì)網(wǎng)站的工作性能有較大關(guān)聯(lián)。如果背景圖分開(kāi)存放，每一次調(diào)用都會(huì)產(chǎn)生 HTTP 請(qǐng)求，一定程度上增加了服務(wù)器的負(fù)擔(dān)。而單個(gè)背景圖的設(shè)計(jì)方法，只需請(qǐng)求一次即可取回背景圖片。很多大型網(wǎng)站，包括雅虎，新浪等，都采用了 CSS Sprites 技術(shù)。
其次，CSS Sprites 能防止背景圖片延遲加載。
有時(shí)在點(diǎn)擊以圖片作背景的按鈕時(shí)會(huì)發(fā)現(xiàn)，鼠標(biāo)懸停的時(shí)刻才會(huì)觸發(fā)瀏覽器下載背景圖片，這是非常差勁的用戶體驗(yàn)。但如果將圖片存放與單個(gè)文件，就能避免延遲加載。因?yàn)樵诖蜷_(kāi)網(wǎng)頁(yè)的首次請(qǐng)求中，圖片已經(jīng)加載完畢。
然而，使用單個(gè)圖片文件存放的方法會(huì)降低可維護(hù)性。而且圖片的定位比較繁瑣，缺乏靈活性。在雅虎開(kāi)發(fā)小組的 YUI 產(chǎn)品中，采用了加大圖片距離的方法，同時(shí)也增加了圖片的體積。
總之，CSS Sprites 有利也有弊。在追求性能的前提下，CSS Sprites 是值得推廣的網(wǎng)頁(yè)設(shè)計(jì)方法。
本文章由南寧網(wǎng)站建設(shè)、南寧網(wǎng)站優(yōu)化、南寧網(wǎng)絡(luò)公司整理，轉(zhuǎn)載請(qǐng)注明出處：http://m.starit.com.cn/
關(guān)于我們 | 域名主機(jī) | 建站套餐 | 企業(yè)動(dòng)態(tài) | 成功案例 | 網(wǎng)站推廣 | 建站知識(shí) | 常見(jiàn)問(wèn)題 | 聯(lián)系我們
南寧煙寒網(wǎng)絡(luò)竭誠(chéng)為您免費(fèi)提供南寧網(wǎng)站建設(shè)、南寧網(wǎng)站設(shè)計(jì)、南寧網(wǎng)站優(yōu)化、維護(hù)以及網(wǎng)站技術(shù)很方面的網(wǎng)絡(luò)服務(wù)！
南寧網(wǎng)站建設(shè)、南寧網(wǎng)絡(luò)公司咨詢熱線電話：0771-5306126 18967841786(24小時(shí)全天電話)
煙寒網(wǎng)絡(luò) - 讓你進(jìn)一步走向成功