欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何使用CSS sprites減少HTTP請(qǐng)求

  發(fā)布時(shí)間：2013-10-10 20:54:29   作者：佚名   我要評(píng)論
CSS sprites是指把網(wǎng)頁(yè)中很多小圖片（很多圖標(biāo)文件）做成按規(guī)律排列的一張大圖上，在顯示的時(shí)候通過(guò)background-image、background-position顯示圖片特定部分達(dá)到和分散的一張張小圖片一樣的效果
sprites是鬼怪，小妖精，調(diào)皮鬼的意思，初聽(tīng)這個(gè)高端洋氣的名字我被震懾住了，一步步掀開(kāi)其面紗后發(fā)覺(jué)很簡(jiǎn)單的東西，作用卻很大

神馬是CSS 小妖精

CSS sprites是指把網(wǎng)頁(yè)中很多小圖片（很多圖標(biāo)文件）做成按規(guī)律排列的一張大圖上，在顯示的時(shí)候通過(guò)background-image、background-position顯示圖片特定部分達(dá)到和分散的一張張小圖片一樣的效果。

使用過(guò)jQuery UI 的同學(xué)可定見(jiàn)過(guò)這種圖片

image

很多頁(yè)面常用的小圖標(biāo)，但是我們看看每個(gè)小圖標(biāo)的源碼的時(shí)候會(huì)發(fā)現(xiàn)，這些小圖標(biāo)的src是同一個(gè)文件，都是這張大圖

image

為什么要使用CSS小妖精

姑且先不管這是怎么實(shí)現(xiàn)的，我們先來(lái)了解一下又好好的方法它不用為什么要用這種怪異的方式，在代碼書(shū)寫(xiě)和可讀性上都有了一定程度的開(kāi)銷(xiāo)，這么干有什么好處能讓人們放棄安逸的做法來(lái)用CSS sprites呢？

我們知道瀏覽器在加載網(wǎng)頁(yè)的時(shí)候圖片文件及外部的JS、CSS文件都需要單獨(dú)下載，JS是堵塞HTML下載進(jìn)程的，圖片是另外開(kāi)啟進(jìn)程來(lái)下載的，不同的瀏覽器會(huì)有不同的同時(shí)下載圖片的數(shù)量的限制或者一個(gè)或者五個(gè)或者十個(gè)，反正是有限制的，所以如果一個(gè)遍布了圖片的網(wǎng)頁(yè)，或者一系列網(wǎng)頁(yè)，即使你網(wǎng)速再快也要分批次的下載這些圖片。

而且每個(gè)圖片的下載都是一次完整的HTTP請(qǐng)求-響應(yīng)。而把很多小圖片集中到一張圖片上這樣在只需要一個(gè)HTTP請(qǐng)求-響應(yīng)，在現(xiàn)在網(wǎng)速條件下不超過(guò)200k的圖片下載速度是差不多的，下載一次之后無(wú)論是該頁(yè)面還是站點(diǎn)其它頁(yè)面使用包含在這張大圖上的圖片的時(shí)候就可以使用緩存，不會(huì)帶來(lái)反復(fù)下載的開(kāi)銷(xiāo)，所以只有一個(gè)HTTP請(qǐng)求-響應(yīng)。

所以使用CSS sprites最大的好處就是減少HTTP請(qǐng)求，加快網(wǎng)站響應(yīng)速度，提高網(wǎng)站性能。有同學(xué)可能會(huì)問(wèn)了，多幾個(gè)HTTP請(qǐng)求真的會(huì)那么嚴(yán)重嗎？如果使用一張大圖，那么很可能大圖中有幾個(gè)圖片用不到，這不是多加載內(nèi)容了嗎，和多幾次HTTP請(qǐng)求開(kāi)銷(xiāo)差距有那么大嗎？

公司小伙伴兒?jiǎn)栠^(guò)我類(lèi)似問(wèn)題，我舉了個(gè)例子，我在北京，你是我的馬仔，有天我讀了蘇東坡文集，興致來(lái)了想吃廣東的荔枝，自然是馬仔去買(mǎi)，然后你去銀行取錢(qián)，坐地鐵、搭火車(chē)、開(kāi)飛機(jī)跑到廣東買(mǎi)了串荔枝回北京，拎一串荔枝回來(lái)不太累，主要是北京到廣州太折騰，明天我又來(lái)興致了，再給我買(mǎi)一串差不多的來(lái)，你又去銀行取錢(qián)、跑一趟廣州，不料我讀了一個(gè)月的蘇東坡文集，你要是天天這么跑不得發(fā)瘋，大家都會(huì)想到，看你這么愛(ài)吃荔枝，一次買(mǎi)一箱回來(lái)，拎著是有些累，但好過(guò)一次次的折騰。

在這個(gè)例子中去銀行取錢(qián)就是瀏覽器準(zhǔn)備HTTP報(bào)文，跑廣州再回來(lái)就是一個(gè)HTTP請(qǐng)求-響應(yīng)過(guò)程，荔枝自然就是response了，雖然HTTP請(qǐng)求-響應(yīng)過(guò)程沒(méi)有跑廣州那么累，但因?yàn)镠TTP協(xié)議是無(wú)連接的，一次請(qǐng)求結(jié)束后就斷開(kāi)，每次都這樣也挺累的，就跑一次拿回一張大圖來(lái)還是比較輕松的，當(dāng)然你大圖內(nèi)不能就三四張小圖。。。

還有一個(gè)好處，這樣不但快了，還省流量了，因?yàn)镠TTP請(qǐng)求-響應(yīng)會(huì)在客戶(hù)端和服務(wù)器端交互HTTP報(bào)文，所以下載一個(gè)圖片所用流量不只是圖片大小，每個(gè)HTTP報(bào)文會(huì)占用網(wǎng)絡(luò)流量的。也許有同學(xué)會(huì)問(wèn)，誰(shuí)會(huì)在乎那點(diǎn)而流量，你別說(shuō)還真有人在乎，如果你不是自己機(jī)房，而是把服務(wù)器放在別人機(jī)房就知道流量也是很貴的，如果你的網(wǎng)站每天被訪問(wèn)數(shù)十億次，這點(diǎn)兒流量就會(huì)讓你肉疼了，不知道大家看過(guò)Google首頁(yè)P(yáng)age Source沒(méi)有，截取一部分，可以發(fā)現(xiàn)，人家連HTML的換行符、縮進(jìn)、空格都給省了，你說(shuō)圖的是可讀性嗎

Capture

更別說(shuō)對(duì)廣大手機(jī)黨來(lái)說(shuō)，流量也是要看的，如果一個(gè)網(wǎng)站訪問(wèn)要花很多流量，我是不會(huì)用手機(jī)看來(lái)看去的

CSS小妖精實(shí)現(xiàn)方法

明白了為什么要這么做，我們就可以看看該怎么來(lái)做了，先有世界觀再有方法論，首先了解一下CSS的background-position

background-position 設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定 background-image 屬性。

語(yǔ)法：
background-position : length || length
background-position : position || position
取值：
length :　 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。請(qǐng)參閱 長(zhǎng)度單位
position :　 top | center | bottom | left | center | right

這是jQuery UI上取下來(lái)的兩張圖片，分別是icon普通和hover是的樣子，每個(gè)小圖是16px * 16px，每張圖片有15行16列，當(dāng)然有的部分沒(méi)有圖片，下面的demo會(huì)有很多部分有空白。

normalhover


復(fù)制代碼
代碼如下:

.icon
{
background-image:url( images/normal.png);
background-repeat:no-repeat;
height:16px;
width:16px;
float:left;
margin:4px;
background-color:#ccc;
}</p> <p> .icon:hover
{
background-image:url( images/hover.png);
background-color:#f1f1f1;
}</p> <p> #test
{
width:385px;
overflow:hidden;
margin:50px;
border:dashed 1px #ccc;
}


復(fù)制代碼
代碼如下:

<div id="test"></div>


復(fù)制代碼
代碼如下:

$(function () {
var icons = new Array();
var iconWidth = 16, iconHeight = 16, columns=16, rows = 15;
for (var i = 0; i < rows; i++)
{
for (var j = 0; j < columns; j++) {
var position = -iconWidth * j + 'px ' + -iconWidth * i;
icons.push('<div class="icon" style="background-position: ' + position + ';"></div>')
}
}
$('#test').html(icons.join(''));
});

最終效果如下圖

image

image

這樣就實(shí)現(xiàn)了使用一張大圖來(lái)代替很多小的icon圖標(biāo)，來(lái)減少HTTP請(qǐng)求，提高網(wǎng)站性能。

CSS小妖精額外福利
使用CSS splites還有一個(gè)額外的好處，如果我們使用的圖標(biāo)內(nèi)容是透明的，而邊框是白色（和網(wǎng)站背景顏色相同），我們可以通過(guò)簡(jiǎn)單的CSS來(lái)使整個(gè)網(wǎng)站的icon改變，這個(gè)在換theme的時(shí)候很貼心，關(guān)于這個(gè)的圖提介紹可以看看CSS背景色鏤空技術(shù)實(shí)際應(yīng)用及進(jìn)階

相關(guān)文章

  • CSS Sprites 樣式生成工具 3.0

    很高興為大家?guī)?lái)了CSS Sprites 樣式生成工具 3.0版本。 保存的設(shè)置文件也同時(shí)更新了，支持打開(kāi)舊的文件，會(huì)以新的格式保存（舊版本打不開(kāi)）。 操作界面做了小小的調(diào)整
    2009-06-23

  • CSS Sprites簡(jiǎn)介以及優(yōu)缺點(diǎn)

    阿里媽媽UED談CSS Sprites技術(shù).
    2009-10-20

  • css sprites把很多小圖集成在一張圖片上

    網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：在google中搜索一下css sprites這個(gè)名稱(chēng)，會(huì)查出很多信息，并且隨著SEO越來(lái)越被人們重視，采用這種技術(shù)來(lái)進(jìn)行圖片優(yōu)化的網(wǎng)站越來(lái)越多，國(guó)內(nèi)幾家大
    2009-04-02

  • CSS Sprites 技術(shù)分析

    CSS Sprites技術(shù)不新鮮，早在2005年 CSS Zengarden 的園主 Dave Shea就在ALA發(fā)表對(duì)該技術(shù)的詳細(xì)闡述,原先只在CSS玩家之間作為一種制作方法流傳，后來(lái)出來(lái)個(gè)14 Rules for Fa
    2009-04-24

  • CSS Sprites 圖片整合技術(shù)分析

    論壇上提到這樣的問(wèn)題：“css中用一張背景圖做頁(yè)面的技術(shù)有什么優(yōu)勢(shì)？” 簡(jiǎn)單介紹一下 CSS Sprites 的優(yōu)點(diǎn)： 當(dāng)用戶(hù)往U盤(pán)中拷200張圖片，會(huì)等很久。但是
    2009-06-21

  • css sprites技術(shù)將多個(gè)背景集成到一個(gè)png圖片上css定位

    美國(guó)YAHOO在頁(yè)面制作中所用到的圖片整合技術(shù)，首先將小圖片整合到一張大的圖片上，然后根據(jù)具體圖標(biāo)在大圖上的位置，給背景定位，感興趣的朋友可以了解下具體的實(shí)現(xiàn)方法
    2013-04-02

  • CSS Sprites詳解

    CSS Sprites技術(shù)不新鮮，早在2005年 CSS Zengarden 的園主 Dave Shea 就在 ALA 發(fā)表對(duì)該技術(shù)的 詳細(xì)闡述 。原先只在CSS玩家之間作為一種制作方法流傳，后來(lái)出來(lái)個(gè) 14 Rules
    2011-08-02

  • CSS Sprites實(shí)現(xiàn)圖片分組動(dòng)畫(huà)效果源碼

    CSS Sprites就是可以將許多圖片集成在一張大圖上，然后利用CSS的圖片定位技術(shù)將其分割開(kāi)來(lái)。這款CSS3圖片效果就是可以將分割完的小圖片實(shí)現(xiàn)分組的動(dòng)畫(huà)效果，我們只需要點(diǎn)擊
    2014-09-20

  • 淺談CSS Sprites切圖技術(shù)

    CSS Sprites其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位
    2014-12-12

最新評(píng)論