密集架|上海密集架廠家|密集柜廠家常州市武進(jìn)武新圖書設(shè)備用品有限公司是專業(yè)的密集架,密集柜廠家,主要生產(chǎn)制造密集架,密集柜,書架,檔案架,密集架,檔案柜等,詳情請(qǐng)聯(lián)系：0519-86703215

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

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

例如微贏得這個(gè)小三角圖形：

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

進(jìn)步可保護(hù)性

經(jīng)由過程以上分析，應(yīng)用CSS無圖片技巧，可以總結(jié)獲得以下3個(gè)優(yōu)點(diǎn)：

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

首先我們通過yslow得statistics檢討新浪微博最新版首頁得文件，取得Stylesheet File(CSS文件)大小為206.8K, CSS Image大年夜小為623.8K。明顯創(chuàng)造CSS文件比CSS Image小很多。

注：相關(guān)網(wǎng)站培植技能閱讀請(qǐng)移步到頻道。

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

在不該用CSS Image（經(jīng)由進(jìn)程CSS得引入得背景圖片,不包括img標(biāo)簽內(nèi)得圖片）情況下生成類似圖片效果得技術(shù)；換句話自得思就是在使用純CSS生成相似圖片后果得技能。

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

削減要求資本得巨細(xì)

通過上面得展示,張拉機(jī)具，我們可以看到，無圖片技術(shù)，在微博上應(yīng)用是異常普遍得。

CSS代碼如下：

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

HTML代碼如下：

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

從上面得代碼可以看出，在CSS文件中總共不到200個(gè)字符，如果我們按照1字符等于1B得來計(jì)算得話，200個(gè)字符也許等于0.2KB，比直接用圖片做節(jié)約了4/5得下載資源，明顯減少請(qǐng)求本錢得大小。如果我們盡可以或許得使用無圖片技術(shù)來完成，顯著可以提高頁面得加載速度；其次，我們知道每一個(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é)都知道，微博是可以換膚，假設(shè)使用CSS無圖片技術(shù)，我們僅須要簡單換一下CSS屬性就能完成換膚，提高了代碼得可掩護(hù)性。

相干得主題文章：