前顏（yan）

雪碧圖（CSS sprite ），就是把很多小圖標(biāo)合并為一張圖片。

在Web開(kāi)發(fā)中，使用雪碧圖是優(yōu)化Web性能的一種方法。

比如你可能遇到過(guò)這樣的一種場(chǎng)景：在你的頁(yè)面中，使用到了很多的小圖標(biāo)，然后你的每個(gè)小圖標(biāo)都是通過(guò) <img src='logo.png'>來(lái)引用的。

通過(guò)這種方式雖然比較方便，但是存在的一個(gè)缺點(diǎn)就是性能問(wèn)題，即瀏覽器在解析每個(gè)小圖標(biāo)時(shí)，都要發(fā)起一次http或（https）請(qǐng)求，而這個(gè)小圖標(biāo)本身卻很小，可能只有十幾k甚至幾k，那么為每個(gè)小圖標(biāo)單獨(dú)發(fā)起http請(qǐng)求，其實(shí)有點(diǎn)資源浪費(fèi)。

為什么會(huì)資源浪費(fèi)呢？

瀏覽器在與服務(wù)器進(jìn)行http請(qǐng)求的過(guò)程中，需要有一個(gè)類似握手通信的過(guò)程，然后才是真正的獲取數(shù)據(jù)。

舉個(gè)例子，在這里我把瀏覽器發(fā)起的http圖片請(qǐng)求簡(jiǎn)單分為兩個(gè)過(guò)程，分別為：

1、瀏覽器與服務(wù)器的通信握手過(guò)程，假設(shè)耗時(shí)X ms（毫秒）

2、真正的數(shù)據(jù)獲取過(guò)程，假設(shè)耗時(shí) Y ms（毫秒）

那么瀏覽器發(fā)起一次http請(qǐng)求的總耗時(shí)為：sum(1)=X+Y ms，由于小圖標(biāo)數(shù)據(jù)很小，可能只有幾k，因此通信過(guò)程的耗時(shí)X是大于Y的。

而當(dāng)你在網(wǎng)頁(yè)中引用了很多小圖標(biāo)時(shí)，假設(shè)有n個(gè)小圖標(biāo)，此時(shí)總耗時(shí)為sum(n)=nX+nY ms，通過(guò)對(duì)比sum(1)和sum(n)，你就會(huì)發(fā)現(xiàn)，上面所說(shuō)的資源浪費(fèi)主要是在于通信握手的時(shí)間Y。此時(shí)，我就會(huì)想，如果我一次性取得所有的小圖標(biāo)，那么總耗時(shí)就變成了sum(n)=nX+Y ms，這樣就能節(jié)省(n-1)Y的http握手通信的時(shí)間開(kāi)銷，從而優(yōu)化了web的響應(yīng)性能。

一、雪碧圖摳圖（background-position）

通過(guò)前面的介紹，我們知道，雪碧圖的原理就是將頁(yè)面中使用到的小圖標(biāo)合成為一張總圖。這樣的話當(dāng)我們想要使用雪碧圖中的某一個(gè)小圖標(biāo)，應(yīng)該通過(guò)如何實(shí)現(xiàn)呢？

答案是通過(guò)css的background-position，background-position的默認(rèn)坐標(biāo)是（0，0），關(guān)于background-position的詳細(xì)使用，大家可以網(wǎng)上搜索一下，資料很多。（這次主要講雪碧圖制作工具）

二、雪碧圖制作工具 simple-sprite

那么如何合成雪碧圖呢？怎樣才能更方便的合成雪碧圖呢？

因?yàn)閼校业南敕ㄊ?，每次?dāng)我需要合成雪碧圖時(shí)，我只要經(jīng)過(guò)以下盡量簡(jiǎn)單的步驟就可以快速合成，并且可以導(dǎo)出各個(gè)小圖標(biāo)在雪碧圖中的background-position css樣式。為此，我用nodejs寫(xiě)了一個(gè)雪碧圖制作工具：simple-sprite，并打包生成npm包發(fā)布至npm官網(wǎng)。

雪碧圖制作步驟如下：

1 創(chuàng)建雪碧圖生成工程

mkdir sprite-generator
cd sprite-generator

2 初始化工程

npm init

3 把所有小圖標(biāo)放到imgs中

mkdir imgs && 把所有的小圖標(biāo)放到imgs中

4 下載simple-sprite npm包

npm install --save simple-sprite

5 運(yùn)行生成雪碧圖

let sprite = require('simple-sprite');

sprite.generateSprite('./imgs');

simple-sprite：https://www.npmjs.com/package/simple-sprite

三、github源碼

構(gòu)建工具：rollup

github源碼：https://github.com/SimpleCodeCX/simple-sprite#readme

（如果你點(diǎn)開(kāi)了我的github源碼連接，順便也幫我點(diǎn)個(gè)star哦！哈哈）

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論