前顏（yan）

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

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

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

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

為什么會資源浪費呢？

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

舉個例子，在這里我把瀏覽器發(fā)起的http圖片請求簡單分為兩個過程，分別為：

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

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

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

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

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

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

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

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

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

因為懶，我的想法是，每次當(dāng)我需要合成雪碧圖時，我只要經(jīng)過以下盡量簡單的步驟就可以快速合成，并且可以導(dǎo)出各個小圖標(biāo)在雪碧圖中的background-position css樣式。為此，我用nodejs寫了一個雪碧圖制作工具：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 運行生成雪碧圖

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

（如果你點開了我的github源碼連接，順便也幫我點個star哦！哈哈）

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

最新評論