一、無(wú)圖片技術(shù)定義

在不使用CSS Image（通過(guò)CSS的引入的背景圖片，不包括img標簽內的圖片）情況下生成類(lèi)似圖片效果的技術(shù)；換句話(huà)的意思就是在使用純CSS生成類(lèi)似圖片效果的技術(shù)。

二、為什么要“無(wú)圖片”？

首先我們通過(guò)yslow的statistics查看新浪微博最新版首頁(yè)的文件，得到Stylesheet File（CSS文件）大小為206.8K, CSS Image大小為623.8K。明顯發(fā)現CSS文件比CSS Image小很多。

網(wǎng)站性能優(yōu)化 網(wǎng)站優(yōu)化 CSS無(wú)圖片技術(shù)

當然單純拿這兩個(gè)來(lái)比，還不能說(shuō)明什么。

下面我們通過(guò)計算來(lái)說(shuō)下CSS文件與CSS Image關(guān)系

CSS Image是由一系列的圖片組成，每一張圖，即使最小一個(gè)小箭頭（如下圖），你存成一張圖片，怎么也得1KB吧。

例如微博的這個(gè)小三角圖形：

網(wǎng)站性能優(yōu)化 網(wǎng)站優(yōu)化 CSS無(wú)圖片技術(shù)

如果我們全部以CSS的形式模擬這個(gè)小箭頭，空間資源會(huì )占多少？我們來(lái)計算一下，首先貼下代碼

HTML代碼如下：

網(wǎng)站性能優(yōu)化 網(wǎng)站優(yōu)化 CSS無(wú)圖片技術(shù)

CSS代碼如下：

網(wǎng)站性能優(yōu)化 網(wǎng)站優(yōu)化 CSS無(wú)圖片技術(shù)

從上面的代碼可以看出，在CSS文件中總共不到200個(gè)字符，如果我們按照1字符等于1B的來(lái)計算的話(huà)，200個(gè)字符大概等于0.2KB，比直接用圖片做節約了4/5的下載資源，明顯減少請求資源的大小。如果我們盡可能的使用無(wú)圖片技術(shù)來(lái)實(shí)現，明顯可以提高頁(yè)面的加載速度；其次，我們知道每一個(gè)CSS image都需要一個(gè)http請求去加載，瀏覽器每次發(fā)出的請求個(gè)數是有限的，減少CSS image的個(gè)數，顯然減少了http請求數，也就提高頁(yè)面的呈現速度；再次，經(jīng)常使用微博的同學(xué)都知道，微博是可以換膚，如果使用CSS無(wú)圖片技術(shù)，我們僅需要簡(jiǎn)單換一下CSS屬性就能實(shí)現換膚，提高了代碼的可維護性。

通過(guò)以上分析，使用CSS無(wú)圖片技術(shù)，可以總結得到以下3個(gè)優(yōu)點(diǎn)：

減少請求資源的大小

減少http的請求個(gè)數

提高可維護性