91麻豆精品在线观看_一级做性色a爰片久久毛片免费_zzijzzij亚洲日本少妇jizjiz_国产日产欧美欧韩在线_日本高清在线www3344

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

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

　　二、為什么要“無圖片”？

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

　　當(dāng)然單純拿這兩個(gè)來比，還不能說明什么。

　　下面我們通過計(jì)算來說下CSS文件與CSS Image關(guān)系

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

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

　　如果我們?nèi)恳訡SS的形式模擬這個(gè)小箭頭，空間資源會(huì)占多少？我們來計(jì)算一下，首先貼下代碼

　　HTML代碼如下：

　　CSS代碼如下：

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

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

　　減少請(qǐng)求資源的大小

　　減少http的請(qǐng)求個(gè)數(shù)

　　提高可維護(hù)性

　　三、CSS無圖片技術(shù)，微博中有哪些實(shí)際應(yīng)用呢？

　　通過上面的展示，我們可以看到，無圖片技術(shù)，在微博上應(yīng)用是十分普遍的。