什么叫 “雪碧圖”浆竭?

大家好浸须,我是前端西瓜哥。今天來隨意聊聊雪碧圖邦泄。

雪碧圖是什么删窒?

雪碧圖,英文原名叫 CSS sprites顺囊。

sprite 指的是精靈肌索。

我們喝的雪碧,它的英文也是 sprite特碳,應(yīng)該直譯為 “精靈” 的诚亚。但要符合中國市場,因為你不能說我喝的飲料叫“精靈”午乓,那特別怪站宗。于是就走音譯的路線,翻譯成 “雪碧” 了益愈。

所以雪碧圖更正確的叫法應(yīng)該是 “精靈圖”梢灭。

那為什么叫精靈呢?

做 2D 游戲的時候蒸其,有一個術(shù)語叫做 sprite敏释,其實就是融合了各種資源的圖片,圖片里面可能會有一個角色的一套動作摸袁、或是組成背景的不同內(nèi)容的塊 tile 等等钥顽。

游戲角色的行為(攻擊、跳躍但惶、蹲下等)耳鸯,表現(xiàn)出來其實就是不同圖片的切換,狀態(tài)很多膀曾,對應(yīng)的圖片很多县爬,這樣的話我們就要保存非常多的圖片,這不太好維護(但也不是不可以)添谊。

所以通常會將這個角色的所有動作放到一個圖片上财喳,當角色行為發(fā)生變化時,就修改位置和寬高信息截取到對應(yīng)的狀態(tài)圖片扎瓶。

前端說,那我也可以這樣搞嘛概荷,我們把一些小圖片(比如圖標)也都整合到一張大圖片碌燕,然后你通過 background-position 等屬性使用你需要的區(qū)域就好了。

然后我們在使用的地方用 background-position 設(shè)置好位置:

雪碧圖的作用

雪碧圖的主要作用是減少 HTTP 請求數(shù)量

假如你有 100 張小圖片慈鸠,你要發(fā)起 100 個請求。如果你合并成一個大圖片譬巫,那你只需要發(fā)一個請求。

這在 HTTP/1 上是有不錯的優(yōu)化效果的缕题,因為 HTTP/1 下不能充分利用 TCP 帶寬胖腾,一個 TCP 同時只能有一個請求,請求太多就要排隊锨阿,導致嚴重的阻塞记罚。

到了 HTTP/2 因為多路復用特性的緣故,則沒有太大必要了末早,所有的請求都是通過流的方式打散發(fā)送的说庭,充分利用 TCP 的帶寬。

另一個作用是 提前加載好需要用到的圖片姿搜。

假設(shè)我們的一個按鈕是用圖片做的寡润,hover 時會替換圖片梭纹。如果分成獨立的兩個圖片致份,hover 就會出現(xiàn)閃爍的效果。

這是因為圖片還沒有下載好瞬沦,在圖片完成下載前雇锡,顯示的是空白锰提,直到圖片下載完成才替換上圖片。

如果我們將按鈕的所有狀態(tài)都放到雪碧圖了立肘,就不會有這個問題了名扛。當然還有一種方式就是通過 JS 手動做其他狀態(tài)小圖片的緩存。

結(jié)尾

雪碧圖其實和雪碧沒關(guān)系融蹂,它和 sprite(精靈)有關(guān)系弄企。

sprite 是一種將多個圖片資源合并成一張大圖片的做法,用到網(wǎng)頁意乓,能減少 HTTP 請求數(shù)量约素,以及提前加載一些還未使用的小圖片。

我是前端西瓜哥圣猎,關(guān)注我,學習更多前端知識为障。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末鳍怨,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子鞋喇,更是在濱河造成了極大的恐慌,老刑警劉巖落塑,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件憾赁,死亡現(xiàn)場離奇詭異散吵,居然都是意外死亡,警方通過查閱死者的電腦和手機矾睦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門枚冗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人赁温,你說我怎么就攤上這事≡统拢” “怎么了毁涉?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵贫堰,是天一觀的道長。 經(jīng)常有香客問我其屏,道長,這世上最難降的妖魔是什么川背? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮熄云,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘荚守。我一直安慰自己练般,他們只是感情好,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布敞贡。 她就那樣靜靜地躺著摄职,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蛛倦,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天,我揣著相機與錄音及皂,去河邊找鬼且改。 笑死,一個胖子當著我的面吹牛又跛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播感混,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼礼烈,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了庭呜?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤募谎,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后驮审,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吉执,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年熙掺,在試婚紗的時候發(fā)現(xiàn)自己被綠了币绩。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡缆镣,死狀恐怖试浙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情钠糊,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布抄伍,位于F島的核電站截珍,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏笛臣。R本人自食惡果不足惜隧饼,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望诞丽。 院中可真熱鬧鲸拥,春花似錦刑赶、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至枷餐,卻和暖如春苫亦,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背屋剑。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留孕讳,地道東北人肄鸽。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓油啤,卻偏偏與公主長得像,于是被迫代替她去往敵國和親益咬。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容

  • CSS雪碧梅鹦,即CSS Sprite冗锁,也有人叫它CSS精靈,是一種CSS圖像合并技術(shù)箍邮,該方法是將小圖標和背景圖像合并...
    ColinLiu123閱讀 833評論 0 0
  • 2.CSS Sprite(CSS 精靈), 也稱作 雪碧圖;如華為官網(wǎng)右側(cè)提示欄: 圖標字體是個比較大的技術(shù)討論點...
    蕭強閱讀 7,703評論 1 16
  • 什么是雪碧圖 精靈圖(英語:Sprite)樱蛤,又被稱為雪碧圖或拼合圖。在計算機圖形學中昨凡,當一張二維圖像集成進場景中,...
    LRachel閱讀 9,411評論 0 5
  • CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨的圖片中土匀,從而減少網(wǎng)站的HTTP請求數(shù)量就轧,降低服務(wù)器...
    抓住時間的尾巴吧閱讀 249評論 0 0
  • 一田度、精靈圖 1.1 為什么需要精靈圖 一個網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾,當網(wǎng)頁中的圖像過多時镇饺,服務(wù)器就...
    西紅柿君吶閱讀 192評論 0 0